/* =====================================================================================================================
   Panel de oficina · hoja de estilos
   Estructura: 1 fuentes y variables · 2 base · 3 botones y campos · 4 estructura (menú lateral, barra, contenido)
   5 listas y tarjetas · 6 la ficha del parte · 7 desglose, fotos, albarán · 8 pantallas (Hoy, Resultados, Partes en tabla,
   Calendario)
   9 formularios y cierre en tres pasos · 10 móvil.
   Sin estilos en línea ni scripts en línea (la política de seguridad del servidor no los admite): todo vive aquí.
   ===================================================================================================================== */

/* ---------- 1. Fuentes y variables ---------- */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("fuentes/inter-700.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/inter-display-600.woff") format("woff"); }

:root {
  /* marca: petróleo (agua y tubería) */
  --marca: #0f6b7e;
  --marca-oscura: #0a5160;
  --marca-clara: #e4f2f5;
  --lateral: #0f262d;
  --lateral-texto: #a8bec5;
  --lateral-acento: #5fd0dc;

  /* superficies y texto */
  --fondo: #f3f5f6;
  --tarjeta: #ffffff;
  --texto: #15262c;
  --suave: #5a6b72;
  --borde: #dde3e6;
  --borde-fuerte: #c3cdd1;
  --relleno: #f6f8f9;

  /* semáforo: sobrio. El rojo solo aparece donde hay peligro o pérdida */
  --alta: #b42318;
  --alta-fondo: #fef3f2;
  --alta-borde: #f4b7b1;
  --media: #a15c07;
  --media-fondo: #fff6e5;
  --media-borde: #f0cf93;
  --baja: #0b7a4b;
  --baja-fondo: #e9f7ef;
  --curso: #1759c9;
  --curso-fondo: #eef4ff;
  --curso-borde: #a9c4f5;
  --curso-texto: #174099;
  --primario: var(--marca);

  --radio: 12px;
  --radio-chico: 8px;
  --sombra-1: 0 1px 2px rgba(15, 38, 45, .06);
  --sombra-2: 0 4px 14px rgba(15, 38, 45, .09);
  --sombra-3: 0 20px 50px rgba(15, 38, 45, .28);
  --ancho-lateral: 236px;
  --alto-cabecera-ficha: 64px;
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-titulo: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.5 var(--letra);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, p, ul, ol, dl, blockquote, figure { margin: 0; }
button, input, select, textarea { font: inherit; }
a { color: var(--marca); }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.barra :focus-visible { outline-color: var(--lateral-acento); }

.suave { color: var(--suave); }
.error { color: var(--alta); font-weight: 600; }
.texto-alta { color: var(--alta); }
.texto-curso { color: var(--curso); }
.nota { color: var(--suave); }

/* ---------- 3. Botones y campos ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 16px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--tarjeta); color: var(--texto);
  font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center;
  box-shadow: var(--sombra-1);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.boton:hover:not(:disabled) { background: var(--relleno); border-color: var(--suave); }
.boton:active:not(:disabled) { box-shadow: none; }
.boton:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.boton.primario { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.boton.primario:hover:not(:disabled) { background: var(--marca-oscura); border-color: var(--marca-oscura); }
.boton.peligro { color: var(--alta); border-color: var(--alta-borde); background: var(--tarjeta); }
.boton.peligro:hover:not(:disabled) { background: var(--alta-fondo); border-color: var(--alta); }
.boton.whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; font-weight: 600; }
.boton.whatsapp:hover:not(:disabled) { background: #178a45; border-color: #178a45; }
.boton.chico { min-height: 32px; padding: 4px 12px; font-size: 13px; }
a.boton { text-decoration: none; }

input, select, textarea {
  width: 100%; min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: #fff; color: var(--texto);
  transition: border-color .12s, box-shadow .12s;
}
select { padding-right: 8px; }
textarea { min-height: 0; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #71808a; }
input:hover:not(:disabled):not([readonly]), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--suave); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(15, 107, 126, .2); }
input[readonly] { background: var(--relleno); color: var(--suave); }
input[type="checkbox"] { width: 16px; min-height: 0; height: 16px; margin: 0 8px 0 0; accent-color: var(--marca); }

.campo { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--texto); }
.campo > :is(input, select, textarea), .campo input, .campo select, .campo textarea { font-weight: 400; font-size: 15px; }
.campo small, .campo .ayuda, .ayuda { font-size: 13px; font-weight: 400; color: var(--suave); }
.campo .rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.campo-con-lista { display: grid; gap: 4px; }
.formulario { display: grid; gap: 14px; }
.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fila-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chk { display: flex; align-items: center; font-weight: 400; font-size: 14.5px; cursor: pointer; }
label.marca { display: flex; align-items: center; min-height: 40px; color: var(--texto); font-size: 14px; font-weight: 400; }

.error-campo { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--alta); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alta); background: var(--alta-fondo); }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.centrado { justify-content: center; margin-top: 16px; }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--lateral); }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.acceso-caja { width: min(380px, 100%); padding: 32px 28px; display: grid; gap: 16px; border: 0; box-shadow: var(--sombra-3); border-radius: 16px; }
.acceso-caja h1 { font: 600 24px/1.2 var(--letra-titulo); letter-spacing: -.02em; }
.acceso-caja .marca-logo { width: 46px; height: 46px; border-radius: 12px; --ico-tam: 26px; }
.acceso-caja .boton { min-height: 44px; }

/* ---------- 4. Estructura: menú lateral, barra de herramientas y contenido ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }

/* Menú lateral (escritorio) */
.barra {
  position: sticky; top: 0; z-index: 5; align-self: start;
  display: flex; flex-direction: column; gap: 8px;
  height: 100vh; padding: 20px 12px 16px;
  background: var(--lateral); color: var(--lateral-texto);
  overflow-y: auto;
}
.marca-logo {
  flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--marca); color: #fff;
  --ico-tam: 22px;
}
div.marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.marca-texto { display: grid; gap: 1px; font-size: inherit; font-weight: inherit; }
.marca-nombre { font: 600 19px/1.1 var(--letra-titulo); letter-spacing: -.01em; color: #fff; }
.marca-sub { font-size: 12.5px; color: var(--lateral-texto); }

.pestanas { display: grid; gap: 2px; margin: 0; }
.pestana {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 42px; padding: 8px 12px; border: 0; border-radius: var(--radio-chico);
  background: none; color: var(--lateral-texto);
  font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .12s, color .12s;
}
.pestana:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pestana.activa { background: rgba(255, 255, 255, .11); color: #fff; font-weight: 600; }
.pestana.activa::after { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lateral-acento); }
.pestana-icono { flex: none; --ico-tam: 20px; display: inline-grid; place-items: center; }

.barra-pie { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.boton-barra {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: var(--radio-chico); background: none; color: var(--lateral-texto);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.boton-barra:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.boton-barra::before { --ico-tam: 20px; margin-inline-end: 12px; }

/* Barra de herramientas (arriba del contenido) */
.area { min-width: 0; display: flex; flex-direction: column; }
.herramientas {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  min-height: 60px; padding: 10px 32px;
  background: var(--fondo); /* opaca y sin filtros: el botón «Nuevo aviso» del móvil es fijo y un filtro lo ataría a esta barra */
  border-bottom: 1px solid var(--borde);
}
.herramientas-marca { display: none; align-items: center; gap: 10px; margin-right: auto; }
.herramientas-marca .marca-nombre { color: var(--texto); }
.barra-acciones { display: flex; align-items: center; gap: 8px; }

.contenido { width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 32px 56px; }
#vista-avisos.vista-tabla { max-width: 1280px; }
.titulo-pantalla { margin-bottom: 18px; font: 600 26px/1.2 var(--letra-titulo); letter-spacing: -.02em; }
.migas { margin-bottom: 6px; font-size: 14px; }
.migas a, .enlace-atender, .enlace-mas { text-decoration: none; }
.migas a { color: var(--marca); font-weight: 600; }
.migas a:hover { text-decoration: underline; }
.resumen { margin: 4px 0 14px; font-size: 14px; color: var(--suave); }
.resumen strong { font-weight: 600; }

/* Estado de WhatsApp y de la IA */
.estado-wa { width: 100%; max-width: 980px; margin: 0 auto; padding: 16px 32px 0; display: grid; gap: 8px; }
.estado-wa-linea { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--suave); }
.punto-estado { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--suave); }
.punto-estado.ok { background: var(--baja); box-shadow: 0 0 0 3px rgba(11, 122, 75, .16); }
.punto-estado.mal { background: var(--alta); box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }
.punto-estado.dudoso { background: var(--media); box-shadow: 0 0 0 3px rgba(161, 92, 7, .16); }
.lista-espera { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.espera {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 10px; font-size: 14px;
  background: var(--curso-fondo); border: 1px solid var(--curso-borde); color: var(--curso-texto);
}
.espera.procesando { background: var(--media-fondo); border-color: var(--media-borde); color: var(--media); }
.espera.grave { background: var(--alta-fondo); border-color: var(--alta-borde); color: var(--alta); font-weight: 600; }
.espera-texto { flex: 1 1 200px; overflow-wrap: anywhere; }
.enlace-estado { font-weight: 600; color: var(--marca); text-decoration: none; }
.enlace-estado:hover { text-decoration: underline; }
.punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Aviso emergente */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  max-width: calc(100% - 32px); padding: 11px 20px; border-radius: 999px;
  background: var(--lateral); color: #fff; font-size: 14px; box-shadow: var(--sombra-3);
}

/* ---------- 5. Listas, filtros y tarjetas ---------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px 14px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
}
.contenido .filtros { margin-bottom: 14px; }
.filtros label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--suave); }
.filtros label.marca { display: flex; font-size: 14px; color: var(--texto); }
.filtros select { width: auto; min-width: 130px; min-height: 38px; padding: 7px 10px; color: var(--texto); }
.filtros input { min-height: 38px; }
.buscador { flex: 1 1 260px; }
.filtro-pago { max-width: 300px; }
.conmutador { display: none; gap: 4px; margin-left: auto; padding: 3px; border-radius: 10px; background: var(--fondo); }
.acciones-catalogo { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--suave);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.chip:hover { color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--tarjeta); border-color: var(--borde); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-1); }
.chips .chip { border-color: var(--borde); background: var(--tarjeta); }
.chips .chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }

/* Tarjeta de un parte: el <li> es la tarjeta y lleva dentro el botón que abre la ficha y, debajo, las acciones rápidas.
   Clientes, técnicos y materiales usan la misma forma, pero su tarjeta es el propio botón. */
.aviso-boton {
  position: relative; display: grid; gap: 6px; width: 100%; padding: 16px 18px 16px 22px; text-align: left;
  background: var(--tarjeta); color: inherit;
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.aviso-boton::before, li.aviso:not(.chat)::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--borde-fuerte);
}
.aviso-boton:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }

