/* Interfaz móvil — sobria, legible, clara/oscura automática. Colores en línea con la app (sello). */
:root{
  --sello:#1f6f5c; --sello-2:#2a8a72;
  --fondo:#f4f5f4; --panel:#ffffff; --texto:#1c2320; --suave:#66756f;
  --linea:#e2e6e4; --rojo:#b04a3a; --verde:#1f7a4d; --aviso:#a86a1e;
  --sombra:0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#121512; --panel:#1c211e; --texto:#e6ece9; --suave:#9aa8a2;
    --linea:#2b332f; --sombra:0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--fondo); color:var(--texto); font-size:16px;
  -webkit-tap-highlight-color:transparent;
}
.oculto{display:none !important}
.suave{color:var(--suave)}
.error{color:var(--rojo)}
button{font-family:inherit; font-size:15px; cursor:pointer}

/* --- login --- */
.pantalla-login{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; background:var(--fondo)}
.tarjeta-login{background:var(--panel); border-radius:16px; box-shadow:var(--sombra);
  padding:24px; width:100%; max-width:400px}
.tarjeta-login h1{margin:0 0 4px; color:var(--sello); font-size:22px}
.tarjeta-login label{display:block; margin:16px 0 6px; font-size:13px; color:var(--suave)}
.tarjeta-login input{width:100%; padding:12px; border:1px solid var(--linea); border-radius:10px;
  background:var(--fondo); color:var(--texto); font-size:16px}
.pie{font-size:12px; margin-top:16px}

/* --- cabecera y tabs --- */
.cabecera{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top)); background:var(--sello); color:#fff}
.cabecera .titulo{font-weight:600}
.pildora{font-size:12px; background:rgba(255,255,255,.18); padding:3px 10px; border-radius:20px}
.pildora.mal{background:var(--rojo)}
main{padding:12px 12px 90px; max-width:640px; margin:0 auto}
.barra-tabs{position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--panel);
  border-top:1px solid var(--linea); padding-bottom:env(safe-area-inset-bottom); z-index:5}
.barra-tabs .tab{flex:1; border:0; background:none; color:var(--suave); padding:8px 2px;
  display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px}
.barra-tabs .tab span{font-size:11px}
.barra-tabs .tab.activa{color:var(--sello); font-weight:600}

