/* Panel de la oficina (paso 7.1). Archivo aparte: la política de contenido no deja estilos sueltos en la página.
   Rediseño del 02/10 (pedido del dev: «más profesional y pulido»): barra lateral, lista de partes en tabla, colores y
   medidas en un solo sitio (las variables de abajo). Sin JavaScript ni fuentes de fuera (la política de contenido solo
   deja lo del propio servidor): las letras del sistema. */

/* La letra del panel (03/10, decisión del dev): Inter, licencia libre SIL OFL 1.1 (partes/panel/letra/OFL.txt), servida
   por nosotros y recortada a las letras del español; mientras llega, la del sistema */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
           src:url("/oficina/letra/inter.woff2?v=2") format("woff2")}

/* ── Colores y medidas ── */
/* 03/10 (pedido del dev, con la consola de Twilio de ejemplo): «--marca» es ahora el azul VIVO de botones, enlaces y lo
   elegido (6:1 sobre blanco); el azul oscuro de ParteVoz queda en «--logo» */
:root{
  --marca:#0b5cd5;            /* el azul de las acciones */
  --marca-fuerte:#0848a8;
  --marca-suave:#e8effc;
  --logo:#1f3a5f;             /* el azul de ParteVoz: el logo */
  --acento:#e0701f;           /* el naranja del logo, solo para señalar */
  --fondo:#fff;
  --fondo-lateral:#f3f4f8;
  --superficie:#fff;
  --superficie-2:#f9fafc;
  --linea:#e1e4ec;
  --linea-fuerte:#c9cfdb;
  --texto:#121c2d;
  --texto-2:#4b5b6e;          /* secundario: 7:1 sobre blanco */
  --texto-3:#5a6a7f;          /* notas pequeñas: 5,5:1 sobre blanco y 5,1:1 sobre el fondo */
  --ok:#1f7a4a;  --ok-fondo:#e3f3ea;
  --aviso:#8a5a00; --aviso-fondo:#fbf0d9;
  --mal:#a33a2b; --mal-fondo:#fbe6e2;
  --info:#24569a; --info-fondo:#e6eef9;
  --radio:16px; --radio-p:10px;
  --sombra:0 1px 2px rgba(16,30,54,.06),0 1px 1px rgba(16,30,54,.04);
  --foco:0 0 0 3px rgba(224,112,31,.35);
  --lateral:264px;
  --acento-texto:#a64f12;     /* el naranja, oscurecido para texto (5:1 sobre blanco) */
  --salida:cubic-bezier(.22,1,.36,1);
  --z-fijo:10;
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
     font-size:15px;line-height:1.5;background:var(--fondo);color:var(--texto);margin:0;
     -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--texto);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.5rem;line-height:1.25;margin:0 0 1rem;font-weight:650}
h2{font-size:1.02rem;margin:2rem 0 .65rem;font-weight:650}
h3{font-size:.95rem;margin:1.2rem 0 .5rem;font-weight:600}
p{margin:.5rem 0}
.contenido p{max-width:75ch;text-wrap:pretty}
a{color:var(--marca);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--marca-fuerte)}
:focus-visible{outline:2px solid var(--acento-texto);outline-offset:2px}
section{margin-bottom:1.25rem}
.nota{font-size:.84rem;color:var(--texto-3);font-weight:400}
h1 .nota{font-size:.95rem}
/* Palabras muy largas sin espacios (un nombre o un material raros): se parten, no ensanchan la página */
h1,.fila1 b,.fila2,table.materiales td,.panel p,.contenido p{overflow-wrap:anywhere}

/* Campos y botones: el mismo aspecto en todas las páginas */
label{display:block;font-size:.86rem;font-weight:500;color:var(--texto-2);margin-bottom:.35rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input[type=url],
input[type=search],select,textarea{font:inherit;font-size:.94rem;color:var(--texto);background:var(--superficie);
  border:1px solid var(--linea-fuerte);border-radius:var(--radio-p);padding:.5rem .65rem;min-height:2.4rem;
  transition:border-color .15s var(--salida),box-shadow .15s var(--salida)}
input[type=email],input[type=password]{width:100%}
input:hover,select:hover,textarea:hover{border-color:#aeb9c7}
input:focus,select:focus,textarea:focus{outline:2px solid transparent;border-color:var(--acento-texto);box-shadow:var(--foco)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--acento-texto);outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--marca);width:1rem;height:1rem;min-height:0}
button{font:inherit;margin-top:1rem;width:100%;padding:.6rem 1rem;border:1px solid var(--marca);border-radius:var(--radio-p);
       background:var(--marca);color:#fff;font-size:.94rem;font-weight:550;cursor:pointer;
       transition:background-color .15s var(--salida),border-color .15s var(--salida),box-shadow .15s var(--salida)}
button:hover{background:var(--marca-fuerte);border-color:var(--marca-fuerte)}
button:focus-visible{outline:2px solid var(--acento-texto);outline-offset:2px}
button.secundario{width:auto;margin-top:0;padding:.45rem .85rem;background:var(--superficie);color:var(--marca);
                  border-color:var(--linea-fuerte)}