li.aviso:not(.chat) {
  position: relative; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
  transition: border-color .12s, box-shadow .12s;
}
li.aviso:not(.chat):hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
li.aviso:not(.chat) > .aviso-boton { border: 0; background: none; box-shadow: none; border-radius: var(--radio); }
li.aviso:not(.chat) > .aviso-boton::before { content: none; }
li.aviso > .aviso-acciones { margin: 0; padding: 0 18px 16px 22px; }
li.aviso.urgencia-alta { border-color: var(--alta-borde); background: linear-gradient(90deg, var(--alta-fondo), var(--tarjeta) 55%); }
li.aviso.urgencia-alta::before { background: var(--alta); }
li.aviso.urgencia-media::before { background: #e6a23c; }
li.aviso.urgencia-baja::before { background: #3dac7a; }
li.aviso.cerrado { opacity: .68; }
li.aviso.cerrado:hover { opacity: 1; }

/* Clientes, técnicos y materiales: el nombre manda y el resto acompaña */
li:not(.aviso) > .aviso-boton .aviso-cabecera > strong { font-size: 16px; font-weight: 600; }
li:not(.aviso) > .aviso-boton .aviso-averia { font-size: 14.5px; font-weight: 400; }

/* «En curso»: se está trabajando en el aviso ahora mismo */
li.aviso.en-curso:not(.urgencia-alta) { background: linear-gradient(90deg, var(--curso-fondo), var(--tarjeta) 60%); border-color: var(--curso-borde); }
li.aviso.en-curso:not(.urgencia-alta)::before { background: var(--curso); }
.aviso-trabajando { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--curso-texto); }
.aviso-tecnico { font-size: 14px; color: var(--suave); }
.aviso-trabajando.en-pausa, .banner-curso.en-pausa { color: var(--suave); }
.en-pausa .punto { animation: none; opacity: .5; }
.banner-curso {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 10px;
  border: 1px solid var(--curso-borde); background: var(--curso-fondo); color: var(--curso-texto); font-weight: 600; font-size: 14px;
}

.aviso-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.aviso-cabecera .fecha { margin-left: auto; font-size: 13px; color: var(--suave); }
.aviso-averia { font-size: 16px; font-weight: 600; line-height: 1.35; }
.aviso-cliente { font-size: 14px; color: var(--texto); }
.aviso-alertas { font-size: 13.5px; font-weight: 600; color: var(--alta); }
.aviso-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.aviso-beneficio { font-size: 13.5px; font-weight: 500; color: var(--suave); }
.aviso-beneficio.perdida { color: var(--alta); font-weight: 600; }
.aviso-visita { font-size: 13.5px; font-weight: 600; color: var(--curso-texto); }
.aviso-visita .suave { font-weight: 400; }
.aviso-importe { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--media); font-weight: 600; font-size: 14px; }
.aviso-importe::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background-color: currentColor;
  -webkit-mask: var(--ico-alerta) center / contain no-repeat; mask: var(--ico-alerta) center / contain no-repeat;
}
.aviso-suave { padding: 9px 12px; border-radius: var(--radio-chico); background: var(--media-fondo); color: var(--media); font-size: 14px; }

