@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fuentes/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fuentes/manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fuentes/manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fuentes/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fuentes/manrope-800.woff2") format("woff2"); }

/* ─── Tipografía: Manrope (en el servidor, sin depender de nadie) ── */


/* ══════════════════════════════════════════════════════════════════════════
   AVISOS — diseño del panel
   Azul como único color, jugando con más oscuro y más claro.
   Barra lateral, barra de arriba y tarjetas: como los paneles de ahora.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --azul-900: #132a63;   /* el más oscuro: titulares */
  --azul-oscuro: #1b3a8f; /* para cuando se pasa el ratón */
  --azul: #2563eb;       /* el de la casa */
  --azul-claro: #3b82f6; /* los botones que hay que pulsar */
  --azul-suave: #eaf1ff; /* fondos y lo elegido */
  --azul-borde: #d3e0ff;
  --tinta: #0f172a;
  --tinta-suave: #475569;
  --gris: #7c8a9e;
  --linea: #e8ecf1;
  --fondo: #f6f7f9;
  --blanco: #ffffff;
  --verde: #059669;
  --verde-suave: #ecfdf5;
  --ambar: #b45309;
  --ambar-suave: #fffbeb;
  --rojo: #dc2626;
  --rojo-suave: #fef2f2;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-alta: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --radio: 14px;
  --radio-boton: 8px;
  --lateral: 236px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "cv11" 1, "tnum" 1;
  letter-spacing: -.005em;
}

/* ─── La barra de arriba ─────────────────────────────────────────────────── */
.cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.marca {
  font-weight: 750;
  font-size: 17px;
  letter-spacing: -.2px;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 9px;
}
.marca::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul-900) 100%);
  display: inline-block;
}
.marca .punto { color: var(--azul-claro); }
.cabecera .buscador {
  flex: 1;
  max-width: 420px;
  margin-left: 8px;
}
.cabecera .buscador input {
  width: 100%;
  background: var(--fondo);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 14px;
  color: var(--tinta);
}
.cabecera .buscador input:focus {
  outline: none;
  background: var(--blanco);
  border-color: var(--azul-borde);
}
.cabecera .usuario {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta-suave);
  font-size: 13.5px;
}
.cabecera .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--azul);
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--azul-borde);
}

/* ─── La barra lateral ───────────────────────────────────────────────────── */
.cuerpo { display: flex; min-height: calc(100vh - 58px); }

.pestanas {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--blanco);
  border-right: 1px solid var(--linea);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pestanas .titulo-lateral {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 12px 12px 6px;
}
.pestanas button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pestanas button::before {
  content: "";
  width: 18px; height: 18px;
  flex: 0 0 18px;
  border-radius: 5px;
  background: currentColor;
  opacity: .28;
}
.pestanas button:hover { background: var(--fondo); color: var(--tinta); }
.pestanas button.activa {
  background: var(--azul-suave);
  color: var(--azul-oscuro);
  font-weight: 650;
}
.pestanas button.activa::before { opacity: 1; background: var(--azul-claro); }

/* ─── El contenido ───────────────────────────────────────────────────────── */
main {
  flex: 1;
  min-width: 0;
  padding: 24px 26px 40px;
}
main h1 {
  color: var(--azul-900);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.45px;
  margin: 0 0 4px;
}
main h2 { font-size: 16px; font-weight: 650; margin: 0 0 10px; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.tarjeta > .pista:first-of-type { margin-top: 0; }

.pista { color: var(--gris); font-size: 13px; margin: 6px 0; }

/* ─── Formularios ────────────────────────────────────────────────────────── */
label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-suave);
  margin: 12px 0 5px;
}
input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=date], input[type=search], select, textarea {
  width: 100%;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--tinta);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-suave);
}
textarea { min-height: 120px; resize: vertical; }