button.secundario:hover{background:var(--marca-suave);border-color:#aeb9c7}
button.enlace{width:auto;margin:0;padding:0;background:none;border:0;color:var(--texto-3);font-size:.82rem;
              font-weight:400;text-decoration:underline;text-underline-offset:2px}
button.enlace:hover{background:none;color:var(--texto)}
a.boton{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:var(--radio-p);
        background:var(--marca);color:#fff;text-decoration:none;font-weight:550;font-size:.92rem;white-space:nowrap}
a.boton:hover{background:var(--marca-fuerte);color:#fff}
a.boton-2{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;padding:0 .7rem;
          border:1px solid var(--linea-fuerte);border-radius:var(--radio-p);background:var(--superficie);color:var(--marca);
          text-decoration:none;font-size:.9rem;font-weight:500;white-space:nowrap}
a.boton-2:hover{background:var(--marca-suave)}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Avisos dentro de la página */
.aviso{padding:.65rem .85rem;background:var(--aviso-fondo);color:#5c3d00;border-radius:var(--radio-p);font-size:.9rem}
.aviso-corto{display:inline-block;padding:0 .4rem;background:var(--aviso-fondo);color:#5c3d00;border-radius:5px;font-size:.84rem}
.hecho{padding:.65rem .85rem;background:var(--ok-fondo);color:#14532f;border-radius:var(--radio-p);font-size:.9rem}
.prueba{margin-top:1rem;padding:.6rem;background:var(--info-fondo);border-radius:var(--radio-p);font-size:.8rem;word-break:break-all}
.vacio{background:var(--superficie);border:1px dashed var(--linea-fuerte);border-radius:var(--radio);padding:2rem 1rem;
       text-align:center;color:var(--texto-2)}

/* ── Fuera del panel: entrar, revisar el correo, errores ── */
.caja{background:var(--superficie);padding:2rem 2.25rem;border-radius:12px;
      box-shadow:0 1px 2px rgba(16,30,54,.08),0 4px 8px rgba(16,30,54,.06);width:min(92vw,400px);margin:12vh auto 0}
.caja h1{font-size:1.3rem}
.marca-caja{display:block;margin:0 0 1.1rem;font-size:1.1rem;font-weight:750;letter-spacing:-.015em;color:var(--logo)}
.marca-caja b{color:var(--acento);font-weight:750}
main.app > .marca-caja{display:none}

/* ── El panel: barra lateral y contenido ── */
main.app{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1rem;padding:1.1rem .8rem 1rem;
         background:var(--superficie);border-right:1px solid var(--linea);overflow-y:auto}
a.marca{display:flex;flex-direction:column;gap:.15rem;padding:.25rem .55rem .85rem;text-decoration:none;
        border-bottom:1px solid var(--linea);color:var(--texto)}
a.marca .logo{font-size:1.15rem;font-weight:750;letter-spacing:-.015em;color:var(--logo)}
a.marca .logo b{color:var(--acento);font-weight:750}
a.marca .empresa{font-size:.82rem;color:var(--texto-2);font-weight:500;overflow-wrap:anywhere}
.pestanas ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.pestanas li{position:relative;display:flex;align-items:center;gap:.65rem;padding:.45rem .6rem;border-radius:var(--radio-p);
             color:var(--texto-2)}
.pestanas li:hover{background:var(--superficie-2);color:var(--texto)}
.pestanas a{color:inherit;text-decoration:none;font-size:.92rem;font-weight:500}
.pestanas a::after{content:"";position:absolute;inset:0;border-radius:inherit}       /* toda la fila se pulsa */
.pestanas li:has(a.activa){background:var(--marca-suave);color:var(--marca)}
.pestanas a.activa{font-weight:650}
svg.icono{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;
          stroke-linejoin:round}
.usuario{margin-top:auto;padding:.85rem .55rem 0;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:.6rem}
.usuario .quien{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.usuario .quien b{font-size:.88rem;font-weight:600;overflow-wrap:anywhere}
.usuario .quien .nota{font-size:.78rem;text-transform:capitalize}
.usuario .botones{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.usuario button.enlace{text-align:left}
.usuario form{margin:0}
.contenido{min-width:0;padding:1.75rem 2.25rem 2.5rem;max-width:1180px;width:100%}
.pie{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--linea)}
.solo-movil{display:none}
/* La cabecera de cada página: el título a la izquierda, las acciones a la derecha */
.cabeza-pagina{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1.5rem;
               margin-bottom:1.25rem}
.cabeza-pagina h1{margin:0}
.cabeza-pagina .sub{margin:.3rem 0 0;color:var(--texto-2);font-size:.9rem}
.cabeza-pagina .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
@media (max-width:900px){
  main.app{grid-template-columns:minmax(0,1fr)}
  .lateral{position:sticky;top:0;z-index:var(--z-fijo);height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;
           padding:.6rem .9rem;border-right:0;border-bottom:1px solid var(--linea);overflow:visible}
  a.marca{border-bottom:0;padding:0;flex:1 1 auto}
  a.marca .empresa{font-size:.78rem}
  .usuario{margin:0;padding:0;border:0;flex-direction:row;align-items:center}
  .usuario .quien,.usuario .botones form.salir-todo{display:none}
  .pestanas{order:3;flex:1 1 100%;overflow-x:auto;margin:0 -.9rem;padding:0 .9rem;scrollbar-width:none}
  .pestanas ul{flex-direction:row;gap:.2rem}
  .pestanas li{padding:.4rem .65rem;white-space:nowrap}
  .pestanas li:has(a.activa)::before{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-.1rem;height:2px;
                                     border-radius:2px;background:var(--acento)}
  .pestanas svg.icono{display:none}
  .contenido{padding:1.1rem 1rem 2rem}
  .solo-movil{display:block}
  h1{font-size:1.3rem}
}

/* ── Filtros ── */
.dias{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.25rem 0 .75rem;font-size:.92rem}
.cabeza-pagina .dias{margin:0}
.dias a{display:inline-flex;align-items:center;height:2.1rem;padding:0 .75rem;border:1px solid var(--linea-fuerte);
        border-radius:var(--radio-p);background:var(--superficie);color:var(--marca);text-decoration:none;font-weight:500;
        font-size:.88rem;white-space:nowrap}
.dias a:hover{background:var(--marca-suave)}
.filtros{display:flex;flex-wrap:wrap;gap:.6rem .75rem;align-items:flex-end;margin:0 0 1.1rem}
.filtros label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;margin:0}
.filtros input,.filtros select{min-width:10rem;height:2.4rem;margin:0}
.filtros button{margin-top:0}
.filtros label.casilla{flex-direction:row;align-items:center;gap:.4rem;font-size:.88rem;align-self:center}
.filtros label.casilla input{padding:0;width:auto;margin:0;min-width:0}

/* ── La lista de partes: una tabla (cada fila es un enlace al parte) ── */
.tabla{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);overflow-x:auto}
.tabla .cabeza,a.parte{display:grid;grid-template-columns:7.5rem minmax(8rem,1fr) minmax(10rem,1.5fr) 8.5rem 9.5rem;
                       column-gap:1rem;align-items:start}
.tabla .cabeza{padding:.6rem 1rem;background:var(--superficie-2);border-bottom:1px solid var(--linea);font-size:.76rem;
               font-weight:600;color:var(--texto-2);letter-spacing:.01em}
ul.partes{list-style:none;padding:0;margin:0}
ul.partes > li + li{border-top:1px solid var(--linea)}
a.parte{position:relative;padding:.75rem 1rem;text-decoration:none;color:var(--texto);transition:background-color .12s var(--salida)}
a.parte:hover{background:var(--superficie-2);color:var(--texto)}
a.parte:focus-visible{outline:2px solid var(--acento-texto);outline-offset:-2px}
a.parte .c-hora{font-weight:600;font-variant-numeric:tabular-nums}
a.parte .c-quien{font-weight:500}
a.parte .c-que{color:var(--texto-2);min-width:0;overflow-wrap:anywhere}
a.parte .c-que b{display:block;color:var(--texto);font-weight:500}
a.parte .c-tiempo{font-variant-numeric:tabular-nums;color:var(--texto-2);font-size:.9rem}
a.parte .c-tiempo b{display:block;color:var(--texto);font-weight:500}
a.parte .c-estado{justify-self:start}
a.parte .marcas{grid-column:2 / -1}
a.parte .marcas:empty{display:none}
@media (max-width:760px),(min-width:901px) and (max-width:1080px){
  .tabla .cabeza{display:none}
  a.parte{grid-template-columns:minmax(0,1fr) auto;row-gap:.15rem}
  a.parte .c-hora{grid-column:1}
  a.parte .c-estado{grid-column:2;grid-row:1;justify-self:end}
  a.parte .c-quien,a.parte .c-que,a.parte .c-tiempo,a.parte .marcas{grid-column:1 / -1}
  a.parte .c-tiempo b{display:inline;margin-right:.5rem}
}
/* Estados y marcas: el mismo color para lo mismo en todas las páginas */
.marcas{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0 0}
.marcas span,.estado{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:500;line-height:1.5;
                     padding:.05rem .5rem;border-radius:999px;background:var(--marca-suave);color:var(--marca);white-space:nowrap}
.estado::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor;opacity:.85}
.marca-incidencia{background:var(--mal-fondo) !important;color:var(--mal) !important}
.marca-voz{background:var(--aviso-fondo) !important;color:var(--aviso) !important}
.marca-en-curso{background:#fdeee3 !important;color:var(--acento-texto) !important}
a.parte:has(.marca-en-curso) .c-hora{color:var(--acento-texto)}
.marca-fotos{background:#eef1f5 !important;color:var(--texto-2) !important}
.marca-visto{background:var(--ok-fondo) !important;color:var(--ok) !important}
.estado-ok{background:var(--ok-fondo) !important;color:var(--ok) !important}
/* El color de cada estado por su clave (las de la configuración de cada empresa; una que no esté aquí, en azul) */
.estado.e-pendiente{background:var(--aviso-fondo);color:var(--aviso)}
.estado.e-comprobado{background:var(--info-fondo);color:var(--info)}
.estado.e-facturado{background:var(--ok-fondo);color:var(--ok)}
.estado.e-nulo{background:#eef0f3;color:#5d6876}
.estado.e-mantenimiento{background:#e3f2f4;color:#16626c}
.estado.e-almacen,.estado.e-ausencia{background:#f0edf7;color:#5b4b8a}
.estado.e-compra_material{background:#f6ece4;color:#8a4a1c}
.estado-mal{background:var(--mal-fondo) !important;color:var(--mal) !important}

/* ── Paso 8.6: «Facturar» (cada parte con su casilla) y los partes de la misma factura en el detalle ── */
ul.facturar{display:grid;gap:.5rem}
ul.facturar li{display:flex;flex-direction:column;gap:.2rem}
ul.facturar > li + li{border-top:0}
label.parte{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.75rem;row-gap:.15rem;background:var(--superficie);
            border:1px solid var(--linea);border-radius:var(--radio);padding:.75rem .9rem;color:var(--texto);cursor:pointer;
            font-weight:400;margin:0}
label.parte input[type=checkbox]{grid-row:1 / span 3;width:1.15rem;height:1.15rem;margin:.15rem 0 0}
label.parte:has(input:checked){border-color:var(--marca);box-shadow:0 0 0 1px var(--marca);background:#fbfcfe}
ul.facturar li > a.nota{align-self:flex-end;font-size:.8rem}
fieldset.factura{border:1px solid var(--linea);border-radius:var(--radio);padding:.9rem 1rem;margin:1rem 0 0;display:flex;
                 flex-direction:column;gap:.6rem;background:var(--superficie)}
fieldset.factura legend{font-weight:650;padding:0 .3rem}
fieldset.factura label{display:flex;flex-direction:column;gap:.25rem;font-size:.86rem}
fieldset.factura input{min-width:0}
ul.misma-factura{margin:.2rem 0 .6rem;padding-left:1.2rem;font-size:.9rem}

/* ── Paso 8.8: «Ahora» (un punto de color con el estado, no una raya) y los avisos ── */
ul.ahora{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.75rem}
ul.ahora div.parte{display:flex;flex-direction:column;gap:.25rem;background:var(--superficie);border:1px solid var(--linea);
                   border-radius:var(--radio);padding:.85rem 1rem;color:var(--texto);height:100%}
ul.ahora div.parte .fila1 b{display:inline-flex;align-items:center;gap:.5rem}
ul.ahora div.parte .fila1 b::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--linea-fuerte);
                                    flex:none}
li.ahora-trabajando div.parte .fila1 b::before{background:var(--ok)}
li.ahora-camino div.parte .fila1 b::before{background:var(--info)}
li.ahora-pausa div.parte .fila1 b::before{background:#c58a12}
li.ahora-aviso div.parte .fila1 b::before{background:var(--mal)}
ul.avisos-recientes{padding-left:1.2rem;font-size:.95rem}

/* ── Paso 8.7: las descargas ── */
.botones-descarga{display:flex;flex-wrap:wrap;gap:.5rem;width:100%}
.botones-descarga button{flex:1 1 14rem}
.fila1{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.fila2{font-size:.9rem;color:var(--texto-2)}
.fila3{font-size:.82rem;color:var(--texto-3)}

/* ── El detalle de un parte ── */
dl.datos{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.25rem;background:var(--superficie);
         border:1px solid var(--linea);border-radius:var(--radio);padding:.9rem 1.1rem;margin:.5rem 0}
dl.datos dt{font-size:.82rem;color:var(--texto-3);padding-top:.1rem}
dl.datos dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
dl.otros{background:var(--superficie-2)}
.texto{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--superficie);border:1px solid var(--linea);
       border-radius:var(--radio);padding:.85rem 1.1rem;margin:.25rem 0;max-width:75ch}
.transcripcion{font-size:.9rem;color:var(--texto-2);background:var(--superficie-2)}
table.materiales{width:100%;border-collapse:separate;border-spacing:0;background:var(--superficie);border:1px solid var(--linea);
                 border-radius:var(--radio);overflow:hidden}
table.materiales th,table.materiales td{text-align:left;padding:.55rem .85rem;border-bottom:1px solid var(--linea);font-size:.9rem}
table.materiales th{background:var(--superficie-2);font-size:.76rem;font-weight:600;color:var(--texto-2);
                    letter-spacing:.01em}
table.materiales tr:last-child td{border-bottom:0}
ul.fotos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
ul.fotos li{display:flex;flex-direction:column;gap:.25rem;font-size:.84rem;color:var(--texto-2);overflow-wrap:anywhere;min-width:0}
ul.fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radio-p);background:#e9edf2;
             border:1px solid var(--linea)}
ul.historial{list-style:none;padding:0;margin:0;display:grid;font-size:.88rem;background:var(--superficie);
             border:1px solid var(--linea);border-radius:var(--radio)}
ul.historial > li{padding:.55rem .9rem;border-bottom:1px solid var(--linea)}
ul.historial > li:last-child{border-bottom:0}
@media (max-width:480px){dl.datos:not(.resumen dl){grid-template-columns:1fr}dl.datos:not(.resumen dl) dt{margin-top:.3rem}
  .filtros label{flex:1 1 45%}.filtros input,.filtros select{min-width:0;width:100%}}

/* ── Paso 7.2 bis: la jornada de cada operario ── */
article.jornada{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:.9rem 1.1rem;
                margin-bottom:.75rem;min-width:0;overflow-wrap:anywhere}
/* En el móvil, un estado largo baja de línea en vez de aplastar el nombre (revisión del 7.2 bis) */
article.jornada header.fila1{flex-wrap:wrap}
article.jornada header.fila1 b{font-size:1rem}
article.jornada .estado{white-space:normal}
ul.reparto{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.3rem 1.25rem;font-size:.86rem;color:var(--texto-2)}
ul.reparto b{color:var(--texto);font-variant-numeric:tabular-nums}
ol.tiempos{list-style:none;padding:0;margin:.6rem 0 0;border-top:1px solid var(--linea)}
.linea{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.75rem;padding:.4rem 0;border-bottom:1px solid #eef1f5;
       font-size:.9rem}
.linea:last-child{border-bottom:0}
.linea .horas{color:var(--texto-2);font-variant-numeric:tabular-nums}
.linea-marca .que{color:var(--texto-2);font-style:italic}
.linea-hueco .que{color:#a4431f}
.linea-pausa .que,.linea-trayecto .que{color:var(--texto-2)}
@media (max-width:480px){.linea{grid-template-columns:1fr;gap:0}}

/* ── Paso 7.3: cambiar el estado de un parte (sin JavaScript: cada estado, un desplegable con su formulario) ── */
.estados{display:grid;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);overflow:hidden}
.estados details{padding:.15rem 1rem;border-bottom:1px solid var(--linea);min-width:0}
.estados details:last-child{border-bottom:0}
.estados details[open]{background:var(--superficie-2);padding-bottom:.9rem}
.estados summary,.estados button{cursor:pointer;overflow-wrap:anywhere}
.estados summary{font-weight:550;padding:.55rem .25rem;list-style-position:inside}
.estados summary::marker{color:var(--texto-3)}
.estados form{margin-top:.2rem}
.estados label{margin-top:.6rem}
.estados input,.estados select{display:block;width:100%;margin-top:.25rem}
.estados button{width:auto}
.datos-cambio{display:block;font-size:.84rem;color:var(--texto-2);overflow-wrap:anywhere}

/* ── Paso 7.4: el «visto gerencia» ── */
form.visto{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.5rem 0}
form.visto button{width:auto;margin-top:0;padding:.5rem .95rem}

/* ── Paso 7.5: las listas de la empresa (quitar, con dos toques: abrir y pulsar) ── */
ul.valores{list-style:none;padding:0;margin:.5rem 0;display:grid;background:var(--superficie);border:1px solid var(--linea);
           border-radius:var(--radio);overflow:hidden}
ul.valores li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.4rem .75rem;
              padding:.6rem 1rem;border-bottom:1px solid var(--linea);min-width:0}
ul.valores li:last-child{border-bottom:0}
ul.valores .que{overflow-wrap:anywhere;min-width:0;flex:1 1 12rem}
details.quitar summary{cursor:pointer;font-size:.85rem;color:var(--mal)}
details.quitar button{width:auto;margin-top:.4rem;padding:.45rem .85rem;background:var(--mal);border-color:var(--mal);overflow-wrap:anywhere}
details.quitar button:hover{background:#86291c;border-color:#86291c}
.anadir{display:grid;gap:.75rem}
.anadir form{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:.85rem 1rem}
.anadir label{margin-top:.5rem}
.anadir textarea{display:block;width:100%;margin-top:.25rem;min-height:4.5rem}
.anadir input,.anadir select{display:block;width:100%;margin-top:.25rem}
/* Paso 8.22 (revisión 1): reescribir lo que se coló, en el detalle del parte */
form.reescribir-parte textarea{display:block;width:100%;margin-top:.25rem;min-height:4.5rem}
form.reescribir-parte input[type=checkbox]{display:inline-grid;margin-right:.35rem}
.anadir button{width:auto;padding:.5rem 1rem}
.titulo-form{margin:.1rem 0 .2rem;font-weight:650}

/* ── Paso 7.6: los operarios (cada uno, una tarjeta; cambiar y dar de baja, en desplegables: abrir y pulsar) ── */
article.operario{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:.9rem 1.1rem;
                 margin-bottom:.75rem;min-width:0;overflow-wrap:anywhere}
article.operario header.fila1{flex-wrap:wrap}
article.operario .estado{white-space:normal}
article.operario.baja{background:var(--superficie-2)}
article.operario p{margin:.3rem 0}
details.cambiar summary{cursor:pointer;font-size:.9rem;margin-top:.4rem;color:var(--marca)}
details.cambiar label,details.quitar label{margin-top:.5rem}
details.cambiar input,details.cambiar select{display:block;width:100%;margin-top:.25rem}
details.cambiar button{width:auto;padding:.5rem 1rem}

/* ── Paso 7.7: los clientes (subir un Excel y su informe) ── */
ol.pasos{margin:.3rem 0 .6rem;padding-left:1.3rem;font-size:.9rem;color:var(--texto-2)}
ol.pasos li{margin:.2rem 0}
form.subir,form.confirmar{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:.85rem 1rem}
form.subir input[type=file]{display:block;width:100%;margin-top:.35rem;font-size:.92rem}
form.subir button,form.confirmar button{width:auto;padding:.5rem 1rem}
section#nuevos,section#cambios,section#errores,section#mes,section#resumen{overflow-x:auto}
table.informe{width:100%;border-collapse:separate;border-spacing:0;background:var(--superficie);border:1px solid var(--linea);
              border-radius:var(--radio);overflow:hidden}
/* Sin cortar palabras por la mitad: en el móvil, la tabla se desliza de lado (su sección lleva overflow-x) */
table.informe th,table.informe td{text-align:left;vertical-align:top;padding:.55rem .8rem;border-bottom:1px solid var(--linea);
                                  font-size:.9rem;overflow-wrap:break-word}
table.informe tr:last-child td{border-bottom:0}
table.informe th{background:var(--superficie-2);font-size:.76rem;font-weight:600;color:var(--texto-2);letter-spacing:.01em}
table.informe td:first-child,table.informe th:first-child{white-space:nowrap;color:var(--texto-2)}

/* ── Paso 7.8: corregir la hora de las marcas y la fecha o el aviso de un parte ── */
ol.lista-horas{list-style:none;padding:0;margin:.6rem 0 0;border-top:1px solid var(--linea)}
.hora-marca{display:grid;grid-template-columns:6rem minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.5rem 0;
            border-bottom:1px solid #eef1f5}
.hora-marca .horas{color:var(--texto-2);font-variant-numeric:tabular-nums}
.hora-marca form.corregir{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0;justify-content:flex-end}
.hora-marca form.corregir select,.hora-marca form.corregir input[type=text]{width:auto;max-width:16rem;margin:0}
.hora-marca form.corregir label{display:flex;gap:.3rem;align-items:center;margin:0}
.hora-marca form.corregir button{width:auto;margin:0;padding:.4rem .8rem}
.hora-marca .aviso{grid-column:1/-1;margin:.2rem 0 0}
@media (max-width:480px){.hora-marca{grid-template-columns:1fr;gap:.2rem}}
form.datos-parte{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end}
form.datos-parte label{display:flex;flex-direction:column;gap:.25rem;margin:0}
form.datos-parte button{width:auto;margin:0}
form.sitio-parte{display:flex;flex-direction:column;gap:.75rem;max-width:44rem}
form.sitio-parte fieldset{border:1px solid var(--linea);border-radius:var(--radio);padding:.7rem .9rem;margin:0;display:flex;
                          flex-direction:column;gap:.4rem;background:var(--superficie)}
form.sitio-parte legend{font-weight:650;padding:0 .3rem}
form.sitio-parte label{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-weight:400;color:var(--texto);margin:0}
form.sitio-parte input[type=text]{flex:1 1 14rem;min-width:0}
form.sitio-parte > button{width:auto;align-self:flex-start}
form.referencias-parte{display:flex;flex-direction:column;gap:.5rem;max-width:44rem;margin-top:.6rem}
form.referencias-parte label{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:space-between;
                             font-weight:400;color:var(--texto);margin:0}
form.referencias-parte input[type=text]{flex:0 1 14rem;min-width:0}
form.referencias-parte button{width:auto;align-self:flex-start}
@media (max-width:40rem){form.referencias-parte label{flex-direction:column;align-items:stretch}form.referencias-parte input[type=text]{flex:none}}

/* ── Lo de Google (01/10): el mapa del sitio, la dirección propuesta y las direcciones de «Buscar» ── */
figure.mapa{margin:.6rem 0;max-width:600px}
figure.mapa img,label.resultado-google img{display:block;max-width:100%;height:auto;border-radius:var(--radio-p);background:#e9edf2;
                                           border:1px solid var(--linea)}
figure.mapa figcaption{margin-top:.3rem}
form.propuesta-google{background:var(--info-fondo);border:1px solid #c9d8ee;border-radius:var(--radio);padding:.75rem 1rem;
                      margin:.6rem 0;max-width:44rem}
form.propuesta-google p{margin:.2rem 0}
form.propuesta-google button,form.sitio-parte button.secundario,.anadir button.secundario{width:auto;margin-top:.4rem;align-self:flex-start}
fieldset.google{border:1px solid var(--linea);border-radius:var(--radio);padding:.7rem .9rem;margin:.6rem 0 0;display:flex;
                flex-direction:column;gap:.6rem;background:var(--superficie)}
fieldset.google legend{font-weight:650;padding:0 .3rem}
label.resultado-google{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
button.por-defecto{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;padding:0;margin:0}
fieldset.google input[type=radio]{margin:0}
form.sitio-parte label.resultado-google{align-items:flex-start}

/* ── Revisión 1 del cierre de un trabajo: «Revisado», «Cambiar nombre» y «Quitar» un cliente que dio de alta un operario ── */
.del-operario{display:flex;flex-direction:column;gap:.45rem;margin:.4rem 0 .6rem}
form.en-linea{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0}
form.en-linea label{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0;font-weight:400;color:var(--texto)}
form.en-linea input[type=text]{flex:1 1 12rem;min-width:0}
form.en-linea input[type=checkbox]{width:auto;margin:0;padding:0}
form.en-linea button{width:auto;margin-top:0;padding:.4rem .85rem}

/* ── El detalle de un parte en dos columnas (02/10): a la izquierda lo que hizo; a la derecha el resumen y las acciones ── */
.migas{font-size:.86rem;color:var(--texto-3);margin:0 0 .9rem}
.migas a{color:var(--texto-2)}
.cabeza-parte{margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--linea)}
.cabeza-parte h1{margin:0 0 .5rem}
.cabeza-parte .marcas{align-items:center;margin:0}
.cabeza-parte .marcas a.nota{margin-right:.4rem}
.detalle{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2rem;align-items:start}
.detalle .principal > section:first-child h2,.detalle .resumen > section:first-child h2{margin-top:0}
.resumen{display:flex;flex-direction:column;gap:1.25rem}
.resumen > section{margin:0}
.resumen h2{margin:0 0 .6rem}
.resumen section.ficha{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:1rem 1.1rem}
.resumen section.ficha dl.datos{background:none;border:0;padding:0;margin:0;gap:.5rem 1rem}
.resumen section.ficha #visto{margin-bottom:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--linea)}
.resumen section.ficha #visto:empty{display:none}
.resumen section.ficha form.visto{margin:0}
.resumen section.ficha form.visto button{width:100%}
.resumen section.ficha > p.nota,.resumen section.ficha ul.misma-factura{margin-top:.75rem}
.resumen form.datos-parte{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:.85rem 1rem}
.resumen form.datos-parte label{flex:1 1 100%}
.resumen form.datos-parte input{width:100%}
@media (max-width:1100px){.detalle{grid-template-columns:minmax(0,1fr) 300px;gap:1.5rem}}
@media (max-width:900px){.detalle{grid-template-columns:minmax(0,1fr)}}
.historial-parte{margin-top:2rem}
/* Texto solo para lectores de pantalla (y para quien copia la fila): no se ve */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Rediseño, segunda pasada (02/10, tras el análisis de diseño) ── */
/* La misma cabecera en todas las secciones: el título, su explicación debajo y aire antes del contenido */
.contenido > section:first-child > h1{margin:0 0 .35rem}
.contenido > section:first-child > h1 + p.nota{font-size:.92rem;color:var(--texto-2);margin:0 0 1.4rem}
.contenido > section:first-child > p:first-child{font-size:.86rem;margin:0 0 .9rem}
.contenido > section:first-child > p:first-child a{color:var(--texto-2)}
.cabeza-pagina{padding-bottom:0}
/* Enlaces de texto: en una pantalla táctil, más zona para el dedo sin cambiar cómo se ven */
@media (pointer:coarse){
  .migas a,.cabeza-parte a.nota,dd a.nota,.contenido > section:first-child > p:first-child a,a.parte ~ a.nota,
  ul.facturar li > a.nota{display:inline-block;padding:.6rem 0;margin:-.6rem 0}
}
/* Avisos de «guardado» y lo que se abre: aparecen, no saltan (si no hay animación, se ven igual) */
@keyframes aparecer{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.hecho,.aviso[role=alert]{animation:aparecer .4s var(--salida)}
.estados details[open] > form,.estados details[open] > p,details.cambiar[open] > *:not(summary),
details.quitar[open] > *:not(summary){animation:aparecer .3s var(--salida)}
@media (prefers-reduced-motion:reduce){.hecho,.aviso[role=alert],.estados details[open] > *,details[open] > *{animation:none}}

/* «Ahora»: filas, como el resto de listas; el estado, en el punto de color */
ul.ahora{display:block;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
ul.ahora div.parte{display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,1fr);column-gap:1.25rem;row-gap:.1rem;
                   border:0;border-radius:0;padding:.8rem 1rem;height:auto}
ul.ahora div.parte .fila1{grid-row:1 / span 3;align-self:start}
ul.ahora div.parte .fila2,ul.ahora div.parte .fila3{grid-column:2}
ul.ahora div.parte .fila2{color:var(--texto);font-size:.94rem}
@media (max-width:640px){ul.ahora div.parte{grid-template-columns:minmax(0,1fr)}
  ul.ahora div.parte .fila1{grid-row:auto}ul.ahora div.parte .fila2,ul.ahora div.parte .fila3{grid-column:1}}

/* Operarios: filas dentro de una lista, no una tarjeta por persona */
article.operario{border-radius:0;border-width:0 1px 1px;margin:0}
article.operario:first-of-type{border-top-width:1px;border-radius:var(--radio) var(--radio) 0 0}
article.operario:last-of-type{border-radius:0 0 var(--radio) var(--radio)}
article.operario:only-of-type{border-radius:var(--radio)}
article.operario header.fila1 b{font-size:1rem}

/* Facturar: las mismas filas que la lista de partes, con su casilla delante */
ul.facturar{display:block;gap:0;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
ul.facturar li{gap:0}
ul.facturar > li + li{border-top:1px solid var(--linea)}
ul.facturar label.parte{border:0;border-radius:0;padding:.75rem 1rem}
ul.facturar label.parte:has(input:checked){box-shadow:none;background:var(--marca-suave)}
ul.facturar li > a.nota{align-self:auto;padding:0 1rem .6rem 3rem;margin-top:-.4rem}

/* Formularios: de un ancho que se lee; los campos cortos, de dos en dos */
.anadir,form.subir,form.confirmar,fieldset.factura{max-width:44rem}
#nuevo .anadir form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1rem;padding:1.1rem 1.2rem}
#nuevo .anadir form > *{grid-column:1 / -1}
#nuevo .anadir form > label:has(input[type=date]),#nuevo .anadir form > label:has(select[name=operario]),
#nuevo .anadir form > label:has(input[type=time]){grid-column:auto}
#nuevo .anadir form > .titulo-form{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--linea)}
#nuevo .anadir form > button[type=submit]:not(.secundario):not(.por-defecto){justify-self:start;width:auto;margin-top:1rem}
@media (max-width:560px){#nuevo .anadir form{grid-template-columns:minmax(0,1fr)}#nuevo .anadir form > *{grid-column:1}}

/* Descargas: cuatro botones del mismo peso (ninguno es «el principal») */
.botones-descarga button,.botones-descarga button.secundario{margin-top:.25rem;background:var(--superficie);color:var(--marca);
  border-color:var(--linea-fuerte);font-weight:550}
.botones-descarga button:hover{background:var(--marca-suave)}

/* La barra del día en la Jornada: los tramos en su sitio, entre la hora en punto de antes y la de después */
figure.barra-dia{margin:.75rem 0 .5rem}
figure.barra-dia svg{display:block;width:100%;height:22px;border-radius:6px;background:#eef1f5;overflow:hidden}
.tramo{fill:var(--linea-fuerte)}
rect.tramo{transition:opacity .15s var(--salida)}
rect.tramo:hover{opacity:.8}
.tramo-trabajo{fill:var(--marca)}
.tramo-trayecto{fill:#7ea6dc}
.tramo-pausa{fill:#e3b24f}
.tramo-almacen{fill:#5f4b97}
.tramo-ausencia{fill:#b9b2cf}
.tramo-hueco{fill:#c4604f}
figure.barra-dia .eje{display:flex;justify-content:space-between;margin-top:.25rem;font-size:.72rem;color:var(--texto-3);
                      font-variant-numeric:tabular-nums}
figure.barra-dia .eje span{width:0;display:flex;justify-content:center;white-space:nowrap}
figure.barra-dia .eje span:first-child{justify-content:flex-start}
figure.barra-dia .eje span:last-child{justify-content:flex-end}
figure.barra-dia .leyenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.45rem;font-size:.8rem;color:var(--texto-2)}
figure.barra-dia .leyenda span{display:inline-flex;align-items:center;gap:.35rem}
figure.barra-dia .leyenda span::before{content:"";width:.7rem;height:.7rem;border-radius:3px;background:currentColor}
.leyenda .tramo-trabajo::before{background:var(--marca) !important}
.leyenda .tramo-trayecto::before{background:#7ea6dc !important}
.leyenda .tramo-pausa::before{background:#e3b24f !important}
.leyenda .tramo-almacen::before{background:#5f4b97 !important}
.leyenda .tramo-ausencia::before{background:#b9b2cf !important}
.leyenda .tramo-hueco::before{background:#c4604f !important}
@media (max-width:640px){figure.barra-dia .eje span:nth-child(even){visibility:hidden}}

/* Revisión del rediseño (02/10) */
@media (max-width:900px){
  html{scroll-padding-top:8rem}
  .pestanas ul::after{content:"";flex:0 0 4.5rem}
  a.marca .empresa{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}
  .pestanas{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .pie.solo-movil .quien{display:block;font-size:.84rem;color:var(--texto-2);margin-bottom:.5rem}
}
.pie .quien{display:none}
.estados summary:focus-visible,.estados :focus-visible{outline-offset:-2px}
ul.facturar li > a.nota{align-self:flex-start;margin-left:3rem;padding:0 0 .6rem}

/* ── Estilo «consola» (03/10, pedido del dev con la de Twilio de ejemplo; no igual): más aire, letra más grande,
   títulos grandes, barra lateral de color suave con sus grupos, tarjetas redondeadas y botones del azul vivo ── */
body{font-size:16px;background:var(--fondo)}
body:has(main.caja){background:var(--fondo-lateral)}
h1{font-size:2.1rem;line-height:1.15;font-weight:750;letter-spacing:-.025em;margin:0 0 1.1rem}
h1 .nota{font-size:1rem;font-weight:500;letter-spacing:0}
h2{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;margin:2.4rem 0 .85rem}
h3{font-size:1.02rem;font-weight:650}
.caja h1{font-size:1.45rem;letter-spacing:-.015em}
.caja{border-radius:var(--radio);padding:2.25rem 2.5rem;box-shadow:0 1px 2px rgba(18,28,45,.06),0 8px 24px rgba(18,28,45,.06)}
.nota{font-size:.88rem}
label{font-size:.9rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input[type=url],
input[type=search],select,textarea{font-size:.97rem;min-height:2.65rem;padding:.55rem .75rem}
button{border-radius:var(--radio-p);padding:.7rem 1.2rem;font-size:.97rem;font-weight:600}
button.secundario{padding:.55rem 1.05rem;color:var(--marca);border-color:var(--marca);font-weight:600}
button.secundario:hover{background:var(--marca-suave);border-color:var(--marca-fuerte);color:var(--marca-fuerte)}
a.boton{padding:.6rem 1.15rem;border-radius:var(--radio-p);font-weight:600;font-size:.95rem}
a.boton-2,.dias a{height:2.5rem;padding:0 .95rem;border-radius:var(--radio-p);color:var(--texto);font-weight:550;
                  font-size:.92rem;border-color:var(--linea-fuerte)}
a.boton-2:hover,.dias a:hover{background:var(--fondo-lateral);color:var(--texto)}
.filtros input,.filtros select{height:2.65rem}
.filtros label{font-size:.82rem}

/* La barra lateral: fondo suave, la empresa en su caja y los apartados en tres grupos con su rótulo */
.lateral{background:var(--fondo-lateral);padding:1.4rem 1rem 1.1rem;gap:.6rem}
a.marca{border-bottom:0;padding:.1rem .35rem .4rem;gap:.75rem}
a.marca .logo{font-size:1.25rem;padding-left:.2rem}
a.marca .empresa{display:block;background:#e7e9f0;border-radius:var(--radio-p);padding:.6rem .8rem;font-size:.92rem;
                 font-weight:600;color:var(--texto);line-height:1.3}
a.marca:hover .empresa{background:#dfe2eb}
.pestanas .grupo{margin:1.15rem .75rem .4rem;font-size:.82rem;font-weight:500;color:var(--texto-3)}
.pestanas .grupo:first-child{margin-top:.35rem}
.pestanas ul{gap:.15rem}
.pestanas li{padding:.55rem .75rem;border-radius:var(--radio-p);color:var(--texto);gap:.75rem}
.pestanas li:hover{background:#e7e9f0;color:var(--texto)}
.pestanas a{font-size:.97rem;font-weight:550}
.pestanas li:has(a.activa){background:#e1e8f8;color:var(--marca)}
.pestanas a.activa{font-weight:650}
svg.icono{width:20px;height:20px;stroke-width:1.6}
.usuario{padding:1rem .5rem 0}
.usuario .quien b{font-size:.92rem}
.contenido{padding:2.5rem 3rem 3rem;max-width:1240px}
.cabeza-pagina{margin-bottom:1.75rem;gap:1rem 1.5rem}
.cabeza-pagina .sub{font-size:1rem}
.contenido > section:first-child > h1 + p.nota{font-size:1rem;margin:0 0 1.75rem}

/* Las tarjetas con una cifra grande (la lista de partes) */
ul.cifras{list-style:none;padding:0;margin:0 0 1.75rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
          gap:1rem}
li.cifra{display:flex;flex-direction:column;gap:.35rem;background:var(--superficie);border:1px solid var(--linea);
         border-radius:var(--radio);padding:1.3rem 1.5rem 1.35rem;min-width:0}
li.cifra .rotulo{font-size:.95rem;font-weight:500;color:var(--texto-2);overflow-wrap:anywhere}
li.cifra .valor{font-size:2rem;font-weight:650;letter-spacing:-.025em;line-height:1.15;color:var(--texto);
                font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
li.cifra .pie-cifra{margin-top:.35rem;font-size:.9rem;color:var(--texto-2)}
li.cifra .pie-cifra.pie-mal{color:var(--mal);font-weight:550}
li.cifra .pie-cifra a{font-weight:650;text-decoration:none}
li.cifra .pie-cifra a:hover{text-decoration:underline}

/* Tablas y fichas: más aire y la cabecera en blanco */
.tabla .cabeza{background:var(--superficie);padding:.8rem 1.25rem;font-size:.82rem}
a.parte{padding:.95rem 1.25rem}
table.materiales th,table.informe th{background:var(--superficie);font-size:.82rem}
table.materiales th,table.materiales td,table.informe th,table.informe td{padding:.7rem 1rem;font-size:.94rem}
dl.datos{padding:1.1rem 1.35rem}
dl.datos dt{font-size:.88rem}
article.jornada,article.operario,.texto{padding:1.1rem 1.35rem}
.resumen section.ficha{padding:1.25rem 1.35rem}
.marcas span,.estado{font-size:.8rem;padding:.1rem .6rem}
.migas{font-size:.92rem;margin-bottom:1.1rem}
.migas a{color:var(--texto-2);font-weight:500}

@media (max-width:900px){
  .lateral{padding:.7rem 1rem;gap:.4rem .8rem}
  a.marca{padding:0;gap:.1rem}
  a.marca .logo{font-size:1.15rem;padding:0}
  a.marca .empresa{background:none;padding:0;font-size:.8rem;font-weight:500;color:var(--texto-2)}
  .pestanas{display:flex;gap:.2rem}
  .pestanas .grupo{display:none}
  .pestanas ul{flex:none}
  .pestanas ul:not(:last-of-type)::after{content:none}
  .pestanas li{padding:.45rem .7rem}
  .pestanas li:has(a.activa){background:#e1e8f8}
  .contenido{padding:1.4rem 1rem 2rem}
  h1{font-size:1.6rem}
  h2{margin-top:2rem}
  li.cifra{padding:1rem 1.15rem}
  li.cifra .valor{font-size:1.6rem}
}
@media (max-width:480px){ul.cifras{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  ul.cifras li.cifra:first-child{grid-column:1 / -1}}

/* Revisión del estilo «consola» (03/10, siete menores) */
/* La barra del día: «Trabajo» en el azul oscuro, que se distinga del «Trayecto» (con el azul vivo, 2,4:1) */
.tramo-trabajo{fill:var(--logo)}
.leyenda .tramo-trabajo::before{background:var(--logo) !important}
/* Las fotos que faltan: «falta algo» (ámbar), no el rojo de una incidencia del operario */
.marca-falta{background:var(--aviso-fondo) !important;color:var(--aviso) !important}
/* Las tarjetas, siempre en una fila (sin una sola abajo); en el móvil estrecho, la primera arriba y dos debajo */
ul.cifras{display:flex;gap:1rem}
ul.cifras li.cifra{flex:1 1 0}
@media (max-width:480px){ul.cifras{display:grid;gap:.6rem}
  ul.cifras li.cifra:nth-child(2):last-child{grid-column:1 / -1}}
/* El detalle de un parte, con algo más de sitio en pantallas medianas */
@media (min-width:901px) and (max-width:1100px){.contenido{padding:2rem 1.75rem}}
/* En el móvil: la barra fija creció; las anclas no quedan pegadas a ella; la tira de pestañas llega al borde */
@media (max-width:900px){
  html{scroll-padding-top:9rem}
  .pestanas{margin:0 -1rem;padding:0 1rem}
}

/* ── Clientes (03/10, pedido del dev): la lista primero; la carga desde Excel, recogida en una línea que se abre ── */
details.cargar{margin:0 0 1.1rem;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);
               max-width:44rem}
details.cargar > summary{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.1rem;cursor:pointer;list-style:none;
                         font-weight:600;color:var(--marca);border-radius:var(--radio)}
details.cargar > summary::-webkit-details-marker{display:none}
details.cargar > summary::before{content:"";width:.5rem;height:.5rem;flex:none;border:solid currentColor;
                                 border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .2s var(--salida)}
details.cargar[open] > summary::before{transform:rotate(45deg)}
details.cargar > summary:hover{background:var(--marca-suave)}
details.cargar > summary:focus-visible{outline-offset:-2px}
details.cargar[open] > summary{border-bottom:1px solid var(--linea);border-radius:var(--radio) var(--radio) 0 0}
.cargar-dentro{padding:.6rem 1.1rem 1rem}
.cargar-dentro form.subir{border:0;padding:0;background:none;margin:.4rem 0 .2rem}
details.cargar[open] > .cargar-dentro{animation:aparecer .3s var(--salida)}

/* ── La letra y el símbolo en todo el panel (03/10, pedido del dev: «que se note que está hecho con calidad») ── */
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
     font-size:15px;font-optical-sizing:auto;text-rendering:optimizeLegibility}
h1{font-size:2rem;font-weight:700;letter-spacing:-.028em}
h2{font-size:1.2rem;font-weight:650;letter-spacing:-.018em}
h3{font-weight:600}
table,.tabla,dl.datos,ul.cifras,.linea,.hora-marca{font-variant-numeric:tabular-nums}
svg.simbolo{display:block;flex:none;width:1.8rem;height:1.8rem}
.simbolo-fondo{fill:var(--logo)}
.simbolo-bocadillo{fill:#f5f0ea}
a.marca .logo{display:flex;align-items:center;gap:.55rem;font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.marca-caja{display:flex;align-items:center;gap:.55rem;font-weight:700}
.marca-caja svg.simbolo{width:1.6rem;height:1.6rem}
.pestanas a{font-weight:500}
.pestanas a.activa{font-weight:600}
@media (max-width:900px){a.marca .logo{font-size:1.1rem}a.marca svg.simbolo{width:1.5rem;height:1.5rem}
  h1{font-size:1.6rem}}

/* ── Las páginas de entrar (03/10, pedidos del dev: «más bonita», «más interactiva», «que se note la calidad»): a la
   izquierda, el azul de ParteVoz con la frase y una escena del producto (el audio del operario, lo que entiende el bot y
   cómo le llega a la oficina); a la derecha, el formulario en una tarjeta blanca sobre un fondo con luz. Solo hoja de
   estilo: sin programas (la política de contenido no los deja). Todo se ve aunque no haya movimiento. ── */
body.con-lado{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh}
body.con-lado:has(main.caja){background:
  radial-gradient(44rem 36rem at 96% 0%,rgba(11,92,213,.14),rgba(11,92,213,0) 70%),
  radial-gradient(36rem 30rem at 70% 104%,rgba(255,154,77,.16),rgba(255,154,77,0) 70%),
  var(--fondo-lateral)}
body.con-lado::before{content:"";position:fixed;inset:0 0 0 52.4%;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(31,58,95,.22) 1.1px,transparent 1.7px) 0 0/20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 80%)}

/* La parte de color */
.lado{position:relative;z-index:1;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:2.5rem;
      padding:2.4rem clamp(2rem,4.5vw,4rem) 3rem;color:#fff;
      background:radial-gradient(56rem 40rem at 108% -12%,rgba(46,120,235,.55),rgba(46,120,235,0) 62%),
                 radial-gradient(40rem 30rem at -12% 112%,rgba(255,154,77,.16),rgba(255,154,77,0) 60%),#132a4b}
.lado::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%)}
.lado::after{content:"";position:absolute;z-index:-1;width:30rem;height:30rem;right:-10rem;bottom:-12rem;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(46,120,235,.28),rgba(46,120,235,0) 68%);
  animation:derivar 20s ease-in-out infinite alternate}
@keyframes derivar{from{translate:0 0}to{translate:-4rem -3rem}}
.lado-logo{display:flex;align-items:center;gap:.6rem;margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.lado-logo svg.simbolo{width:2rem;height:2rem}
.lado .simbolo-fondo{fill:#f5f0ea}
.lado .simbolo-bocadillo{fill:#132a4b}
.lado-logo b{color:#ffa864;font-weight:700}
.lado-texto{margin-top:auto;max-width:34rem}
.lado-frase{margin:0 0 1rem;font-size:clamp(1.9rem,2.7vw,2.6rem);line-height:1.1;font-weight:700;letter-spacing:-.032em;
            text-wrap:balance}
.lado-sub{margin:0;max-width:31rem;font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.82);text-wrap:pretty}

/* La escena: una historia en tres pasos, uno por página de entrar (dibujo, con datos inventados). Cada escena se anima
   una vez al llegar a su página; sin movimiento, se ve entera */
.escena{width:100%;max-width:27rem;margin-bottom:auto}
.estado-ej{display:inline-flex;align-items:center;gap:.3rem;flex:none;padding:.06rem .55rem;border-radius:999px;font-size:.72rem;
           font-weight:600;white-space:nowrap;background:var(--aviso-fondo);color:var(--aviso)}
.estado-ej::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.estado-ej.e-facturado,.estado-ej.e-ok{background:var(--ok-fondo);color:var(--ok)}
.estado-ej.e-comprobado{background:var(--info-fondo);color:var(--info)}
/* 1. Dictar: el audio del operario y lo que entiende el bot */
.burbuja{border-radius:14px;padding:.65rem .8rem;font-size:.86rem;line-height:1.45;color:#16233a;
         box-shadow:0 2px 6px rgba(4,12,28,.25)}
.burbuja + .burbuja{margin-top:.6rem}
.burbuja p{margin:0}
.burbuja-op{display:flex;align-items:center;gap:.55rem;width:fit-content;max-width:100%;margin-left:auto;background:#d8e6fb;
            border-bottom-right-radius:4px}
.play{position:relative;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:#0b5cd5}
.play::after{content:"";position:absolute;left:.66rem;top:.52rem;border-left:.55rem solid #fff;
             border-top:.36rem solid transparent;border-bottom:.36rem solid transparent}
.onda{display:flex;align-items:center;gap:2px;height:1.5rem}
.onda i{display:block;width:3px;height:45%;border-radius:2px;background:#0b5cd5;opacity:.8;transform-origin:center}
.onda i:nth-child(3n){height:85%}.onda i:nth-child(4n+1){height:62%}.onda i:nth-child(5n){height:100%}
.onda i:nth-child(7n+2){height:30%}
.dur{font-size:.75rem;color:#3a4a62;font-variant-numeric:tabular-nums}
.burbuja-bot{width:88%;background:#fff;border-bottom-left-radius:4px}
.burbuja-bot .pregunta{margin-top:.35rem;font-weight:600}
.botones-chat{display:flex;gap:.4rem;margin-top:.6rem}
.botones-chat span{flex:1;padding:.32rem .5rem;border:1px solid #cfd8e6;border-radius:8px;background:#fff;text-align:center;
                   font-size:.78rem;font-weight:600;color:#0b5cd5}
/* 2. La oficina: los partes del día, y entra el nuevo */
.ventana{overflow:hidden;background:#fff;border-radius:14px;color:#121c2d;box-shadow:0 2px 8px rgba(4,12,28,.3)}
.ventana-cab{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;font-size:.86rem;
             border-bottom:1px solid #e8ebf1}
.ventana-cab span{min-width:1.4rem;padding:0 .4rem;border-radius:999px;background:#eef1f6;text-align:center;font-size:.75rem;
                  font-weight:600;color:#4b5b6e}
.fila-ej{display:grid;grid-template-columns:5.9rem minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.65rem 1rem;
         font-size:.78rem;color:#4b5b6e;font-variant-numeric:tabular-nums;background:#fff}
.fila-ej + .fila-ej{border-top:1px solid #eef0f4}
.fila-ej .h{font-weight:600;color:#121c2d}
.fila-ej .q{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fila-ej .q b{display:block;font-weight:600;color:#121c2d}
/* 3. La jornada: la barra del día se llena tramo a tramo */
.ficha-jornada{background:#fff;border-radius:14px;padding:1rem 1.1rem 1.05rem;color:#121c2d;box-shadow:0 2px 8px rgba(4,12,28,.3)}
.fj-cab{display:flex;justify-content:space-between;align-items:center;font-size:.92rem}
.fj-sub{margin:.1rem 0 .8rem;font-size:.8rem;color:#4b5b6e}
.barra-ej{display:flex;gap:2px;height:.95rem;border-radius:5px;overflow:hidden;background:#eef1f5}
.barra-ej i{display:block;height:100%;transform-origin:left center}
.t1{flex:3}.t2{flex:14}.t3{flex:2}.t4{flex:12}.t5{flex:3.5}.t6{flex:14}.t7{flex:2}
.t-trab{background:var(--logo)}.t-tray{background:#7ea6dc}.t-pausa{background:#e3b24f}
.eje-ej{display:flex;justify-content:space-between;margin-top:.3rem;font-size:.66rem;color:#5a6a7f;font-variant-numeric:tabular-nums}
.fj-reparto{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.75rem 0 0;font-size:.76rem;color:#4b5b6e}
.fj-reparto span{display:inline-flex;align-items:center;gap:.35rem}
.fj-reparto i{display:block;width:.6rem;height:.6rem;border-radius:3px}
.fj-reparto b{color:#121c2d;font-variant-numeric:tabular-nums}
/* En qué paso de la historia está (el mismo paso del proceso de entrar) */
.pasos-ej{display:flex;gap:.45rem;margin:0}
.pasos-ej i{display:block;width:.45rem;height:.45rem;border-radius:999px;background:rgba(255,255,255,.3)}
.pasos-ej i.ahora{width:1.4rem;background:#ffa864}

/* El movimiento de cada escena, una vez al llegar a su página */
@keyframes entra{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes onda{to{scale:1 .4}}
@keyframes destello{0%{background:#fff1e3}100%{background:#fff}}
@keyframes llenar{from{scale:0 1}to{scale:1 1}}
@keyframes aparece{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.lado-texto{animation:entra .7s var(--salida) both}
.escena-dictar .burbuja-op{animation:entra .5s .35s var(--salida) both}
.escena-dictar .onda i{animation:onda .45s .9s ease-in-out 6 alternate}
.escena-dictar .onda i:nth-child(2n){animation-delay:1s}
.escena-dictar .onda i:nth-child(3n){animation-delay:1.1s}
.escena-dictar .burbuja-bot{animation:entra .55s 1.5s var(--salida) both}
.escena-oficina .ventana{animation:entra .6s .3s var(--salida) both}
.escena-oficina .fila-nueva{animation:entra .55s 1.1s var(--salida) both,destello 1.6s 1.5s var(--salida) both}
.escena-jornada .ficha-jornada{animation:entra .6s .3s var(--salida) both}
.escena-jornada .barra-ej i{animation:llenar .45s var(--salida) both}
.escena-jornada .t1{animation-delay:.8s}.escena-jornada .t2{animation-delay:.95s}.escena-jornada .t3{animation-delay:1.1s}
.escena-jornada .t4{animation-delay:1.25s}.escena-jornada .t5{animation-delay:1.4s}.escena-jornada .t6{animation-delay:1.55s}
.escena-jornada .t7{animation-delay:1.7s}
.escena-jornada .fj-cab .estado-ej{animation:aparece .45s 2.05s var(--salida) both}

/* La tarjeta del formulario: blanca y sólida, encima de la luz */
body.con-lado main.caja{position:relative;z-index:1;align-self:center;justify-self:center;width:min(100% - 2.5rem,440px);
  margin:2.5rem auto;padding:2.5rem 2.5rem 1.5rem;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:0 1px 2px rgba(18,28,45,.05),0 4px 8px rgba(18,28,45,.05)}
body.con-lado .marca-caja{display:none}
body.con-lado main.caja h1{font-size:1.75rem;letter-spacing:-.028em;margin:0 0 .5rem}
body.con-lado main.caja > p{color:var(--texto-2);font-size:.97rem}
body.con-lado main.caja label{color:var(--texto);font-weight:600;font-size:.88rem;margin-top:1.1rem;transition:color .2s var(--salida)}
body.con-lado main.caja form:focus-within label{color:var(--marca)}
body.con-lado main.caja input[type=email],body.con-lado main.caja input[type=password]{min-height:3rem;font-size:1rem;padding:.65rem 2.75rem .65rem .9rem}
body.con-lado main.caja button{min-height:3rem;font-size:1rem;margin-top:1.1rem;
  transition:background-color .15s var(--salida),transform .15s var(--salida),box-shadow .25s var(--salida)}
body.con-lado main.caja button:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(11,92,213,.28)}
body.con-lado main.caja button:active{transform:translateY(0) scale(.99);box-shadow:0 1px 3px rgba(11,92,213,.25)}
body.animar main.caja > *{animation:entra .55s var(--salida) both}
body.animar main.caja > :nth-child(3){animation-delay:.06s}
body.animar main.caja > :nth-child(4){animation-delay:.12s}
body.animar main.caja > :nth-child(n+5){animation-delay:.18s}
.confianza{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:1.9rem -2.5rem 0;padding:1.1rem 1.5rem 0;
           border-top:1px solid var(--linea);font-size:.8rem;color:var(--texto-3);text-align:center}
.confianza svg{flex:none;width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* El campo del correo: una marca de visto y el borde verde cuando el correo tiene buena forma */
.campo{position:relative;display:block}
.campo input{padding-right:2.75rem}
.campo-ok{position:absolute;right:.85rem;top:50%;width:1.3rem;height:1.3rem;translate:0 -50%;scale:.5;opacity:0;
          fill:none;stroke:#1f7a4a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
          transition:opacity .25s var(--salida),scale .35s var(--salida)}
#correo::placeholder{color:#677387;opacity:1}
#correo:valid ~ .campo-ok{opacity:1;scale:1}
#correo:valid:not(:focus){border-color:#3aa36f}
body.con-lado main.caja form:has(#correo:valid):not(:has(#contrasena:invalid)) button{box-shadow:0 0 0 4px rgba(11,92,213,.16);animation:listo .9s var(--salida)}
@keyframes listo{0%{box-shadow:0 0 0 0 rgba(11,92,213,.35)}100%{box-shadow:0 0 0 4px rgba(11,92,213,.16)}}
/* «Revisa tu correo»: un sobre que se dibuja solo */
svg.sobre{display:block;width:3.2rem;height:2.4rem;margin:0 0 1.1rem;fill:none;stroke:var(--marca);stroke-width:2.4;
          stroke-linecap:round;stroke-linejoin:round}
.sobre-caja{stroke-dasharray:200;stroke-dashoffset:200;animation:trazar 1s .15s var(--salida) forwards}
.sobre-solapa{stroke-dasharray:70;stroke-dashoffset:70;animation:trazar .7s .8s var(--salida) forwards}
@keyframes trazar{to{stroke-dashoffset:0}}

/* Móvil: la parte de color, una franja arriba con el logo y la frase; debajo, el formulario */
@media (max-width:900px){
  body.con-lado{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  body.con-lado::before{inset:0}
  .lado{padding:1.25rem 1.25rem 1.5rem;gap:.9rem}
  .lado-texto{margin-top:0}
  .lado-frase{font-size:1.35rem;margin:0}
  .lado-sub,.escena,.pasos-ej{display:none}
  body.con-lado main.caja{align-self:start;width:min(100% - 2rem,30rem);margin:1.25rem auto 2rem;padding:1.75rem 1.25rem 1.25rem}
  .confianza{margin:1.5rem -1.25rem 0;padding:1rem .75rem 0;font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .lado::after,.lado-texto,.escena *,body.animar main.caja > *,body.con-lado main.caja form:has(#correo:valid) button{animation:none !important}
  .sobre-caja,.sobre-solapa{animation:none !important;stroke-dashoffset:0}
  details.cargar[open] > .cargar-dentro{animation:none}
  .campo-ok{transition:none}
  body.con-lado main.caja button:hover{transform:none}
}

/* ── Los controles de los formularios, con diseño propio en todo el panel (03/10, pedido del dev: «los de Facturar son
   muy feos»): el desplegable sin el gris de serie del navegador, con su flecha (dibujada con degradados: la política
   de contenido no deja imágenes de fuera), y casillas y círculos más grandes con su marca ── */
select{-webkit-appearance:none;appearance:none;padding-right:2.4rem;background-color:var(--superficie);cursor:pointer;
       background-image:linear-gradient(45deg,transparent 50%,var(--texto-2) 50%),linear-gradient(135deg,var(--texto-2) 50%,transparent 50%);
       background-position:calc(100% - 1.2rem) 52%,calc(100% - .85rem) 52%;background-size:.36rem .36rem;background-repeat:no-repeat}
select:hover{border-color:#aeb9c7}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;flex:none;
  width:1.2rem !important;height:1.2rem !important;min-width:0;min-height:0;margin:0;padding:0 !important;vertical-align:-.2em;
  border:1.5px solid #7c8899 !important;border-radius:5px;background:var(--superficie);cursor:pointer;
  transition:background-color .15s var(--salida),border-color .15s var(--salida)}
input[type=radio]{border-radius:50%}
input[type=checkbox]::before{content:"";width:.62rem;height:.62rem;background:#fff;scale:0;transition:scale .15s var(--salida);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
input[type=radio]::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#fff;scale:0;transition:scale .15s var(--salida)}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--marca) !important}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--marca);border-color:var(--marca) !important}
input[type=checkbox]:checked::before,input[type=radio]:checked::before{scale:1}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
label.casilla,.filtros label.casilla{gap:.5rem}
/* Facturar: «Ver el parte» como enlace limpio y el botón de la factura a su medida */
ul.facturar li > a.nota{color:var(--marca);font-weight:500;font-size:.86rem;text-decoration:none}
ul.facturar li > a.nota:hover{text-decoration:underline}
ul.facturar label.parte input[type=checkbox]{margin-top:.1rem}
fieldset.factura > button{width:auto;align-self:flex-start;padding:.7rem 1.4rem}
fieldset.factura legend{font-size:1.02rem}
@media (prefers-reduced-motion:reduce){input[type=checkbox],input[type=radio],input[type=checkbox]::before,input[type=radio]::before{transition:none}}
ul.facturar > li:has(input:checked){background:var(--marca-suave)}
ul.facturar > li:has(input:checked) label.parte{background:none}

/* ── El periodo de Facturar y Descargas (03/10, pedido del dev: «las fechas, de otra forma más bonita»): atajos de un
   toque, como un control segmentado, y las dos fechas en una sola pieza con su calendario ── */
nav.atajos{display:inline-flex;flex-wrap:wrap;gap:.25rem;margin:0 0 1.1rem;padding:.25rem;border-radius:12px;
           background:var(--fondo-lateral);border:1px solid var(--linea)}
nav.atajos a{padding:.42rem .9rem;border-radius:9px;font-size:.9rem;font-weight:550;color:var(--texto-2);text-decoration:none;
             white-space:nowrap;transition:background-color .15s var(--salida),color .15s var(--salida)}
nav.atajos a:hover{background:#e7e9f0;color:var(--texto)}
nav.atajos a[aria-current]{background:var(--superficie);color:var(--marca);box-shadow:0 1px 2px rgba(18,28,45,.08),0 1px 3px rgba(18,28,45,.06)}
.campo-periodo{display:flex;flex-direction:column;gap:.25rem}
.rotulo-periodo{font-size:.82rem;font-weight:500;color:var(--texto-2)}
.rango{display:flex;align-items:center;gap:.45rem;height:2.65rem;padding:0 .8rem;border:1px solid var(--linea-fuerte);
       border-radius:var(--radio-p);background:var(--superficie);transition:border-color .15s var(--salida),box-shadow .15s var(--salida)}
.rango:hover{border-color:#aeb9c7}
.rango:focus-within{border-color:var(--acento-texto);box-shadow:var(--foco)}
.rango svg{flex:none;width:1.05rem;height:1.05rem;fill:none;stroke:var(--texto-2);stroke-width:1.7;stroke-linecap:round}
.filtros .rango input[type=date]{width:8.4rem;min-width:0;height:auto;min-height:0;padding:0;border:0;border-radius:0;
       background:transparent;box-shadow:none;font-variant-numeric:tabular-nums}
.filtros .rango input[type=date]:focus{outline:2px solid transparent;box-shadow:none}
.rango-a{color:var(--texto-3);font-size:.9rem}
@media (max-width:480px){.campo-periodo{flex:1 1 100%}.rango{width:100%}.filtros .rango input[type=date]{flex:1 1 0;width:auto}
  nav.atajos{display:flex}nav.atajos a{flex:1 1 auto;text-align:center}}
.rango input[type=date]::-webkit-calendar-picker-indicator{opacity:.4;cursor:pointer}
.rango input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.8}
@media (max-width:480px){nav.atajos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Revisión 4 del estilo (03/10): en el móvil el periodo se encoge (SERIO: Facturar y Descargas se salían de lado, 379 px
   en una pantalla de 320); sin los textos de guía, aire bajo el título; una casilla dentro de «Cambiar», centrada */
@media (max-width:480px){.campo-periodo,.rango{min-width:0}.filtros .rango input[type=date]{width:0}}
.contenido > section:first-child > h1{margin-bottom:1.25rem}
.contenido > section:first-child > h1:has(+ p.nota){margin-bottom:.35rem}
details.cambiar input[type=checkbox],details.cambiar input[type=radio]{display:inline-grid;width:1.2rem;margin-top:0}
@media (max-width:480px){.rango{gap:.3rem;padding:0 .65rem}.rango svg{display:none}
  .rango input[type=date]::-webkit-calendar-picker-indicator{display:none}}

/* ── Paso 8.14 (03/10, pedido del dev con un panel de vendedor de ejemplo, «más bonito y profesional»; decisión: el
   AZUL DE PARTEVOZ con ese estilo): fondo azul muy claro, barra lateral blanca con grupos plegables y una raya en lo
   elegido, cifras grandes y finas en fila, tarjetas suaves sin borde, y la página «Resumen» con su gráfica ── */
:root{
  --marca:#1f3a5f;            /* el azul de ParteVoz: botones, enlaces y lo elegido (11:1 sobre blanco) */
  --marca-fuerte:#152a46;
  --marca-suave:#e7eef7;
  --fondo:#f5f8fc;
  --tinte:#e9f0f8;            /* las tarjetas suaves */
  --linea-grafica:#1f3a5f;
  --linea-antes:#7a8799;
}
body{background:var(--fondo)}
.contenido{padding:2.25rem 3rem 3rem}
h1{font-size:1.65rem;letter-spacing:-.022em}
@media (max-width:900px){h1{font-size:1.45rem}}
a{color:var(--marca)}
/* La barra lateral: blanca, sus grupos se pliegan y lo elegido lleva una raya a la izquierda */
.lateral{background:var(--superficie);border-right:1px solid var(--linea)}
a.marca .empresa{background:var(--fondo);border:1px solid var(--linea)}
.pestanas ul.suelta{margin:.35rem 0 .2rem}
details.grupo-nav{margin-top:.55rem}
details.grupo-nav > summary{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .75rem;
  border-radius:var(--radio-p);cursor:pointer;list-style:none;font-size:.82rem;font-weight:600;color:var(--texto-3);
  text-transform:none}
details.grupo-nav > summary::-webkit-details-marker{display:none}
details.grupo-nav > summary:hover{background:var(--fondo);color:var(--texto)}
details.grupo-nav > summary:focus-visible{outline-offset:-2px}
details.grupo-nav > summary .flecha,.selector-periodo .flecha{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s var(--salida)}
details.grupo-nav:not([open]) > summary .flecha{rotate:-90deg}
.pestanas li{border-radius:0 var(--radio-p) var(--radio-p) 0}
.pestanas li:hover{background:var(--fondo)}
.pestanas li:has(a.activa){background:var(--marca-suave);color:var(--marca);box-shadow:inset 3px 0 0 var(--marca)}
@media (max-width:900px){
  .pestanas{display:flex}
  .pestanas ul.suelta,details.grupo-nav{display:contents}
  details.grupo-nav > summary{display:none}
  .pestanas li{border-radius:var(--radio-p)}
  .pestanas li:has(a.activa){box-shadow:none}
}
/* Botones y cajas: el azul de ParteVoz; tarjetas suaves sin borde */
button.secundario,a.boton-2,.dias a{border-radius:999px}
a.boton,button{border-radius:999px}
fieldset.factura > button,.estados button,details.quitar button,.botones-descarga button{border-radius:var(--radio-p)}
li.cifra{background:var(--tinte);border:0}
nav.atajos{background:var(--superficie)}
nav.atajos a[aria-current]{background:var(--marca);color:#fff;box-shadow:none}

/* ── La página «Resumen» ── */
.pagina-resumen h1{margin-bottom:1rem}
.barra-periodo{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:0 0 1.75rem}
.selector-periodo{position:relative}
.selector-periodo > summary{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem 1.15rem;border:2px solid var(--marca);
  border-radius:999px;background:var(--superficie);color:var(--texto);font-weight:600;cursor:pointer;list-style:none}
.selector-periodo > summary::-webkit-details-marker{display:none}
.selector-periodo > summary svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
.selector-periodo[open] > summary .flecha{rotate:180deg}
.selector-dentro{position:absolute;z-index:var(--z-fijo);top:calc(100% + .5rem);left:0;width:min(34rem,calc(100vw - 2rem));
  padding:1rem 1.1rem;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:0 4px 8px rgba(18,28,45,.08)}
.selector-dentro nav.atajos{margin-bottom:.8rem}
.selector-dentro .filtros{margin:0}
.actualizado{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:var(--radio-p);
  background:var(--tinte);font-size:.85rem;font-weight:500;color:var(--texto-2)}
.actualizado svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
/* Las cifras, en fila: cada una es una pestaña de la gráfica; la elegida, subrayada */
nav.pestanas-cifras{display:flex;flex-wrap:wrap;gap:0 2.5rem;border-bottom:1px solid var(--linea);margin:0 0 1.25rem}
nav.pestanas-cifras a{display:flex;flex-direction:column;gap:.15rem;padding:.25rem 0 .9rem;color:var(--texto);
  text-decoration:none;box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .2s var(--salida)}
nav.pestanas-cifras a:hover{box-shadow:inset 0 -3px 0 var(--linea-fuerte)}
nav.pestanas-cifras a[aria-current]{box-shadow:inset 0 -3px 0 var(--marca)}
nav.pestanas-cifras .rotulo{font-size:.95rem;font-weight:500;color:var(--texto-2)}
nav.pestanas-cifras a[aria-current] .rotulo{color:var(--texto)}
nav.pestanas-cifras .valor{font-size:2.5rem;font-weight:400;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
nav.pestanas-cifras .cambio{font-size:.82rem;font-weight:600}
.cambio.sube{color:var(--ok)}.cambio.baja{color:var(--mal)}.cambio.igual{color:var(--texto-3)}
p.lectura{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;font-size:1rem;color:var(--texto)}
p.lectura svg{flex:none;width:1.2rem;height:1.2rem;fill:currentColor;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lectura-sube svg{color:var(--ok)}.lectura-baja svg{color:var(--mal)}
/* La gráfica */
figure.grafica{margin:0 0 2.5rem}
figure.grafica svg{display:block;width:100%;height:auto;overflow:visible}
figure.grafica .rejilla{stroke:var(--linea);stroke-width:1;vector-effect:non-scaling-stroke}
figure.grafica .rejilla.base{stroke:var(--linea-fuerte)}
figure.grafica .eje{font-size:12px;fill:var(--texto-3);font-variant-numeric:tabular-nums}
figure.grafica .linea{fill:none;stroke:var(--linea-grafica);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
figure.grafica .linea-antes{fill:none;stroke:var(--linea-antes);stroke-width:1.8;stroke-dasharray:5 4;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
figure.grafica .punto{fill:var(--linea-grafica)}
figure.grafica .punto-antes{fill:var(--linea-antes)}
figure.grafica figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;margin-top:1rem}
a.interruptor{display:inline-flex;align-items:center;gap:.7rem;color:var(--texto);text-decoration:none;font-weight:500}
a.interruptor .pista{position:relative;flex:none;width:2.9rem;height:1.6rem;border-radius:999px;background:#7a8799;
  transition:background-color .2s var(--salida)}
a.interruptor .bola{position:absolute;top:.2rem;left:.2rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(18,28,45,.25);transition:translate .2s var(--salida)}
a.interruptor.activado .pista{background:var(--marca)}
a.interruptor.activado .bola{translate:1.3rem 0}
.leyenda-lineas{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.9rem;color:var(--texto-2)}
.leyenda-lineas span{display:inline-flex;align-items:center;gap:.5rem}
.leyenda-lineas span::before{content:"";width:1.4rem;height:0;border-top:2.2px solid var(--linea-grafica)}
.leyenda-lineas .l-antes::before{border-top:2px dashed var(--linea-antes)}
/* Las señales: tarjetas suaves */
ul.senales{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
ul.senales li{display:flex;flex-direction:column;gap:.2rem;padding:1.2rem 1.4rem;border-radius:var(--radio);background:var(--tinte)}
ul.senales .rotulo{font-weight:600;color:var(--marca)}
ul.senales .valor{font-size:2.1rem;font-weight:400;letter-spacing:-.025em;line-height:1.2;font-variant-numeric:tabular-nums}
ul.senales .nota{color:var(--texto-2)}
@media (max-width:900px){.contenido{padding:1.4rem 1rem 2rem}nav.pestanas-cifras{gap:0 1.5rem}nav.pestanas-cifras .valor{font-size:1.9rem}
  figure.grafica .eje{font-size:14px}}
@media (prefers-reduced-motion:reduce){details.grupo-nav > summary .flecha,.selector-periodo .flecha,a.interruptor .pista,
  a.interruptor .bola,nav.pestanas-cifras a{transition:none}}

/* Revisión del 8.14 (aspecto, menores) */
@media (max-width:900px){
  /* la barra del móvil: el hueco del final, solo tras el último grupo; la empresa, sin caja */
  .pestanas ul::after{content:none}
  details.grupo-nav:last-of-type ul::after{content:"";flex:0 0 4.5rem}
  a.marca .empresa{background:none;border:0}
}
@media (max-width:480px){figure.grafica .eje{font-size:26px}
  .selector-dentro{padding:.75rem}.selector-dentro nav.atajos a{padding-inline:.5rem}}
@media (min-width:481px) and (max-width:700px){figure.grafica .eje{font-size:21px}}
@media (min-width:901px) and (max-width:1100px){.contenido{padding:2rem 1.75rem}figure.grafica .eje{font-size:14px}}
a.interruptor .estado-interruptor{color:var(--texto-3);font-weight:400}
/* Alto contraste de Windows: el interruptor, la cifra elegida y las líneas, con los colores del sistema */
@media (forced-colors:active){
  figure.grafica .linea{stroke:CanvasText}
  figure.grafica .punto{fill:CanvasText}
  figure.grafica .linea-antes{stroke:GrayText}
  figure.grafica .punto-antes{fill:GrayText}
  figure.grafica .eje{fill:CanvasText}
  a.interruptor .pista{border:2px solid CanvasText}
  a.interruptor .bola{background:CanvasText}
  a.interruptor.activado .pista{background:Highlight}
  nav.pestanas-cifras a[aria-current]{border-bottom:3px solid Highlight}
}

/* ── Paso 8.15: las pausas en «Listas» (franja y tiempo máximo de cada una; solo gerencia) ── */
form.form-pausas{display:flex;flex-direction:column;gap:1rem;max-width:44rem}
fieldset.pausa{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:flex-end;margin:0;padding:1rem 1.2rem;
               border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie)}
fieldset.pausa legend{font-weight:650;padding:0 .3rem}
fieldset.pausa label{display:flex;flex-direction:column;gap:.25rem;margin:0}
fieldset.pausa input[type=number]{width:7rem}
form.form-pausas > button{width:auto;align-self:flex-start}
/* Paso 8.15: el cierre de la jornada (gris: cuenta, pero no es de ningún parte) */
.tramo-cierre{fill:#9aa6b6}
.leyenda .tramo-cierre::before{background:#9aa6b6 !important}
.linea-cierre .que{color:var(--texto-2)}

/* ── Paso 8.18: cambiar y añadir clientes a mano; fotos de la oficina en un parte ── */
details.editar-cliente{margin:.35rem 0 .2rem}
details.editar-cliente > summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
  color:var(--marca);font-weight:600;font-size:.9rem;padding:.15rem 0}
details.editar-cliente > summary::-webkit-details-marker{display:none}
details.editar-cliente > summary::before{content:"";width:.4rem;height:.4rem;flex:none;border:solid currentColor;
  border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
details.editar-cliente[open] > summary::before{transform:rotate(45deg)}
details.editar-cliente[open]{padding:.6rem .8rem .7rem;margin:.5rem 0;border:1px solid var(--linea);
  border-radius:var(--radio);background:var(--superficie)}
form.datos-cliente{display:grid;gap:.6rem;max-width:38rem;margin:.5rem 0}
form.datos-cliente label{display:flex;flex-direction:column;gap:.25rem}
form.datos-cliente button{justify-self:start}
.fotos-oficina{display:grid;gap:.6rem;max-width:38rem;margin:.8rem 0}
.fotos-oficina label{display:flex;flex-direction:column;gap:.25rem}
.fotos-oficina button{justify-self:start}
ul.fotos .quitar-foto{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.3rem;font-size:.85rem}
.foto-de{font-size:.8rem}

/* ── Paso 8.16: mensajes a la oficina («Ahora» y la Jornada) ── */
ul.mensajes-oficina{list-style:none;margin:.4rem 0 1.4rem;padding:0;display:grid;gap:.5rem}
ul.mensajes-oficina > li{display:flex;gap:.9rem;align-items:flex-start;padding:.7rem .9rem;border:1px solid var(--linea);
  border-left:4px solid var(--marca);border-radius:var(--radio);background:var(--superficie)}
ul.mensajes-oficina .horas{flex:none;min-width:3.2rem;font-variant-numeric:tabular-nums;font-weight:600}
ul.mensajes-oficina .que{min-width:0;overflow-wrap:anywhere}
ul.mensajes-oficina .texto-mensaje{white-space:pre-line}
ul.mensajes-oficina > li.mensaje-espera{border-left-color:var(--aviso)}
ul.mensajes-oficina > li.mensaje-mal{border-left-color:var(--mal);background:var(--mal-fondo)}
.caja-mensajes h2{margin-top:.6rem}

/* ── Paso 8.17: la contraseña ── */
body.con-lado main.caja input[type=password]{padding-right:.9rem;margin-bottom:.4rem}
body.con-lado main.caja input[readonly]{background:var(--tinte);color:var(--texto)}
.usuario .enlace-contrasena{font-size:.85rem;color:var(--marca);font-weight:600;text-decoration:none}
.usuario .enlace-contrasena:hover{text-decoration:underline}
.formulario-contrasena{display:grid;gap:.45rem;max-width:26rem;margin-top:.8rem}
.formulario-contrasena button{justify-self:start;margin-top:.4rem}
.formulario-contrasena input[readonly]{background:var(--tinte)}
@media (max-width:760px){.usuario .enlace-contrasena{display:none}}

/* ── Paso 8.19: los permisos (las casillas de administración, por grupos; solo gerencia) ── */
form.form-permisos{display:flex;flex-direction:column;gap:1rem;max-width:44rem}
fieldset.permisos{display:grid;gap:.7rem;min-width:0;margin:0;padding:1rem 1.2rem;border:1px solid var(--linea);
                  border-radius:var(--radio);background:var(--superficie)}
fieldset.permisos legend{font-weight:650;padding:0 .3rem}
label.permiso{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.7rem;align-items:start;margin:0;
              font-size:.92rem;color:var(--texto);cursor:pointer}
label.permiso input[type=checkbox]{margin-top:.15rem}
label.permiso .nota{display:block;font-weight:400;overflow-wrap:anywhere}
form.form-permisos > button{width:auto;align-self:flex-start}

/* ── Paso 8.29: confirmar con «¿Seguro?» (en lugar de la casilla «Sí, …» al lado del botón) ── */
details.confirmar{display:inline-block;margin-top:.35rem}
details.confirmar>summary{display:inline-block;list-style:none;cursor:pointer;padding:.45rem .9rem;border:1px solid var(--linea-fuerte);
  border-radius:8px;background:var(--superficie);color:var(--marca);font-weight:550;font-size:.9rem}
details.confirmar>summary::-webkit-details-marker{display:none}
details.confirmar>summary:hover{background:var(--marca-suave)}
details.confirmar[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
details.confirmar .confirmacion{margin-top:.4rem;padding:.7rem .85rem;border:1px solid var(--linea-fuerte);border-radius:8px;
  background:var(--superficie)}
details.confirmar .confirmacion p{margin:0 0 .55rem}
details.confirmar .confirmacion button{width:auto;margin:0 .6rem 0 0;padding:.45rem .9rem;background:var(--mal);border-color:var(--mal)}
details.confirmar .confirmacion button:hover{background:#86291c;border-color:#86291c}
details.confirmar .abierto,details.confirmar[open] .cerrado{display:none}
details.confirmar[open] .abierto{display:inline}

/* ── Paso 8.32d: el paquete para la Inspección (las huellas SHA-256, largas, se parten donde haga falta) ── */
form.paquete-inspeccion > label{display:block;max-width:34rem;margin-top:.6rem}
form.paquete-inspeccion > label input{display:block;width:100%;margin-top:.25rem}
form.paquete-inspeccion fieldset{margin-top:.8rem}
form.paquete-inspeccion button{width:auto;margin-top:.8rem}
.huella{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;overflow-wrap:anywhere;word-break:break-all}
ul.huellas{margin:.4rem 0 0;padding-left:1rem;font-size:.82rem}
table.paquetes td{overflow-wrap:anywhere}
/* Paso 8.33b: los posibles trabajos (el contador de la barra lateral, la lista y la ficha) */
.contador{display:inline-block;min-width:1.4rem;margin-left:.35rem;padding:0 .4rem;border-radius:999px;background:var(--marca);
  color:#fff;font-size:.72rem;font-weight:650;line-height:1.35rem;text-align:center}
table.oportunidades td{overflow-wrap:anywhere}
table.oportunidades td.texto-op{min-width:12rem}
/* Los dos formularios en rejilla: cada etiqueta ENCIMA de su campo, los campos cortos en fila y los largos a lo ancho */
form.ficha-oportunidad,form.nueva-oportunidad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem 1rem;
  max-width:52rem;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:1rem 1.1rem}
form.ficha-oportunidad label,form.nueva-oportunidad label{display:flex;flex-direction:column;gap:.3rem;margin:0}
form.ficha-oportunidad .ancho,form.nueva-oportunidad .ancho{grid-column:1/-1}
form.ficha-oportunidad p.ancho,form.nueva-oportunidad p.ancho{margin:-.3rem 0 0}
form.ficha-oportunidad input,form.ficha-oportunidad select,form.ficha-oportunidad textarea,
form.nueva-oportunidad input,form.nueva-oportunidad select,form.nueva-oportunidad textarea{width:100%;min-width:0}
form.ficha-oportunidad textarea,form.nueva-oportunidad textarea{min-height:5rem}
form.ficha-oportunidad button,form.nueva-oportunidad button{grid-column:1/-1;justify-self:start;width:auto;margin-top:0}
form.ficha-oportunidad{grid-template-columns:repeat(2,minmax(0,1fr))}   /* la ficha va en una columna estrecha */
@media (max-width:640px){form.ficha-oportunidad,form.nueva-oportunidad{grid-template-columns:1fr}}
.marca-ya-no{background:var(--mal-fondo);color:var(--mal);border-radius:var(--radio-p);padding:0 .4rem;font-size:.78rem}