/* Etiquetas: pastillas en minúsculas (nada de gritos en mayúsculas) */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: #e8edef; color: #3b4a50;
}
.badge.alta { background: var(--alta); color: #fff; }
.badge.media { background: var(--media-fondo); color: var(--media); }
.badge.baja { background: var(--baja-fondo); color: var(--baja); }
.badge.estado-en_curso { background: var(--curso); color: #fff; }
.badge.estado-finalizado { background: var(--baja-fondo); color: var(--baja); }
.badge.estado-borrador { background: var(--media-fondo); color: var(--media); border: 1px dashed #d9a441; }
.badge.estado-cancelado { background: #e8edef; color: #4b5a60; }
.badge.editado { background: #f1ebfb; color: #5b2a99; }
.badge.ia { background: #e3f4f7; color: #0c5a6a; }
.badge.ignorado, .badge.apagado { background: #e8edef; color: #4b5a60; }
.badge.ref { background: #eceffb; color: #353c9c; }
.badge.debe { margin-left: auto; background: var(--media-fondo); color: var(--media); }
.badge .punto { width: 7px; height: 7px; margin: 0 6px 0 0; }
li.aviso.borrador:not(.urgencia-alta) { background: #fffdf6; border: 1px dashed #d9a441; }
li.aviso.borrador:not(.urgencia-alta)::before { background: #e6a23c; }

.cliente.debe .aviso-boton::before { background: #e6a23c; }
.tecnico.inactivo .aviso-boton, .material.inactivo .aviso-boton { opacity: .6; }
.tecnico.en-curso .aviso-boton { background: linear-gradient(90deg, var(--curso-fondo), var(--tarjeta) 60%); border-color: var(--curso-borde); }
.tecnico.en-curso .aviso-boton::before { background: var(--curso); }
.periodos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.periodo-etiqueta { display: inline-block; flex: 1 1 auto; margin: 0 4px; text-align: center; font-weight: 600; }
.periodo-etiqueta::first-letter { text-transform: uppercase; }

/* Chats de WhatsApp */
.chat { display: grid; gap: 6px; padding: 14px 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta); box-shadow: var(--sombra-1); }
.chat .aviso-cabecera { padding: 0; }
.nota-privacidad { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--borde); border-left: 4px solid var(--marca); border-radius: var(--radio); background: var(--tarjeta); font-size: 14px; line-height: 1.55; }

/* Tarjetas de la ficha de un cliente o un técnico: los partes que tiene */
.parte-fila {
  position: relative; display: grid; gap: 8px; padding: 14px 18px 14px 22px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
}
.parte-fila::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--borde-fuerte); }
.parte-fila.urgencia-alta::before { background: var(--alta); }
.parte-fila.urgencia-media::before { background: #e6a23c; }
.parte-fila.urgencia-baja::before { background: #3dac7a; }
.parte-fila.cerrado { opacity: .72; }

.ficha { display: grid; gap: 16px; }
.ficha-identidad { display: grid; gap: 10px; }
.ficha > .ficha-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ficha > .ficha-cabecera h2 { font: 600 26px/1.2 var(--letra-titulo); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ficha h2:focus { outline: none; }

/* ---------- Cifras (Hoy, clientes, técnicos, resultados) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { display: grid; gap: 4px; align-content: start; padding: 16px 18px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.tile-titulo, .tile-nota { font-size: 13px; color: var(--suave); }
.tile-valor { font: 600 26px/1.15 var(--letra-titulo); letter-spacing: -.02em; }
.tile.ok .tile-valor { color: var(--baja); }
.tile.perdida { background: var(--alta-fondo); border-color: var(--alta-borde); }
.tile.perdida .tile-valor, .tile.perdida .tile-nota { color: var(--alta); }
.tile.debe { background: var(--media-fondo); border-color: var(--media-borde); }
.tile.debe .tile-valor { color: var(--media); }
.tile.alerta { background: var(--alta-fondo); border-color: var(--alta-borde); }
.tile.alerta .tile-valor { color: var(--alta); }
.tile.curso { background: var(--curso-fondo); border-color: var(--curso-borde); }
.tile.curso .tile-valor { color: var(--curso); }
.tiles-hoy { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tile-enlace { color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.tile-enlace:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }

/* ---------- 6. La ficha del parte: hoja a pantalla casi completa, cabecera de una fila y tres columnas ---------- */
.detalle {
  width: min(760px, 100%); max-width: calc(100% - 24px); max-height: calc(100% - 32px); overflow-y: auto;
  padding: 0; border: 0; border-radius: 16px; color: var(--texto); background: var(--tarjeta);
  box-shadow: var(--sombra-3);
}
.detalle::backdrop { background: rgba(10, 28, 33, .5); }
.detalle { scroll-padding-block: 24px 88px; } /* al enfocar un campo, que no quede tapado por la barra de Guardar */
.detalle-estrecho { width: min(540px, 100%); }
.detalle-contenido { display: grid; gap: 4px; padding: 24px 26px; }
.detalle-contenido > h2, .detalle-cabecera h2 { font: 600 21px/1.25 var(--letra-titulo); letter-spacing: -.01em; }
.detalle-cabecera { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 6px; }
.detalle-cabecera .badge { flex: none; }

.detalle-ficha {
  width: min(1680px, 100vw); max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0 0 0 auto; border-radius: 0; background: var(--fondo); overflow: hidden;
}
.detalle-ficha[open] { display: flex; flex-direction: column; animation: entra-lateral .22s cubic-bezier(.2, .8, .2, 1); }
.detalle-ficha[open]::backdrop { animation: entra-velo .22s ease-out; }
@keyframes entra-lateral { from { transform: translateX(40px); opacity: 0; } }
@keyframes entra-velo { from { opacity: 0; } }
.detalle-ficha .detalle-contenido { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; }
.detalle-ficha { scroll-padding-top: 16px; }

/* Arriba, UNA fila: qué parte es · estado · lo que se puede hacer ahora · Editar y Cerrar. (La cabecera y la barra son dos
   bloques porque en el móvil se separan; en escritorio se funden en la fila de .ficha-encabezado.) */
.ficha-encabezado {
  flex: none; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 0 18px;
  grid-template-areas: "titulo etiquetas acciones botones";
  min-height: var(--alto-cabecera-ficha); padding: 8px 20px;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.detalle-ficha .ficha-cabecera, .ficha-barra { display: contents; }
.ficha-titulo { grid-area: titulo; min-width: 0; display: grid; gap: 1px; }
.ficha-titulo h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 19px/1.25 var(--letra-titulo); letter-spacing: -.015em; }
.ficha-num { margin-right: 10px; color: var(--marca); }
.ficha-averia { color: var(--texto); }
.ficha-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--suave); }
.ficha-barra .etiquetas { grid-area: etiquetas; flex-wrap: nowrap; margin: 0; }
.ficha-acciones { grid-area: acciones; display: flex; gap: 8px; }
.ficha-acciones .boton { white-space: nowrap; }
.ficha-botones { grid-area: botones; display: flex; gap: 8px; }
/* Cerrar es solo el aspa (lleva su nombre en title y aria-label): así Editar y las acciones caben a 1280 px */
.ficha-botones .boton.i-cerrar { width: 38px; padding: 0; font-size: 0; }
.ficha-botones .boton.i-cerrar::before { --ico-tam: 18px; margin: 0; font-size: 16px; }

/* Los avisos importantes, en una fila (sin nada que avisar, no ocupa sitio) */
.ficha-avisos { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 20px 0; }
.ficha-avisos:not(:has(> :not([hidden]))) { display: none; }
.ficha-avisos > * { margin: 0; }
.ficha-avisos > :is(.banner-curso, .banner-borrador, .alertas, .error) { padding: 6px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; }

/* Tres columnas que caben en la pantalla; cada una se desplaza por su cuenta solo si el contenido no cabe */
.ficha-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 16px; padding: 14px 20px 16px;
}
.ficha-col {
  min-width: 0; min-height: 0; display: grid; align-content: start; gap: 12px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent;
  padding: 2px 6px 4px 2px; margin: -2px -6px -4px -2px; /* hueco para que el overflow no recorte la sombra de las tarjetas */
}

/* Cada parte de la ficha es una tarjeta con su título e icono */
.seccion {
  display: grid; gap: 12px; align-content: start; padding: 18px 20px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
}
.ficha-col .seccion { gap: 8px; padding: 12px 14px; }
.seccion h3, .res-seccion h3, .hoy-seccion h3 { display: flex; align-items: center; gap: 9px; font: 600 15px/1.3 var(--letra); color: var(--texto); }
.ficha-col .seccion h3 { gap: 8px; font-size: 14px; }
/* El icono solo sale en las secciones de la ficha del parte (cada una declara el suyo en --ico) */
:is(.sec-aviso, .sec-diagnostico, .sec-visita, .sec-seguimiento, .sec-fichajes, .sec-desglose, .sec-fotos, .sec-piezas, .sec-cliente, .sec-cobro, .sec-avisar, .sec-albaran) > h3::before {
  content: ""; flex: none; width: 17px; height: 17px; background-color: var(--marca);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.sec-aviso { order: 1; }
.sec-diagnostico { order: 2; }
.sec-visita { order: 3; }
.sec-seguimiento { order: 4; }
.sec-cliente { order: 5; }
.sec-cobro { order: 6; }
.sec-fichajes { order: 7; }
.sec-desglose { order: 8; }
.sec-fotos { order: 9; }
.sec-piezas { order: 10; }
.sec-albaran { order: 11; }
.sec-avisar { order: 6; }
.sec-aviso > h3 { --ico: var(--ico-chat); }
.sec-diagnostico > h3 { --ico: var(--ico-mas-info); }
.sec-visita > h3 { --ico: var(--ico-calendario); }
.sec-seguimiento > h3 { --ico: var(--ico-reloj); }
.sec-fichajes > h3 { --ico: var(--ico-reloj); }
.sec-desglose > h3 { --ico: var(--ico-resultados); }
.sec-fotos > h3 { --ico: var(--ico-foto); }
.sec-piezas > h3 { --ico: var(--ico-material); }
.sec-cliente > h3 { --ico: var(--ico-usuario); }
.sec-cobro > h3 { --ico: var(--ico-euro); }
.sec-albaran > h3 { --ico: var(--ico-documento); }
.sec-avisar > h3 { --ico: var(--ico-enviar); }
.seccion h4 { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--suave); }
.ficha-col .seccion h4 { margin-top: 2px; font-size: 12.5px; }

.alertas {
  padding: 11px 16px; border-radius: 10px; font-weight: 600; font-size: 14px;
  background: var(--alta-fondo); color: var(--alta); border: 1px solid var(--alta-borde);
}
.cita {
  margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--relleno);
  border-left: 3px solid var(--marca);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55;
}
.datos { display: grid; grid-template-columns: minmax(7.5em, max-content) 1fr; gap: 8px 18px; font-size: 14.5px; }
.ficha-col .datos { grid-template-columns: max-content 1fr; gap: 5px 12px; font-size: 14px; line-height: 1.4; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.vinetas { margin: 0; padding-left: 20px; }
.vinetas li + li { margin-top: 2px; }
.ficha-col .vinetas { font-size: 13.5px; line-height: 1.4; }
.anterior { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.banner-borrador {
  padding: 12px 16px; border: 1px dashed #d9a441; border-radius: 10px;
  background: #fffaf0; color: #7a4b00; font-size: 14px; font-weight: 500; line-height: 1.5;
}
.resumen-edicion { display: grid; gap: 2px; font-size: 13.5px; }
.ficha-col .resumen-edicion { gap: 1px; font-size: 12.5px; line-height: 1.35; }
.enlace-mapa { margin-left: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.enlace-mapa::before { --ico-tam: 14px; margin-inline-end: 3px; }

/* La conversación sobre la avería, en burbujas: el cliente a la izquierda y el técnico a la derecha */
.conversacion { display: grid; gap: 6px; }
.chat-aviso { list-style: none; margin: 0; padding: 0 2px 0 0; display: grid; gap: 6px; max-height: min(32vh, 300px); overflow-y: auto; scrollbar-width: thin; }
.burbuja { display: grid; gap: 1px; max-width: 90%; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 12px; font-size: 14px; line-height: 1.4; }
.burbuja.cliente { justify-self: start; background: var(--relleno); border-bottom-left-radius: 4px; }
.burbuja.tecnico { justify-self: end; background: var(--marca-clara); border-color: #b4dae2; border-bottom-right-radius: 4px; }
.burbuja-quien { font-size: 11.5px; font-weight: 600; color: var(--suave); }
.burbuja-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-omitidos { margin: 0; font-size: 12.5px; }

/* Plegables dentro de la ficha (trabajos anteriores del cliente, piezas instaladas antes) */
.plegable > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--marca); }
.plegable[open] > summary { margin-bottom: 8px; }
.plegable > .anterior + .anterior { margin-top: 6px; }

/* Barra «Otras acciones» al pie de la columna derecha: lo irreversible va aparte y en discreto */
.ficha-riesgo { display: grid; gap: 8px; padding: 10px 14px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); order: 11; }
.ficha-riesgo h3 { font-size: 13px; font-weight: 600; color: var(--suave); }
.ficha-riesgo .acciones { margin: 0; }

/* Cliente, técnico y cobro */
.cobro { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ficha-col .cobro { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.ficha-col .cobro > :is(.campo:first-child, .nota) { grid-column: 1 / -1; }
.cobro .campo { font-size: 13px; color: var(--suave); }
.cobro .campo input, .cobro .campo select { font-weight: 400; font-size: 15px; color: var(--texto); }
.ficha-col .cobro .campo { gap: 3px; font-size: 12.5px; }
.cobro .nota { font-size: 13px; }
.ficha-col .cobro .nota { font-size: 12.5px; }
.cobro.guardando { opacity: .6; }
.pago {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 8px 16px;
  border: 1px solid; border-radius: 999px; font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: filter .12s;
}
.ficha-col .pago { min-height: 40px; padding: 6px 10px; font-size: 13.5px; }
.pago:hover { filter: brightness(.96); }
.pago.pendiente { background: var(--media-fondo); border-color: var(--media-borde); color: var(--media); }
.pago.pagado { background: var(--baja-fondo); border-color: #a8dcc0; color: var(--baja); }
.seccion .acciones .boton { flex: 1 1 auto; }
.ficha-col .cliente-resumen { margin: 0; font-size: 12.5px; }
.ficha-col .acciones-fila { flex-wrap: nowrap; margin-top: 8px; }
.ficha-col .acciones-fila .boton { flex: 1 1 0; padding-inline: 8px; white-space: nowrap; }
.ficha-col .acciones-fila .boton::before { --ico-tam: 14px; margin-inline-end: 4px; }

/* La visita acordada */
.visita-fecha { margin: 0; font: 600 18px/1.3 var(--letra-titulo); letter-spacing: -.01em; }
.ficha-col .visita-fecha { font-size: 16px; }
.visita-fecha::first-letter { text-transform: uppercase; }
.calendario-ok { margin: 0; color: var(--baja); font-weight: 600; font-size: 14px; }
.ficha-col :is(.nota, .suave, .calendario-ok, .error) { font-size: 12.5px; line-height: 1.4; }
.ficha-col .seccion p { margin: 0; }

/* ---------- 7. Desglose, fotos, albarán, piezas ---------- */
.desglose { display: grid; gap: 12px; }
.lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.linea { display: grid; gap: 4px; padding: 11px 14px; border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--tarjeta); }
.linea.tipo-material { border-left-color: #6366f1; }
.linea.tipo-mano_obra { border-left-color: #0d9488; }
.linea.tipo-desplazamiento { border-left-color: #d97706; }
.linea-principal { display: flex; align-items: baseline; gap: 10px; }
.linea-titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.linea-importe { flex: none; font-weight: 600; }
.linea-detalle { font-size: 13.5px; color: var(--suave); }
.linea .acciones { margin-top: 2px; }
.panel-anadir { display: grid; gap: 12px; padding: 14px 16px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--relleno); }
.panel-anadir h4 { margin: 0; color: var(--texto); }
.resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 280px; overflow-y: auto; }
.resultado { display: grid; gap: 2px; width: 100%; padding: 9px 12px; text-align: left; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-chico); color: inherit; cursor: pointer; }
.resultado:hover, .resultado.activo { border-color: var(--marca); background: var(--marca-clara); }
.resultado-linea { display: flex; justify-content: space-between; gap: 10px; }
.resultado-precio { flex: none; font-weight: 600; }
.elegido { padding: 9px 12px; border-radius: var(--radio-chico); background: var(--marca-clara); border: 1px solid #b4dae2; }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Buscador de materiales: el campo y la cantidad no se mueven (van encima de las líneas) y la lista tiene altura fija */
.selector { display: grid; gap: 8px; }
.selector-fila { display: flex; align-items: center; gap: 8px; }
.selector-fila input[type="search"] { flex: 1 1 auto; min-width: 0; }
.selector-cantidad { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--suave); }
.selector-cantidad input { width: 64px; text-align: center; }
.selector-sugeridos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); }
.selector-sugeridos .chip { padding: 3px 10px; border-color: var(--borde); background: var(--tarjeta); font-size: 12.5px; }
.selector-cuerpo { display: grid; gap: 6px; }
.selector-estado { margin: 0; min-height: 1.4em; font-size: 12.5px; line-height: 1.4; }
.selector-estado.ok { color: var(--baja); font-weight: 600; }
.selector .resultados { height: var(--alto-resultados, 212px); max-height: none; align-content: start; }
.selector .resultado { padding: 7px 10px; gap: 1px; }
.selector .resultado .suave { font-size: 12.5px; }
.resultado-en-parte { flex: none; font-weight: 600; color: var(--marca-oscura); }
.resultado-en-parte:empty { display: none; }
.selector .acciones { justify-content: flex-start; }
.ficha-col .selector { --alto-resultados: 172px; }

/* Material apuntado en el cierre: título e importe, cantidad con − / +, y las acciones a la derecha */
.fila-material { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 14px; }
.fila-material > .acciones { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; margin: 0; }
.fila-material > .acciones .boton { flex: none; }

/* Cantidad de una línea con − y + */
.cantidad-control { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; vertical-align: middle; color: var(--texto); }
.cantidad-control input { width: 3.8em; min-height: 28px; padding: 2px 4px; text-align: center; font-size: 13.5px; font-weight: 600; }
.paso-cantidad {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--borde-fuerte);
  border-radius: 7px; background: var(--tarjeta); color: var(--texto); font-size: 16px; line-height: 1; cursor: pointer;
}
.paso-cantidad:hover:not(:disabled) { border-color: var(--marca); background: var(--marca-clara); }
.paso-cantidad:disabled { opacity: .4; cursor: not-allowed; }
.boton[aria-pressed="true"] { background: var(--marca-clara); border-color: var(--marca); color: var(--marca-oscura); font-weight: 600; }
.margen-previo { font-weight: 600; }

.totales { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--relleno); }
.total-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.total-fila select { width: auto; min-height: 32px; padding: 3px 8px; margin-left: 6px; }
.total-fila.grande { padding-top: 8px; border-top: 1px solid var(--borde); font: 600 20px/1.3 var(--letra-titulo); }
.total-interno { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--borde-fuerte); }
.total-interno .titulo, .por-tecnico .titulo { font-size: 12.5px; font-weight: 600; color: var(--suave); }
.margen { font-weight: 600; color: var(--baja); }
.margen.negativo { color: var(--alta); }
.por-tecnico { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde-fuerte); }
.por-tecnico-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.por-tecnico-fila { display: flex; align-items: baseline; gap: 4px; }
.por-tecnico-fila strong { margin-left: auto; }

.fotos-grupo { display: grid; gap: 8px; }
.fotos-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.miniatura { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--borde); border-radius: 10px; background: #e8edef; cursor: pointer; }
.miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { border-color: var(--marca); }
.miniatura-origen { position: absolute; left: 6px; bottom: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(10, 28, 33, .7); color: #fff; font-size: 11.5px; }
.visor { width: min(920px, 100%); }
.visor-img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: var(--radio-chico); background: #e8edef; }

.albaran { display: grid; gap: 10px; }

/* Dentro de la ficha todo se hace más compacto para que quepa sin desplazarse */
.ficha-col .desglose { gap: 8px; }
.ficha-col .lineas { gap: 6px; }
.sec-desglose .linea { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 10px; padding: 7px 10px; }
.sec-desglose .linea > :only-child { grid-column: 1 / -1; }
.sec-desglose .linea-principal, .sec-desglose .linea-detalle { grid-column: 1; }
.sec-desglose .linea .acciones { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-wrap: nowrap; margin: 0; }
.sec-desglose .linea .acciones .boton { flex: none; }
.ficha-col .linea-detalle { font-size: 12.5px; }
.ficha-col .totales { gap: 4px; padding: 10px 12px; font-size: 13.5px; }
.ficha-col .total-fila.grande { padding-top: 6px; font-size: 17px; }
.ficha-col .total-interno { margin-top: 4px; padding-top: 6px; }
.ficha-col .panel-anadir { padding: 10px 12px; gap: 8px; }
.sec-fotos .desglose .desglose { grid-template-columns: 1fr 1fr; align-items: start; gap: 10px; }
.sec-fotos .fotos-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; }
.sec-fotos .miniatura { border-radius: 7px; }
.sec-fotos .miniatura-origen { display: none; }
.ficha-col .fotos-grupo { gap: 6px; }
.ficha-col .fotos-grupo h4 { margin: 0; }
.ficha-col .fotos-grupo .acciones { margin: 0; }
.ficha-col .albaran { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.ficha-col .albaran > :is(.nota, .acciones, .error) { grid-column: 1 / -1; }
.ficha-col .albaran .chk { font-size: 13.5px; }
.ficha-col .albaran .nota { font-size: 12px; line-height: 1.35; }

.piezas-panel { display: grid; gap: 10px; }
.piezas-panel input[type="search"] { max-width: 420px; }
.piezas-grupo { display: grid; gap: 6px; margin-bottom: 8px; }
.piezas-grupo h4 { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--suave); }
.piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pieza { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--relleno); font-size: 14px; }
.pieza-datos { font-weight: 600; color: var(--marca-oscura); }
.pieza .suave { font-size: 13px; }
.linea-titulo .pieza-datos { font-size: 13px; }

/* Materiales (catálogo) */
.grupo + .grupo { margin-top: 24px; }
.grupo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borde); font: 600 17px/1.3 var(--letra-titulo); }
.grupo-cuenta { font: 400 13px/1.3 var(--letra); color: var(--suave); }
.material-precios { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.material-precios strong { font-weight: 600; }

/* ---------- 8. Pantallas ---------- */
/* Hoy */
.hoy-seccion, .res-seccion { display: grid; gap: 10px; margin-top: 28px; }
.hoy-seccion h3, .res-seccion h3 { font: 600 17px/1.3 var(--letra-titulo); letter-spacing: -.01em; }
.hoy-dia { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--suave); }
.visita-fila {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 18px 12px 22px; text-align: left;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
  color: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.visita-fila::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--borde-fuerte); }