/* ─── Botones ────────────────────────────────────────────────────────────── */
.btn, .btn-naranja, .btn-suave {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radio-boton);
  padding: 10px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, box-shadow .12s, transform .06s;
}
.btn { background: var(--azul); color: #fff; box-shadow: var(--sombra); }
.btn:hover { background: var(--azul-oscuro); }
.btn-naranja { background: var(--azul-claro); color: #fff; box-shadow: var(--sombra); }
.btn-naranja:hover { background: var(--azul); }
.btn-suave { background: var(--blanco); color: var(--tinta-suave); border-color: var(--linea); }
.btn-suave:hover { background: var(--fondo); color: var(--tinta); border-color: #d8dee7; }
.btn:active, .btn-naranja:active { transform: translateY(1px); }

/* ─── Avisos de estado (etiquetas) ───────────────────────────────────────── */
.et {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}
.et-pendiente { background: #fee2e2; color: #b91c1c; }
.et-asignado  { background: #ffedd5; color: #c2410c; }
.et-aceptado  { background: #fed7aa; color: #9a3412; }
.et-terminado { background: #dcfce7; color: #15803d; }
.et-cancelado { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }

/* ─── Tablas ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 8px 12px;
  border-bottom: 1px solid var(--linea);
}
td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover, table tr:hover td { background: #fbfcfe; }

/* ─── Calendario ─────────────────────────────────────────────────────────── */
.fc { --fc-border-color: var(--linea); --fc-today-bg-color: var(--azul-suave); font-size: 13.5px; }
.fc .fc-button {
  background: var(--blanco) !important; border: 1px solid var(--linea) !important;
  color: var(--tinta-suave) !important; box-shadow: none !important;
  font-weight: 600 !important; text-transform: capitalize; border-radius: 9px !important;
  padding: 6px 12px !important;
}
.fc .fc-button:hover { background: var(--fondo) !important; }
.fc .fc-button-active, .fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--azul) !important; border-color: var(--azul) !important; color: #fff !important;
}
.fc .fc-toolbar-title { font-size: 17px !important; font-weight: 700; letter-spacing: -.2px; }
.fc-event { border: 0; border-radius: 8px; padding: 2px 6px; font-weight: 600; }
.fc-col-header-cell-cushion, .fc-timegrid-slot-label-cushion {
  color: var(--gris); font-size: 12px; font-weight: 600; text-transform: capitalize;
}

/* ─── El móvil del técnico ───────────────────────────────────────────────── */
.cuerpo-tecnico { background: var(--fondo); }
.cuerpo-tecnico .cabecera { position: static; }
.cuerpo-tecnico h1 { font-size: 24px; }
.cuerpo-tecnico .btn, .cuerpo-tecnico .btn-naranja { justify-content: center; width: 100%; }

/* ─── El calendario, con más aire (estilo Google Calendar) ────────────────── */
.fc { font-size: 14px; }
.fc .fc-toolbar { padding: 4px 0 14px; gap: 10px; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-size: 20px !important; font-weight: 700; color: var(--azul-900); }
.fc .fc-button { border-radius: 8px !important; padding: 7px 16px !important; font-size: 13.5px !important; }
.fc .fc-crear-button {
  border-radius: 8px !important;
  background: var(--azul-claro) !important;
  border-color: var(--azul-claro) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
}
.fc .fc-crear-button:hover { background: var(--azul) !important; border-color: var(--azul) !important; }

/* Los días de arriba: el nombre pequeño y el número grande (hoy, en redondo) */
.fc .cab-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 8px; }
.fc .dia-sem { font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--gris); letter-spacing: .06em; }
.fc .dia-num { font-size: 21px; font-weight: 600; color: var(--tinta-suave); line-height: 1.1; }
.fc .dia-num.hoy {
  background: var(--azul-claro); color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.fc-col-header-cell { background: var(--blanco); border-color: var(--linea) !important; }
.fc-col-header-cell-cushion { text-decoration: none !important; padding: 0 !important; }

/* La rejilla: líneas suaves y filas con aire */
.fc-timegrid-slot { height: 34px; }
.fc-timegrid-slot-minor { border-top-style: dotted; border-color: #f1f4f8 !important; }
.fc-timegrid-slot-label { vertical-align: top; }
.fc-timegrid-slot-label-cushion { font-size: 12px; color: var(--gris); padding-right: 12px; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--linea); }
.fc-theme-standard .fc-scrollgrid { border-color: var(--linea); }

/* Los avisos dentro del calendario */
.fc-event {
  border: 0 !important; border-radius: 8px; padding: 3px 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
.fc-event:hover { filter: brightness(1.06); }
.fc-timegrid-event { border-radius: 8px !important; }
.fc-event-time { font-weight: 700; opacity: .9; }
.fc .fc-timegrid-now-indicator-line { border-width: 2px 0 0; border-color: #dc2626; }
.fc .fc-timegrid-now-indicator-arrow { border-color: #dc2626; }


/* ─── Al pasar el ratón por el calendario: se sombrea donde vas a pinchar ─── */
.fc .fc-timegrid-slot-lane,
.fc .fc-timegrid-slot { transition: background .12s; }
.fc .fc-timegrid-slot-lane:hover,
.fc .fc-timegrid-slot:hover { background: #eef4ff; }

/* La columna entera, muy leve, para saber en qué día estás */
.fc-timegrid-col:hover .fc-timegrid-col-frame { background: rgba(59, 130, 246, .028); }

/* Y en el mes, el día donde estás */
.fc .fc-daygrid-day:hover,
.fc .fc-daygrid-day-frame:hover { background: #f7faff; }

/* El cursor, para que se vea que se puede pinchar */
.fc-timegrid-slot-lane, .fc-daygrid-day-frame { cursor: pointer; }

/* Y cuando el aviso ya está puesto, el ratón normal (ahí se pincha para abrirlo) */
.fc-event { cursor: pointer; }


/* ══════════════════════════════════════════════════════════════════════════
   MÓVIL Y TABLETA
   En pantalla estrecha: la barra lateral se convierte en una tira arriba,
   los formularios se ponen en una columna, las tablas se deslizan solas
   y el calendario deja de apretar los días.
   ══════════════════════════════════════════════════════════════════════════ */

/* Las tablas, que se puedan deslizar en horizontal si no caben */
.tarjeta:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1100px) {
  table { font-size: 13.5px; }
  th, td { padding: 10px 9px; }
  main { padding: 20px 18px 36px; }
}

@media (max-width: 900px) {
  /* La barra lateral, como tira horizontal pegada arriba */
  .cuerpo { flex-direction: column; }
  .pestanas {
    width: auto; flex: 0 0 auto; flex-direction: row; align-items: center;
    overflow-x: auto; gap: 6px; padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--linea);
    position: sticky; top: 58px; z-index: 30; background: var(--blanco);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas .titulo-lateral { display: none; }
  .pestanas button {
    width: auto; white-space: nowrap; padding: 8px 14px; font-size: 13.5px;
    background: var(--fondo); border: 1px solid var(--linea);
  }
  .pestanas button::before { display: none; }
  .pestanas button.activa { border-color: var(--azul-borde); }

  main { padding: 16px 14px 34px; }
  .tarjeta { padding: 16px 15px; border-radius: 12px; }
  .cabecera { padding: 0 14px; gap: 10px; }
  .cabecera .buscador { max-width: none; margin-left: 0; }
  main h1 { font-size: 20px; }
  .fc { font-size: 13px; }
  .fc .fc-toolbar-title { font-size: 17px !important; }
  #f-mapa { height: 220px !important; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  /* El buscador de arriba se quita: en el móvil no cabe con el resto */
  .cabecera .buscador { display: none; }
  .cabecera .usuario > span:first-child { display: none; }
  .cabecera .btn-suave { padding: 7px 11px !important; }
  main { padding: 12px 11px 30px; }
  h1 { font-size: 19px; }
  /* El calendario: los mandos en dos filas y los días más juntos */
  .fc .fc-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
  .fc .fc-toolbar-title { order: -1; text-align: center; }
  .fc .fc-button { padding: 6px 12px !important; font-size: 13px !important; }
  .fc .dia-num { font-size: 17px; }
  .fc .dia-num.hoy { width: 28px; height: 28px; }
  .fc .dia-sem { font-size: 10px; }
  th, td { padding: 8px 7px; font-size: 13px; }
  .btn, .btn-naranja, .btn-suave { padding: 9px 14px; font-size: 13.5px; }
  textarea { min-height: 100px; }
  /* El aviso flotante, que no se salga de la pantalla */
  #aviso-flotante { width: calc(100% - 24px); text-align: center; }
}

/* En pantallas táctiles, el sombreado del ratón no existe: se sombrea al tocar */
@media (hover: none) {
  .fc .fc-timegrid-slot-lane:hover, .fc .fc-timegrid-slot:hover { background: transparent; }
  .fc-timegrid-col:hover .fc-timegrid-col-frame { background: transparent; }
}


/* ─── El alta / edición del aviso: a lo ancho, igual que la tabla de arriba ── */
#av-form {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding: 22px 24px;
}
#av-form h2 { margin-bottom: 6px; }
/* Los campos, a lo ancho de su columna (como la tabla) */
#av-form input[type=text], #av-form input[type=tel], #av-form input[type=date],
#av-form select, #av-form textarea { max-width: none; }
#f-mapa { max-width: none; }


/* ─── La tabla de avisos: que entren todas las columnas ───────────────────── */
#av-lista table { font-size: 13px; table-layout: auto; width: 100%; }
#av-lista th, #av-lista td { padding: 8px 7px; white-space: nowrap; }
#av-lista th { font-size: 11px; letter-spacing: .03em; }
#av-lista td:nth-child(3) { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }  /* cliente */
#av-lista td:nth-child(4) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }  /* marca */
#av-lista td:nth-child(6) { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }  /* dirección */
#av-lista td:nth-child(7) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }  /* técnico */
#av-lista td:last-child { text-align: right; padding-right: 4px; }
#av-lista .et { padding: 2px 8px; font-size: 11.5px; }
#av-lista td:nth-child(8) { white-space: nowrap; }
/* El aviso de «no hay nada» y el contador, en su sitio */
#av-cuenta { margin: 4px 0 0; }
@media (max-width: 1100px) {
  #av-lista table { font-size: 12.5px; }
  #av-lista th, #av-lista td { padding: 7px 5px; }
}


/* ─── Los avisos del calendario: fondo suave y letra/filete en el color fuerte ── */
.fc .fc-event.av-pendiente, .fc .fc-event.av-pendiente .fc-event-title { color: #b91c1c; }
.fc .fc-event.av-asignado, .fc .fc-event.av-asignado .fc-event-title { color: #c2410c; }
.fc .fc-event.av-aceptado, .fc .fc-event.av-aceptado .fc-event-title { color: #9a3412; }
.fc .fc-event.av-terminado, .fc .fc-event.av-terminado .fc-event-title { color: #15803d; }
.fc .fc-event.av-cancelado, .fc .fc-event.av-cancelado .fc-event-title { color: #64748b; }
.fc .fc-event { border-left-width: 4px; }
.fc .fc-event .fc-event-title { font-weight: 600; }
.fc .fc-event.av-terminado { text-decoration: none; }

/* ─── Estados nuevos: en el aire (reprogramar) y esperando material ── */
.et-reprogramar { background: #e2e8f0; color: #475569; }
.et-espera { background: #efe4ff; color: #6d28d9; }
#aire-cuenta { font-weight: 700; }


/* ─── Botones pequeños y tenues (para las tarjetas de Pendientes) ─────────── */
.btn-mini, .btn-mini-azul {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 7px;
  font-weight: 600;
  line-height: 1.3;
}
.btn-mini { background: #f1f5ff; color: #3b4a6b; border: 1px solid #dfe7fb; }
.btn-mini:hover { background: #e6edff; color: #1b3a8f; }
/* El de material listo: relleno, para que tire del ojo (pero pequeño) */
.btn-mini-azul { background: #2563eb; color: #fff; border: 1px solid #2563eb;
                 box-shadow: 0 1px 3px rgba(37,99,235,.35); }
.btn-mini-azul:hover { background: #1b3a8f; border-color: #1b3a8f; color: #fff; }