/* --- botones --- */
.primario{width:100%; margin-top:20px; padding:13px; border:0; border-radius:10px;
  background:var(--sello); color:#fff; font-weight:600; font-size:16px}
.btn{border:1px solid var(--linea); background:var(--panel); color:var(--texto);
  padding:8px 12px; border-radius:9px}
.btn.verde{background:var(--sello); color:#fff; border-color:var(--sello)}
.btn.rojo{color:var(--rojo); border-color:var(--rojo)}
.btn.pequeno{padding:6px 10px; font-size:13px}

/* --- pasos y encargos --- */
.paso{background:var(--panel); border-radius:12px; box-shadow:var(--sombra); margin-bottom:12px; overflow:hidden}
.paso-cab{display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--linea)}
.paso-cab h3{margin:0; font-size:15px}
.paso-cab .cont{background:var(--sello); color:#fff; border-radius:20px; padding:1px 9px; font-size:12px}
.paso-cab .cont.cero{background:var(--linea); color:var(--suave)}
.encargo{padding:12px 14px; border-bottom:1px solid var(--linea)}
.encargo:last-child{border-bottom:0}
.encargo .top{display:flex; justify-content:space-between; gap:8px}
.encargo .cli{font-weight:600}
.encargo .meta{font-size:12px; color:var(--suave); margin-top:2px}
.encargo .total{color:var(--sello); font-weight:600; white-space:nowrap}
.encargo .plazo{font-weight:700; margin-top:2px; color:var(--texto)}
.encargo .plazo.rojo{color:#c0392b}
.encargo .acciones{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.vacio{padding:14px; color:var(--suave); font-size:14px}

/* --- detalle --- */
.detalle .doc{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 0; border-bottom:1px solid var(--linea)}
.detalle .doc .nom{word-break:break-all; font-size:14px}
.hist{font-size:13px; color:var(--suave)}
.hist li{margin:3px 0}
.tarjeta{background:var(--panel); border-radius:12px; box-shadow:var(--sombra); padding:16px; margin-bottom:12px}
.tarjeta h3{margin:0 0 10px; font-size:16px}
.fila-clave{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--linea)}
.si{color:var(--verde); font-weight:600}
.no{color:var(--rojo)}
.aviso{background:var(--panel); border-left:4px solid var(--aviso); padding:12px 14px;
  border-radius:8px; font-size:14px; margin-bottom:12px}
.volver{background:none;border:0;color:var(--sello);font-weight:600;padding:8px 0;margin-bottom:4px}
.toast{position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:var(--texto);
  color:var(--fondo); padding:10px 18px; border-radius:24px; font-size:14px; z-index:20; box-shadow:var(--sombra)}
.sw{border:0; border-radius:20px; padding:4px 14px; font-weight:600; font-size:13px; min-width:52px}
.sw.on{background:var(--verde); color:#fff}
.sw.off{background:var(--linea); color:var(--suave)}
.num{width:80px; padding:6px 8px; border:1px solid var(--linea); border-radius:8px;
  background:var(--fondo); color:var(--texto); font-size:15px}
/* El nombre tiene que poder ENCOGERSE y partirse. Un hijo de un flex trae de serie
   `min-width:auto`, que le impide bajar del ancho de su contenido: con un identificador
   de encargo largo («17-08-2026_Aleksey_Yudin_aleksey_yudin_lexiconagency_eu», que solo
   ofrece corte en los guiones) la fila crecía más que la tarjeta y el importe se salía
   por la derecha, fuera del margen. `anywhere` permite partir también por los guiones
   bajos. */
.fila-clave span:first-child{padding-right:10px; min-width:0; overflow-wrap:anywhere}
/* Y el importe NO se encoge ni se parte: es el dato corto, el que siempre debe leerse
   entero. El `:not(:first-child)` es para las filas que llevan un solo <span> con la
   etiqueta y un control al lado: ahí el span es etiqueta, y no debe ir sin partir. */
.fila-clave span:last-child:not(:first-child){flex-shrink:0; white-space:nowrap}
.pres-ctrl{display:flex; align-items:center; gap:6px; flex-shrink:0}
.mini{padding:5px 6px; border:1px solid var(--linea); border-radius:8px; background:var(--fondo);
  color:var(--texto); font-size:13px; max-width:120px}
.imp{width:72px}
.lbl{display:block; margin:12px 0 4px; font-size:13px; color:var(--suave)}
.campo{width:100%; padding:10px; border:1px solid var(--linea); border-radius:9px;
  background:var(--fondo); color:var(--texto); font-size:15px; font-family:inherit}
textarea.campo{resize:vertical; line-height:1.4}
.zline{display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:14px}
.zline input{margin-top:3px}
.chk-fila{display:flex; align-items:flex-start; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--linea)}
.chk-fila:last-child{border-bottom:0}
.chk-fila input[type=checkbox]{flex:0 0 auto; margin:2px 0 0; width:18px; height:18px}
.chk-fila .nom{flex:1 1 auto; font-size:14px; word-break:break-word}

/* Ventanita para pedir la contraseña del certificado al firmar (v6.83). La contraseña no se
   guarda en el servidor: o se recuerda en este teléfono, o se teclea cada vez. */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 999;
}
.modal {
  background: var(--panel, #fff); color: inherit; border-radius: 14px;
  padding: 16px; width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.modal h3 { margin: 0 0 6px; }
.modal .campo { width: 100%; margin: 8px 0; }

/* --- listas de documentos y de correos (v6.89) ------------------------------------------------
   Antes las filas iban una detrás de otra sin nada que las separase y costaba ver dónde acababa
   un documento y empezaba el siguiente. Ahora: línea de separación entre filas e insignia a la
   izquierda con el tipo (PDF/DOC/…) o el origen del correo (WhatsApp/Gmail). */
.doc.separada{display:flex; align-items:center; gap:10px; padding:10px 2px;
  border-bottom:1px solid var(--linea)}
.doc.separada:last-child{border-bottom:none}
.doc.separada .nom{flex:1; min-width:0; word-break:break-word; font-size:14px}
.doc-izq{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.doc-enlace{flex:1; min-width:0; text-decoration:none; color:inherit}
.doc-enlace .meta{margin-top:2px}

/* insignia cuadrada del tipo de archivo / origen: se lee de un vistazo y no depende del color
   de fondo, porque siempre lleva texto blanco sobre color sólido (vale en claro y en oscuro) */
.ico{flex:none; width:38px; height:26px; border-radius:6px; color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.3px;
  display:inline-flex; align-items:center; justify-content:center}
.ico-pdf{background:#c0392b}      /* PDF */
.ico-doc{background:#2b5797}      /* Word */
.ico-img{background:#7d5ba6}      /* imágenes */
.ico-xls{background:#1f7a4d}      /* hojas de cálculo */
.ico-zip{background:#6b7280}      /* comprimidos */
.ico-otro{background:#8a938f}     /* lo demás */
.ico-wa{background:#25d366}       /* WhatsApp */
.ico-gmail{background:#d93025; font-size:14px}   /* correo */

/* Conversación con el cliente (v7.79): plegable, para releer lo que pidió sin salir del borrador
   ni irse a Gmail. Los mensajes propios van en gris y a la derecha, como en un chat. */
.hilo-correo summary{cursor:pointer; font-weight:600; font-size:14px; padding:2px 0}
.hilo-cuerpo{margin-top:10px; max-height:50vh; overflow-y:auto}
.hilo-msg{border-left:3px solid var(--sello); padding:6px 10px; margin:8px 0;
  background:var(--fondo); border-radius:0 8px 8px 0}
.hilo-msg.mio{border-left-color:#9aa7b5; margin-left:18px}
.hilo-de{font-size:12px; color:var(--suave); margin-bottom:3px}
.hilo-txt{font-size:13px; white-space:pre-wrap; word-break:break-word}

/* Pantalla de acceso con huella y contraseña (v7.84). El logotipo arriba para que se reconozca
   la aplicación de un vistazo, y el token plegado abajo porque ya es solo la vía de rescate. */
.logo-login{width:72px; height:72px; border-radius:16px; display:block; margin:0 auto 10px}
.tarjeta-login #zona-token{margin-top:14px; border-top:1px solid var(--linea); padding-top:10px}
.tarjeta-login #zona-token summary{cursor:pointer; font-size:13px}
.tarjeta-login #btn-huella{margin-bottom:12px}