.visita-fila:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.visita-fila.urgencia-alta { background: linear-gradient(90deg, var(--alta-fondo), var(--tarjeta) 55%); border-color: var(--alta-borde); }
.visita-fila.urgencia-alta::before { background: var(--alta); }
.visita-fila.urgencia-media::before { background: #e6a23c; }
.visita-fila.urgencia-baja::before { background: #3dac7a; }
.visita-hora { flex: none; min-width: 3.2em; font: 600 19px/1.2 var(--letra-titulo); }
.visita-texto { display: grid; gap: 2px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.enlace-atender {
  position: relative; display: block; padding: 14px 18px 14px 22px; font-weight: 600; color: inherit;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
}
.enlace-atender::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: #e6a23c; }
.enlace-atender:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }

/* Más */
.menu-mas { max-width: 560px; }
.enlace-mas {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 1px 16px;
  width: 100%; min-height: 64px; padding: 14px 18px; text-align: left; color: inherit; font-size: 15px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1);
  cursor: pointer;
}
.enlace-mas:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.enlace-mas::before { grid-row: 1 / span 2; width: 24px; height: 24px; margin: 0; color: var(--marca); --ico-tam: 24px; }
.enlace-mas strong { font-weight: 600; }
.enlace-mas .suave { font-size: 13.5px; }
.solo-movil { display: none; }

/* Resultados */
.resultados-selector { display: grid; gap: 10px; margin-bottom: 16px; }
.resultados-contenido { display: grid; gap: 4px; }
.resultados-contenido.cargando { opacity: .5; transition: opacity .15s; }
.resultados-contenido > .nota { margin-top: 20px; font-size: 13.5px; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.barra-fila { display: grid; grid-template-columns: minmax(120px, 30%) 1fr minmax(6.5em, auto); align-items: center; gap: 4px 14px; }
.barra-etiqueta { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.barra-nombre { color: inherit; font-weight: 600; text-decoration: none; }
a.barra-nombre:hover { text-decoration: underline; }
.barra-dibujo { display: block; width: 100%; height: 20px; background: var(--fondo); border-radius: 5px; }
.barra-pos { fill: var(--baja); }
.barra-neg { fill: var(--alta); }
.barra-eje { stroke: var(--suave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.barra-cifra { text-align: right; white-space: nowrap; }
.res-parte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 12px 18px;
  text-align: left; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); color: inherit; cursor: pointer;
}
.res-parte:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.res-parte-texto { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.res-parte-margen { flex: none; font: 600 18px/1.2 var(--letra-titulo); }

/* Partes en tabla (escritorio) */
.tabla-caja { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla th { position: sticky; top: 0; background: var(--relleno); font-size: 12.5px; font-weight: 600; color: var(--suave); white-space: nowrap; }
.tabla th[aria-sort] { color: var(--marca); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla tbody tr { cursor: pointer; transition: background-color .1s; }
.tabla tbody tr:hover { background: var(--relleno); }
.tabla tr.urgencia-alta { background: var(--alta-fondo); }
.tabla tr.urgencia-alta:hover { background: #fde8e6; }
.tabla tr td:first-child { box-shadow: inset 4px 0 0 var(--borde-fuerte); }
.tabla tr.urgencia-alta td:first-child { box-shadow: inset 4px 0 0 var(--alta); }
.tabla tr.urgencia-media td:first-child { box-shadow: inset 4px 0 0 #e6a23c; }
.tabla tr.urgencia-baja td:first-child { box-shadow: inset 4px 0 0 #3dac7a; }
.tabla tr.cerrado { color: var(--suave); }
.tabla-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.tabla-orden { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.tabla-orden:hover { color: var(--texto); }
.tabla-flecha { font-size: 10px; }
.tabla-abrir { display: grid; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.col-cliente { min-width: 220px; }
.cobro-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--borde); font-size: 12.5px; font-weight: 600; }
.cobro-chip.pendiente { background: var(--media-fondo); border-color: var(--media-borde); color: var(--media); }
.cobro-chip.pagado { background: var(--baja-fondo); border-color: #a8dcc0; color: var(--baja); }

/* ---------- 8b. Calendario: mes, semana y lista, con los avisos sin fecha al lado ---------- */
.contenido-ancho { max-width: 1480px; }

.cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 6px; }
.cal-navegacion { display: flex; gap: 6px; }
.cal-navegacion .boton { min-height: 38px; }
.cal-navegacion .boton.i-solo { width: 38px; padding: 0; }
.cal-titulo { margin-right: auto; min-width: 190px; font: 600 20px/1.2 var(--letra-titulo); letter-spacing: -.01em; }
.cal-vistas { display: flex; margin-left: 0; }
.cal-tecnico { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--suave); }
.cal-tecnico select { width: auto; min-width: 140px; min-height: 38px; padding: 7px 10px; color: var(--texto); }
.cal-resumen-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 4px 0 14px; }
.cal-resumen-fila .resumen { margin: 0; }
.cal-enlace { padding: 0; border: 0; background: none; color: var(--marca); font-size: 14px; font-weight: 600; cursor: pointer; }
.cal-enlace:hover { text-decoration: underline; }

.cal-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cal-contenido { min-width: 0; }
.cal-lateral { position: sticky; top: 76px; display: grid; gap: 14px; align-content: start; max-height: calc(100dvh - 92px); overflow-y: auto; }
.cal-panel { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.cal-lateral-titulo, .cal-agenda-titulo { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--letra-titulo); }
.cal-contador { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--fondo); color: var(--suave); font: 600 12px/22px var(--letra); text-align: center; }
.cal-hoy-marca { padding: 1px 8px; border-radius: 999px; background: var(--marca); color: #fff; font-size: 11.5px; font-weight: 600; }
.cal-vacio { font-size: 13.5px; color: var(--suave); }
.cal-nota { font-size: 13px; color: var(--suave); }

/* Colores: la urgencia pinta el borde; el estado cambia el fondo. Todo sale de estas dos variables. */
.cal-u-alta { --cal-color: var(--alta); --cal-fondo: var(--alta-fondo); }
.cal-u-media { --cal-color: #e6a23c; --cal-fondo: var(--media-fondo); }
.cal-u-baja { --cal-color: #3dac7a; --cal-fondo: var(--baja-fondo); }

/* Mes */
.cal-mes { overflow: hidden; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.cal-dias-semana, .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dias-semana { border-bottom: 1px solid var(--borde); background: var(--relleno); }
.cal-dias-semana span { padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.cal-celda { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 112px; padding: 6px 6px 8px; border-top: 1px solid var(--borde); border-right: 1px solid var(--borde); }
.cal-celda:nth-child(7n) { border-right: 0; }
.cal-celda:nth-child(-n + 7) { border-top: 0; }
.cal-celda.finde { background: #fafbfb; }
.cal-celda.fuera { background: var(--relleno); }
.cal-celda.fuera .cal-num { color: #8697a0; }
.cal-celda.elegido { background: var(--marca-clara); box-shadow: inset 0 0 0 2px var(--marca); }
.cal-celda.urgente::after { content: ""; position: absolute; top: 11px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--alta); }
.cal-num {
  align-self: flex-start; min-width: 26px; height: 26px; padding: 0 7px; border: 0; border-radius: 13px;
  background: none; color: var(--texto); font-size: 13px; font-weight: 600; cursor: pointer;
}
.cal-num:hover { background: var(--fondo); }
.cal-celda.hoy .cal-num { background: var(--marca); color: #fff; }
.cal-chips { display: grid; gap: 3px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.cal-chips li { min-width: 0; }
.cal-chip {
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 2px 6px 2px 6px;
  border: 0; border-left: 3px solid var(--cal-color); border-radius: 4px; background: var(--cal-fondo);
  color: var(--texto); font-size: 12px; line-height: 1.5; text-align: left; cursor: pointer;
}
.cal-chip:hover { box-shadow: 0 0 0 1px var(--cal-color); }
.cal-chip-hora { flex: none; font-weight: 600; }
.cal-chip-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip { position: relative; overflow: hidden; }
.cal-chip.alerta::after { content: ""; position: absolute; top: 0; right: 0; border-top: 9px solid var(--alta); border-left: 9px solid transparent; }
.cal-chip.cal-e-borrador { background: #fffdf6; outline: 1px dashed #d9a441; outline-offset: -1px; }
.cal-chip.cal-e-en_curso { background: var(--curso-fondo); }
.cal-chip.cal-e-finalizado { opacity: .6; }
.cal-mas { padding: 1px 6px; border: 0; background: none; color: var(--marca); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.cal-mas:hover { text-decoration: underline; }
.cal-puntos { display: none; }

/* Tarjeta de una visita (día elegido, semana, lista y avisos sin fecha) */
.cal-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cal-visita {
  position: relative; display: grid; gap: 3px; width: 100%; padding: 9px 12px 9px 15px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--tarjeta);
  color: var(--texto); text-align: left; box-shadow: var(--sombra-1); cursor: pointer;
}
.cal-visita::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cal-color); }
.cal-visita:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.cal-visita.cal-u-alta:not(.cal-e-finalizado) { background: linear-gradient(90deg, var(--alta-fondo), var(--tarjeta) 55%); border-color: var(--alta-borde); }
.cal-visita.cal-e-en_curso:not(.cal-u-alta) { background: linear-gradient(90deg, var(--curso-fondo), var(--tarjeta) 60%); border-color: var(--curso-borde); }
.cal-visita.cal-e-borrador:not(.cal-u-alta) { background: #fffdf6; border: 1px dashed #d9a441; }
.cal-visita.cal-e-finalizado { opacity: .7; }
.cal-visita-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cal-hora { margin-right: 2px; font: 600 15px/1.2 var(--letra-titulo); }
.cal-cliente { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.cal-visita:not(.compacta) .cal-cliente { flex: 1 1 110px; min-width: 0; }
.cal-averia { font-size: 13.5px; overflow-wrap: anywhere; }
.cal-visita.compacta .cal-averia { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; }
.cal-lugar { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--suave); --ico-tam: 14px; }
.cal-visita-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin-top: 2px; font-size: 12.5px; color: var(--suave); }
.cal-tecnico { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; --ico-tam: 13px; }
.cal-marca { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; --ico-tam: 13px; }
.cal-marca.alerta { color: var(--alta); }
.cal-marca.sin-tecnico { color: var(--media); }
.cal-marca.suave { font-weight: 500; color: var(--suave); }

/* Semana */
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.cal-columna { display: grid; gap: 8px; align-content: start; min-width: 0; min-height: 240px; padding: 8px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.cal-columna.finde { background: #fafbfb; }
.cal-columna.hoy { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.cal-columna.elegido:not(.hoy) { border-color: var(--borde-fuerte); background: var(--marca-clara); }
.cal-columna-titulo { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.cal-columna-dia { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px; border: 0; border-radius: 6px; background: none; color: var(--texto); cursor: pointer; }
.cal-columna-dia:hover { background: var(--fondo); }
.cal-columna-nombre { font-size: 13px; font-weight: 500; color: var(--suave); }
.cal-columna-numero { font: 600 20px/1 var(--letra-titulo); }
.cal-columna.hoy .cal-columna-numero { color: var(--marca); }
.cal-columna .cal-vacio { padding: 2px 4px; font-size: 13px; }

/* Lista */
.cal-agenda { display: grid; gap: 20px; }
.cal-agenda-dia { display: grid; gap: 10px; }
.cal-agenda-titulo { padding-bottom: 6px; border-bottom: 1px solid var(--borde); }
.cal-agenda-dia.hoy .cal-agenda-titulo { border-bottom-color: var(--marca); }
.cal-agenda .cal-lista { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }

/* Leyenda */
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--suave); }
.cal-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.cal-muestra { width: 16px; height: 14px; border-left: 4px solid var(--cal-color, var(--borde-fuerte)); border-radius: 3px; background: var(--cal-fondo, var(--tarjeta)); }
.cal-muestra.cal-e-borrador { border: 1px dashed #d9a441; background: #fffdf6; }
.cal-muestra.cal-e-finalizado { border: 1px solid var(--borde-fuerte); background: var(--relleno); opacity: .7; }
.cal-muestra.cal-alerta { position: relative; overflow: hidden; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); }
.cal-muestra.cal-alerta::after { content: ""; position: absolute; top: 0; right: 0; border-top: 8px solid var(--alta); border-left: 8px solid transparent; }

/* La semana y el mes no dejan sitio a un lateral: los avisos sin fecha pasan debajo */
.cal-cuerpo.cal-vista-semana { grid-template-columns: minmax(0, 1fr); }
.cal-cuerpo.cal-vista-semana .cal-lateral { position: static; max-height: none; overflow: visible; }
.cal-cuerpo.cal-vista-semana #cal-sinfecha .cal-lista { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }

@media (max-width: 1099px) {
  .cal-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cal-lateral { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cal-semana { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .cal-columna { min-height: 0; }
}

/* ---------- 9. Formularios, diálogos y cierre en tres pasos ---------- */
.formulario-parte .subtitulo { margin-top: 10px; font: 600 15px/1.3 var(--letra); color: var(--texto); }
.formulario-parte .fila-campos { align-items: start; }
.marca-fijado { padding: 0 8px; border-radius: 999px; background: #f1ebfb; color: #5b2a99; font-size: 12px; font-weight: 600; }
.devolver-ia { display: grid; gap: 6px; margin: 4px 0 0; padding: 12px 16px; border: 1px solid var(--borde); border-radius: var(--radio); }
.devolver-ia legend { padding: 0 6px; font-weight: 600; }
.original { padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--relleno); }
.original summary { cursor: pointer; font-weight: 600; color: var(--suave); }
.original .chat-aviso { max-height: 260px; margin-top: 8px; }

/* Guardar y Cancelar quedan pegados abajo mientras se desplaza el formulario */
.barra-guardar {
  position: sticky; bottom: 0; z-index: 2; margin: 10px -26px -24px;
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  background: var(--tarjeta); border-top: 1px solid var(--borde);
}

/* Segundo nivel del editor: plegado */
.mas-datos { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--relleno); }
.mas-datos > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 10px 16px; font-weight: 600; cursor: pointer; }
.mas-datos[open] > summary { border-bottom: 1px solid var(--borde); }
.mas-datos-cuerpo { display: grid; gap: 14px; padding: 16px; }

/* Cierre del trabajo: los tres pasos */
.pasos { display: flex; gap: 8px; margin: 12px 0 6px; padding: 0; list-style: none; }
.pasos li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 4px; font-size: 13.5px; color: var(--suave); border-bottom: 3px solid var(--borde); }
.pasos li.actual { color: var(--texto); font-weight: 600; border-bottom-color: var(--marca); }
.pasos li.hecho { border-bottom-color: #3dac7a; }
.paso-num { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--borde); color: var(--texto); font-size: 12px; font-weight: 700; }
.paso-num::before { --ico-tam: 13px; }
.pasos li.actual .paso-num { background: var(--marca); color: #fff; }
.pasos li.hecho .paso-num { background: #3dac7a; color: #fff; }
.paso-cuerpo { display: grid; gap: 14px; margin-top: 8px; }
.paso-extras { display: grid; gap: 8px; }
.paso-extras h5, .ya-anotado h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--suave); }
.lista-simple { margin: 4px 0 0; padding-left: 18px; }
.lista-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fila-linea { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta); }
.fila-linea.enviada { background: var(--baja-fondo); border-color: #a8dcc0; }
.resumen-cierre { display: grid; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--borde); }

/* ---------- Tableta: el menú lateral se queda en iconos ---------- */
@media (min-width: 701px) and (max-width: 1023px) {
  :root { --ancho-lateral: 72px; }
  .barra { padding: 16px 10px; align-items: stretch; }
  div.marca { justify-content: center; padding: 4px 0 18px; }
  .marca-texto, .pestana-texto { display: none; }
  .pestana { justify-content: center; padding: 8px; }
  .pestana.activa::after { left: -10px; }
  .boton-barra { justify-content: center; padding: 8px; }
  .boton-barra::before { margin-inline-end: 0; }
  .herramientas, .estado-wa, .contenido { padding-left: 24px; padding-right: 24px; }
  #lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- Ficha en tres columnas pero con poco sitio: más apretada, para que quepa sin desplazarse ---------- */
@media (min-width: 1100px) and (max-width: 1459px) {
  .ficha-encabezado { gap: 0 12px; padding-inline: 16px; }
  .ficha-barra .etiquetas .badge:is(.ia, .editado) { display: none; } /* lo dice la sección «Diagnóstico probable» */
  .ficha-acciones { gap: 6px; }
  .ficha-acciones .boton { padding-inline: 12px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .ficha-cuerpo { gap: 12px; padding: 10px 16px 12px; }
  .ficha-col { gap: 8px; }
  .ficha-col .seccion { gap: 6px; padding: 10px 12px; }
  .chat-aviso { max-height: 22vh; }
  .ficha-col textarea { height: 60px; }
}

/* ---------- Ficha en pantallas que no dan para tres columnas: dos columnas y la hoja entera se desplaza ---------- */
@media (max-width: 1099px) {
  .detalle-ficha { width: 100%; }
  .detalle-ficha[open] { display: block; overflow-y: auto; }
  .detalle-ficha .detalle-contenido { display: block; }
  .ficha-encabezado {
    position: sticky; top: 0;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo botones" "etiquetas acciones";
    gap: 8px 14px; padding: 10px 16px;
  }
  .ficha-barra .etiquetas { flex-wrap: wrap; }
  .ficha-acciones { flex-wrap: wrap; justify-content: flex-end; }
  .ficha-avisos { padding: 10px 16px 0; }
  .ficha-cuerpo {
    overflow: visible; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; align-items: start;
    grid-template-areas: "aviso trabajo" "aviso gestion"; padding: 14px 16px 24px;
  }
  .col-aviso { grid-area: aviso; }
  .col-trabajo { grid-area: trabajo; }
  .col-gestion { grid-area: gestion; }
  .ficha-col { overflow: visible; padding: 0; margin: 0; }
}

/* ---------- Ficha en una sola columna (tableta vertical y móvil) ---------- */
@media (max-width: 899px) {
  .ficha-cuerpo { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .ficha-col { display: contents; }
}
@media (min-width: 900px) { .conmutador { display: flex; } }

/* ---------- 10. Móvil: navegación fija abajo, ficha a pantalla completa, una sola columna ---------- */
@media (max-width: 700px) {
  body { font-size: 15px; }
  .app { display: block; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .barra { position: static; display: block; height: auto; padding: 0; background: none; overflow: visible; }
  .barra div.marca, .barra-pie { display: none; }
  .pestanas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--tarjeta); border-top: 1px solid var(--borde); box-shadow: 0 -4px 16px rgba(15, 38, 45, .08);
  }
  .pestana {
    flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 0;
    border-radius: 0; color: var(--suave); font-size: 11px; font-weight: 500; letter-spacing: -.01em; text-align: center;
  }
  .pestana:hover { background: none; color: var(--texto); }
  .pestana.activa { background: none; color: var(--marca); font-weight: 600; }
  .pestana.activa::after { left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--marca); }
  .pestana-icono { --ico-tam: 22px; }

  .herramientas { padding: 10px 16px; justify-content: space-between; min-height: 56px; }
  .herramientas-marca { display: flex; }
  .herramientas-marca .marca-logo { width: 32px; height: 32px; border-radius: 9px; --ico-tam: 18px; }
  .estado-wa { padding: 12px 16px 0; }
  .contenido { padding: 18px 16px 24px; }
  .titulo-pantalla { margin-bottom: 14px; font-size: 23px; }
  .filtros { padding: 12px; gap: 10px; }
  .filtros label { flex: 1 1 140px; }
  .filtros select { width: 100%; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .solo-movil { display: list-item; }

  .aviso-nuevo {
    position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 7;
    min-height: 48px; padding: 12px 20px; border-radius: 999px; box-shadow: 0 6px 18px rgba(15, 38, 45, .35);
  }
  .contenido { padding-bottom: 88px; } /* que el botón flotante no tape lo último de la lista */

  .tiles { grid-template-columns: 1fr; }
  .tiles-hoy { grid-template-columns: repeat(2, 1fr); }
  .tiles-hoy .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { padding: 14px; }
  .tile-valor { font-size: 23px; }
  .boton { min-height: 44px; padding: 10px 16px; }
  .boton.chico { min-height: 36px; padding: 6px 12px; }
  .acciones-catalogo { margin-left: 0; width: 100%; }
  .acciones-catalogo .boton { flex: 1 1 100%; }
  .fila-campos.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario-parte .fila-campos, .formulario-fichaje .fila-campos { grid-template-columns: 1fr; }
  .formulario-pin { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dt { margin-top: 8px; font-size: 13px; }
  .barra-fila { grid-template-columns: 1fr auto; }
  .barra-dibujo { grid-column: 1 / -1; grid-row: 2; }
  .visor-img { max-height: 60vh; }
  .paso-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pasos li:not(.actual) .paso-nombre { display: none; }

  /* Diálogos a pantalla completa */
  .detalle { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .detalle-contenido { padding: 18px 16px; }
  .barra-guardar { margin: 10px -16px -18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .detalle-ficha { width: 100%; animation-name: none; }
  .detalle-ficha[open] { animation: entra-abajo .22s cubic-bezier(.2, .8, .2, 1); }
  @keyframes entra-abajo { from { transform: translateY(24px); opacity: 0; } }

  /* La ficha: una columna, en el orden en que se lee un parte */
  :root { --alto-cabecera-ficha: 64px; }
  .ficha-encabezado { display: block; position: static; padding: 0; min-height: 0; background: none; border-bottom: 0; }
  .detalle-ficha .ficha-cabecera {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: var(--alto-cabecera-ficha); padding: 0 16px; background: var(--tarjeta); border-bottom: 1px solid var(--borde);
  }
  .ficha-titulo h2 { font-size: 18px; }
  .ficha-meta { display: none; }
  /* Editar y Cerrar se quedan en el icono (llevan su nombre en title y aria-label) para que el título del parte respire */
  .ficha-botones { gap: 6px; }
  .ficha-botones .boton { width: 44px; min-height: 44px; padding: 0; font-size: 0; }
  .ficha-botones .boton::before { --ico-tam: 20px; margin: 0; font-size: 16px; }
  .ficha-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; background: var(--fondo); border-bottom: 1px solid var(--borde); }
  .ficha-acciones { justify-content: stretch; width: 100%; }
  .ficha-acciones .boton { flex: 1 1 auto; }
  .ficha-avisos { padding: 12px 16px 0; }
  .ficha-cuerpo { gap: 14px; padding: 14px 16px 40px; }
  .ficha-cuerpo .seccion, .ficha-cuerpo .ficha-riesgo { padding: 16px; }
  .chat-aviso { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  .punto { animation: none; }
  .dictado-estado.grabando-texto::before { animation: none; }
  .detalle-ficha[open], .detalle-ficha[open]::backdrop { animation: none; }
  * { transition: none !important; }
}

/* ---------- Calendario en el móvil: el mes son puntos (el nombre no cabe) y el día elegido se lee debajo ---------- */
@media (max-width: 700px) {
  .cal-titulo { flex: 1 1 140px; min-width: 0; margin-right: 0; font-size: 18px; }
  .cal-vistas { flex: 1 1 100%; justify-content: space-between; }
  .cal-vistas .chip { flex: 1 1 0; }
  .cal-tecnico { flex: 1 1 100%; }
  .cal-tecnico select { flex: 1 1 auto; width: 100%; }
  .cal-dias-semana span { padding: 6px 0; font-size: 11.5px; text-align: center; }
  .cal-celda { align-items: center; gap: 3px; min-height: 56px; padding: 4px 1px 6px; }
  .cal-celda.urgente::after { display: none; }
  .cal-num { align-self: center; padding: 0 5px; font-size: 13px; }
  .cal-num::after { content: ""; position: absolute; inset: 0; }
  .cal-chips { display: none; }
  .cal-puntos { display: flex; justify-content: center; gap: 3px; min-height: 7px; }
  .cal-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--cal-color); }
  .cal-punto.cal-e-borrador { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cal-color); }
  .cal-punto.cal-e-finalizado { opacity: .45; }
  .cal-lateral { grid-template-columns: minmax(0, 1fr); }
  .cal-agenda .cal-lista { grid-template-columns: minmax(0, 1fr); }
  .cal-leyenda { gap: 6px 14px; }
}

/* En el móvil el título de una línea de material no se queda en una columna estrecha: Editar y Quitar pasan debajo */
@media (max-width: 700px) {
  .sec-desglose .linea, .fila-material { grid-template-columns: minmax(0, 1fr); }
  .sec-desglose .linea .acciones, .fila-material > .acciones { grid-column: 1; grid-row: auto; justify-content: flex-end; margin-top: 2px; }
}

/* ---------- Estado del sistema (Más → Estado del sistema) ---------- */
.sistema-bloque { padding: 4px 18px 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.sistema-bloque h3 { padding-top: 14px; }
.sistema-datos { margin: 0; }
.sistema-fila { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--borde); font-size: 14.5px; }
.sistema-fila:first-child { border-top: 0; }
.sistema-fila dt { margin: 0; }
.sistema-valor { display: flex; align-items: baseline; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.sistema-valor .punto-estado { align-self: center; }
.sistema-todo-bien { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sistema-bloque .nota { font-size: 13.5px; }
@media (max-width: 700px) {
  .sistema-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Importar tarifa (Materiales y tarifas → Importar tarifa) ---------- */
#dialogo-importar { width: min(720px, 100%); }
.importar-archivo { overflow-wrap: anywhere; font-size: 13.5px; }
.importar-resumen { margin: 2px 0 6px; }
.importar-columnas { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta); padding: 10px 14px; }
.importar-columnas summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.importar-columnas[open] summary { margin-bottom: 12px; }
.importar-mapeo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.importar-lista { gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.importar-fila { display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--borde); border-left-width: 4px; border-radius: 10px; background: var(--tarjeta); font-size: 14px; }
.importar-nuevo { border-left-color: var(--baja); }
.importar-cambia { border-left-color: var(--curso); }
.importar-error { border-left-color: var(--alta); background: var(--alta-fondo); }
.importar-fila .aviso-cabecera strong { overflow-wrap: anywhere; }
.importar-motivo { font-weight: 600; color: var(--alta); }
.importar-aviso { font-size: 13px; font-weight: 600; color: var(--media); }
.importar-acciones { position: sticky; bottom: 0; padding: 10px 0 2px; background: var(--tarjeta); }
@media (max-width: 700px) {
  .importar-mapeo { grid-template-columns: minmax(0, 1fr); }
  .importar-lista { max-height: 40vh; }
}

/* Cobros atrasados (Hoy) y avisos al cliente por WhatsApp (ficha del parte y calendario) */
.lista-cobros { gap: 10px; }
.cobro-fila { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.cobro-principal { flex: 1 1 320px; width: auto; }
.cobro-principal::before { background: #e6a23c; }
.cobro-fila > .boton { flex: none; align-self: center; }
.cobro-dias { flex: none; display: grid; justify-items: center; min-width: 3.2em; line-height: 1.1; color: var(--suave); font-size: 12px; }
.cobro-dias strong { font: 600 19px/1.2 var(--letra-titulo); color: var(--texto); }
.cobro-importe { flex: none; font: 600 16px/1.2 var(--letra-titulo); white-space: nowrap; }
.aviso-cliente { display: grid; gap: 6px; }
.aviso-cliente + .aviso-cliente { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--borde); }
.mensaje-vista summary { cursor: pointer; font-size: 12.5px; color: var(--suave); }
.mensaje-texto { margin: 6px 0 0; padding: 8px 10px; white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
/* En el calendario el botón va callado (hay muchas visitas): el verde de WhatsApp solo al pasar por encima */
.boton.whatsapp.cal-confirmar { width: 100%; margin-top: 4px; justify-content: center; background: transparent; border-color: var(--borde); color: #178a45; font-weight: 500; }
.boton.whatsapp.cal-confirmar:hover:not(:disabled) { background: #eaf7ef; border-color: #1fa855; color: #178a45; }

/* Calendario: arrastrar visitas a otro día y huecos libres de los técnicos */
.arrastrable { cursor: grab; }
.arrastrable:active { cursor: grabbing; }
.arrastrando { opacity: .4; }
.cal-celda.suelta, .cal-columna.suelta { background: var(--marca-clara); box-shadow: inset 0 0 0 2px var(--marca); }
.cal-deshacer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 10px 14px;
  background: var(--marca-clara); border: 1px solid var(--marca); border-radius: var(--radio); font-size: 14px;
}
.cal-deshacer span { flex: 1 1 260px; }
.cal-ayuda { margin: 8px 0 0; font-size: 12.5px; color: var(--suave); }
@media (pointer: coarse) { .cal-ayuda { display: none; } }
.huecos-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hueco-tecnico { display: grid; gap: 1px; font-size: 13.5px; }
.hueco-rangos { color: #0f6b3c; font-weight: 500; }
.hueco-completo { color: var(--suave); }
.huecos-form { display: grid; gap: 6px; margin: -4px 0 4px; padding: 10px 12px; background: var(--relleno); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); }
.huecos-form p { margin: 0; font-size: 12.5px; }
.huecos-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hueco-chip { min-height: 32px; padding: 4px 10px; font-size: 13px; font-weight: 600; background: var(--tarjeta); border: 1px solid var(--borde-fuerte); border-radius: 999px; cursor: pointer; }
.hueco-chip:hover { border-color: var(--marca); color: var(--marca); }
.hueco-chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }

/* Calendario: «Mover visita», la forma de mover una visita sin arrastrar (el móvil no arrastra) */
.cal-acciones-visita { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cal-acciones-visita .boton { flex: 1 1 140px; width: auto; margin-top: 0; justify-content: center; }
.cal-acciones-visita .boton.whatsapp.cal-confirmar { width: auto; margin-top: 0; }
.cal-mover-boton { background: transparent; font-weight: 500; }
.cal-mover { display: grid; gap: 8px; margin-top: 6px; padding: 10px 12px; background: var(--relleno); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); }
.cal-mover-campo { display: grid; gap: 4px; font-size: 13px; }
.cal-mover input[type="datetime-local"] { width: 100%; min-height: 40px; }
.cal-mover .huecos-form { margin: 0; }
.cal-mover .error { margin: 0; }
.cal-mover .acciones { justify-content: flex-end; }
@media (pointer: coarse) {
  .cal-mover input[type="datetime-local"], .cal-mover .boton { min-height: 44px; }
  .cal-mover .hueco-chip { min-height: 40px; padding: 6px 14px; }
}

/* ---------- Búsqueda global (Ctrl+K): una ventana arriba, sin salir de la pantalla en la que estás ---------- */
.atajo {
  display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--borde-fuerte); border-bottom-width: 2px; border-radius: 6px;
  background: var(--relleno); color: var(--suave); font: 600 11.5px/1.5 var(--letra); text-align: center;
}
.btn-buscar { gap: 0; }
.btn-buscar .atajo { margin-left: 10px; }
.busqueda {
  width: min(680px, 100%); max-width: calc(100% - 24px); max-height: min(560px, calc(100% - 96px)); margin: 72px auto auto; padding: 0; overflow: hidden;
  border: 0; border-radius: 16px; color: var(--texto); background: var(--tarjeta); box-shadow: var(--sombra-3);
}
.busqueda[open] { display: flex; flex-direction: column; }
.busqueda::backdrop { background: rgba(10, 28, 33, .5); }
.bq-caja { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.bq-lupa { --ico-tam: 20px; color: var(--suave); }
.bq-entrada {
  flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0; border: 0; outline: 0; background: none; box-shadow: none;
  color: var(--texto); font: 500 17px/1.3 var(--letra);
}
.bq-entrada:focus-visible { border: 0; box-shadow: none; } /* el foco se ve en toda la caja (abajo), no solo en el campo */
.bq-caja:focus-within { box-shadow: inset 0 -2px 0 var(--marca); }
.bq-entrada::placeholder { color: var(--suave); font-weight: 400; }
.bq-entrada::-webkit-search-cancel-button { display: none; }
.bq-lista { flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px 8px 8px; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.bq-bloque { margin: 0; padding: 0; list-style: none; }
.bq-titulo { margin: 10px 10px 4px; color: var(--suave); font-size: 12.5px; font-weight: 600; }
.bq-grupo { margin: 0; padding: 0; list-style: none; }
.bq-opcion { margin: 0; padding: 0; border-radius: 10px; cursor: pointer; }
.bq-opcion.activa { background: var(--marca-clara); box-shadow: inset 3px 0 0 var(--marca); }
.bq-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; }
.bq-texto { display: grid; gap: 1px; min-width: 0; }
.bq-linea { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bq-principal { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bq-numero { flex: none; color: var(--suave); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bq-linea .bq-principal { flex: 0 1 auto; } /* el nombre manda: si falta sitio se recorta la avería, no el nombre */
.bq-averia { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--suave); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.bq-secundario { overflow: hidden; color: var(--suave); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bq-marcas { display: flex; flex: none; align-items: center; gap: 6px; }
.bq-atajo .bq-principal { font-weight: 500; }
.bq-nota, .bq-vacio { margin: 8px 10px; color: var(--suave); font-size: 13.5px; list-style: none; }
.bq-vacio { padding: 14px 4px; }
.bq-error { color: var(--alta); }
.bq-pie { display: flex; flex: none; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 9px 18px; border-top: 1px solid var(--borde); background: var(--relleno); color: var(--suave); font-size: 12.5px; }
@media (max-width: 700px) {
  .btn-buscar { width: 40px; padding: 8px 0; font-size: 0; } /* en el móvil, solo la lupa */
  .btn-buscar::before { margin-inline-end: 0; }
  .btn-buscar .atajo { display: none; }
  .busqueda { margin-top: 16px; max-height: calc(100% - 32px); }
  .bq-pie { display: none; }
  .bq-secundario { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } /* hasta dos líneas: el móvil no tiene sitio de sobra */
  .bq-marcas { flex-direction: column; align-items: flex-end; gap: 4px; }
}
@media (pointer: coarse) { .btn-buscar .atajo, .bq-pie { display: none; } }

/* ---------- Dictado de materiales (dentro del buscador de materiales de un parte) ---------- */
.selector-fila .boton { flex: none; }
.dictado { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--relleno); }
.dictado-ayuda { margin: 0; color: var(--suave); font-size: 13px; line-height: 1.45; }
.dictado-grabar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dictado-estado { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; }
.dictado-estado:empty { display: none; }
.dictado-estado.ok { color: var(--baja); font-weight: 600; }
.dictado-estado.mal { color: var(--alta); }
.dictado-estado.grabando-texto { color: var(--alta); font-weight: 600; font-variant-numeric: tabular-nums; }
.dictado-estado.grabando-texto::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 8px; border-radius: 50%; background: var(--alta);
  vertical-align: 0; animation: latido 1.1s ease-in-out infinite;
}
.dictado textarea { width: 100%; min-height: 56px; resize: vertical; }
.dictado .acciones { justify-content: flex-end; margin: 0; }
.dictado-resultado { display: grid; gap: 8px; }
.dictado-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dictado-fila {
  display: grid; grid-template-columns: auto 5.5em minmax(0, 1fr); align-items: start; gap: 8px 10px; padding: 9px 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--tarjeta);
}
.dictado-fila.hecha { border-color: #b7e0c8; background: var(--baja-fondo); }
.dictado-fila input[type="checkbox"] { width: 20px; height: 20px; margin: 6px 0 0; accent-color: var(--marca); }
.dictado-fila input[type="text"] { width: 100%; text-align: center; font-weight: 600; }
.dictado-material { display: grid; gap: 5px; min-width: 0; }
.dictado-material select { width: 100%; min-width: 0; }
.dictado-dicho { color: var(--suave); font-size: 12.5px; overflow-wrap: anywhere; }
.dictado-nota { margin: 0; color: var(--media); font-size: 12.5px; line-height: 1.4; }
.dictado-nota.ok { color: var(--baja); font-weight: 600; }
.dictado-nota:empty { display: none; }
.dictado-material .boton { justify-self: start; }
@media (max-width: 700px) {
  .selector-fila { flex-wrap: wrap; }
  .selector-fila input[type="search"] { flex: 1 1 100%; }
  /* en el móvil el material ocupa todo el ancho, debajo de la marca, la cantidad y lo que se dijo */
  .dictado-fila { grid-template-columns: auto 4.8em minmax(0, 1fr); }
  .dictado-material { display: contents; }
  .dictado-dicho { align-self: center; }
  .dictado-elegido, .dictado-nota, .dictado-material .boton { grid-column: 1 / -1; }
}

/* Fichajes y horas (ficha del parte), «Trabajando ahora» y «Por revisar» (Hoy) y el acceso por PIN (ficha del técnico) */
.fichajes { display: grid; gap: 10px; }
.fichajes-ahora {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radio-chico);
  border: 1px solid var(--curso-borde); background: var(--curso-fondo); color: var(--curso-texto); font-weight: 600; font-size: 13.5px;
}
.fichajes-ahora[hidden] { display: none; }
.fichajes-resumen { gap: 4px; font-size: 13.5px; }
.fichajes-tecnico span { color: var(--suave); }
.lista-tramos { gap: 8px; }
.tramo {
  display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--radio-chico); background: var(--tarjeta);
}
.tramo.abierto { border-left-color: var(--curso); background: linear-gradient(90deg, var(--curso-fondo), var(--tarjeta) 60%); }
.tramo.por-revisar { border-left-color: #e6a23c; }
.tramo.editando { outline: 2px solid var(--marca); outline-offset: 1px; }
.tramo-cabecera { display: flex; align-items: baseline; gap: 10px; }
.tramo-cabecera strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tramo-duracion { flex: none; font-weight: 600; }
.tramo-cuando { font-size: 13.5px; color: var(--suave); }
.tramo-insignias { display: flex; flex-wrap: wrap; gap: 6px; }
.tramo .acciones { margin-top: 2px; }
.formulario-fichaje, .formulario-pin {
  display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--relleno);
}
.formulario-fichaje :is(input, select) { min-width: 0; width: 100%; }
.formulario-pin { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.formulario-pin .campo { min-width: 0; }
.acceso-campo { display: grid; gap: 10px; }
.acceso-estado { font-weight: 500; overflow-wrap: anywhere; }
.visita-fila.fichado { background: linear-gradient(90deg, var(--curso-fondo), var(--tarjeta) 55%); border-color: var(--curso-borde); }
.visita-fila.fichado::before { background: var(--curso); }
.visita-fila.descanso { background: linear-gradient(90deg, var(--media-fondo), var(--tarjeta) 55%); border-color: var(--media-borde); }
.visita-fila.descanso::before { background: var(--media); }
.lista-revisar { gap: 10px; }
.fila-revisar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.fila-revisar > .visita-fila { flex: 1 1 320px; width: auto; }
.fila-revisar > .boton { flex: none; align-self: center; }
.visita-fila.por-revisar::before { background: #e6a23c; }

/* ---------- Horas trabajadas (tabla del equipo y detalle de una persona) ---------- */
.horas-excel { margin-left: auto; }
.tabla-horas th, .tabla-horas td { padding: 10px 12px; vertical-align: middle; }
.tabla-horas tbody tr { cursor: default; }
.tabla-horas tbody tr:hover { background: transparent; }
.tabla-horas th.num, .tabla-horas td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-horas tr td:first-child { box-shadow: none; position: sticky; left: 0; background: var(--tarjeta); z-index: 1; }
.tabla-horas tr.cerrado td:first-child { background: var(--tarjeta); }
.tabla-horas th:first-child { position: sticky; left: 0; z-index: 2; }
.tabla-horas .horas-hoy { background: var(--curso-fondo); }
.tabla-horas th.horas-hoy { color: var(--curso); }
.tabla-horas .horas-finde, .tabla-horas .horas-cero { color: var(--suave); }
.tabla-horas .horas-total { border-left: 1px solid var(--borde); }
.tabla-horas tfoot td { border-bottom: 0; }
.tabla-horas .horas-pie td { font-weight: 600; background: var(--relleno); border-top: 2px solid var(--borde-fuerte); }
.tabla-horas .horas-pie td.horas-hoy { background: var(--curso-fondo); }
.horas-marca { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700; line-height: 1; }
.horas-marca.curso { color: var(--curso); }
.horas-marca.revisar { color: var(--media); font-size: 13px; }
.horas-objetivo { display: block; font-size: 12px; font-weight: 600; }
.horas-objetivo.sobra { color: var(--curso); }
.horas-objetivo.falta { color: var(--suave); }
.tabla-horas-persona td { vertical-align: top; }
.tabla-horas-persona .horas-hoy-fila td { background: var(--curso-fondo); }
.horas-lugares { display: grid; gap: 4px; min-width: 220px; }
.horas-lugar { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.horas-lugar:hover .horas-lugar-texto { color: var(--marca); text-decoration: underline; }
.horas-lugar-texto { overflow-wrap: anywhere; }
.horas-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 20px/1.2 var(--letra-titulo); }
.horas-nombre .suave { font: 400 15px/1.2 var(--letra); }
.tabla-horas-persona .dia-corto { display: none; }
@media (max-width: 700px) {
  .horas-excel { margin-left: 0; }
  .tabla-horas-persona .dia-largo { display: none; }
  .tabla-horas-persona .dia-corto { display: inline; white-space: nowrap; }
}
.enlace-horas { font-weight: 600; }