:root{
  --fondo:#0d1622; --panel:#14202f; --borde:#223448;
  --texto:#e8eef5; --suave:#93a5b8; --dorado:#e8b64c; --azul:#6cb8f0;
  --verde:#4ade80; --rojo:#f87171;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.centro{min-height:100vh;display:flex;align-items:center;justify-content:center}
.app{display:flex;min-height:100vh}
.barra{width:220px;background:var(--panel);border-right:1px solid var(--borde);
  padding:20px 14px;display:flex;flex-direction:column;gap:18px}
.marca{display:flex;align-items:center;justify-content:center;background:#fff;
  border-radius:12px;padding:12px 10px}
.logo{width:40px;height:40px;border-radius:10px;background:var(--dorado);
  color:#0d1622;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center}
.logo-barra{height:44px;width:auto;display:block}
.logo-portada{max-width:230px;width:80%;height:auto;display:block;margin:0 auto 14px}
.logo-icono{width:150px;height:150px;border-radius:34px;display:block;margin:0 auto 14px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.barra nav{display:flex;flex-direction:column;gap:4px}
.barra nav a{color:var(--suave);text-decoration:none;padding:9px 12px;border-radius:8px}
.barra nav a.activo,.barra nav a:hover{background:#1d2f45;color:var(--texto)}
.pie-barra{margin-top:auto;color:var(--suave);font-size:12px;display:flex;flex-direction:column;gap:8px}
.punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--verde);margin-right:6px}
.salir{color:var(--suave)}
main{flex:1;padding:28px;max-width:1000px}
h1{margin:0 0 4px;font-size:28px}
.sub{color:var(--suave);margin:0 0 20px}
.tarjetas{display:flex;gap:14px;flex-wrap:wrap}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  padding:18px 22px;min-width:180px}
.tarjeta span{color:var(--suave);font-size:13px}
.tarjetas .tarjeta strong{display:block;font-size:30px;margin-top:6px}
a.tarjeta-link{color:inherit;text-decoration:none}
a.tarjeta-link:hover{border-color:var(--azul)}
.tarjeta-login{background:var(--panel);border:1px solid var(--borde);border-radius:16px;
  padding:36px;width:360px;text-align:center}
.logo-grande{width:64px;height:64px;border-radius:16px;background:var(--dorado);color:#0d1622;
  font-weight:800;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.tarjeta-login .sub{margin-bottom:14px}
.tarjeta-login form{text-align:left;display:flex;flex-direction:column;gap:8px}
label{color:var(--suave);font-size:13px}
input,button{font-size:15px;padding:11px 13px;border-radius:9px;border:1px solid var(--borde)}
input{background:#0b1420;color:var(--texto);width:100%}
input[readonly]{opacity:.6}
button{background:var(--azul);color:#06263f;border:none;font-weight:700;cursor:pointer;margin-top:6px}
button:hover{filter:brightness(1.08)}
.error{color:var(--rojo);font-size:14px}
.aviso{color:var(--dorado);font-size:14px}
.nota{color:var(--suave);font-size:13px;text-align:left}
.form-linea{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.form-linea input{width:auto;flex:1;min-width:140px}
.form-linea button{margin-top:0}
.tabla{width:100%;border-collapse:collapse;background:var(--panel);border-radius:12px;overflow:hidden}
.tabla th,.tabla td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--borde);font-size:14px}
.tabla th{color:var(--suave);font-weight:600}
.borrar{background:none;border:1px solid var(--borde);color:var(--rojo);font-size:13px;
  padding:6px 10px;margin:0}
/* --- módulo Clientes (expediente) --- */
.volver{color:var(--suave);text-decoration:none;font-size:14px}
.volver:hover{color:var(--texto)}
.ficha h2,.tarjeta h2{margin:0 0 14px;font-size:20px}
.tarjeta{margin-bottom:18px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:8px}
.rejilla label,.bloque label,.rejilla-form label{display:block;color:var(--suave);font-size:12px;margin-bottom:3px}
.rejilla strong{font-size:15px;font-weight:600;word-break:break-word;overflow-wrap:anywhere}
.desplegable{margin:14px 0;border-top:1px solid var(--borde);padding-top:10px}
.desplegable summary{cursor:pointer;color:var(--azul);font-weight:600;font-size:15px;margin-bottom:10px}
.bloque{margin-top:10px}
.notas{white-space:pre-wrap;font-size:14px;margin:4px 0 0}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.acciones .btn-sec,.btn-sec{display:inline-block;background:none;border:1px solid var(--borde);
  color:var(--texto);font-size:13px;padding:8px 14px;border-radius:9px;text-decoration:none;cursor:pointer;margin:0}
.btn-sec:hover{border-color:var(--azul)}
.panel-oculto{display:none}
#panel-editar,#panel-reporte,#panel-docs{margin-top:16px;border-top:1px solid var(--borde);padding-top:14px}
.rejilla-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.rejilla-form .ancho{grid-column:1/-1}
select,textarea{font-size:15px;padding:11px 13px;border-radius:9px;border:1px solid var(--borde);
  background:#0b1420;color:var(--texto);width:100%}
textarea{resize:vertical}
.estado{font-size:12px;padding:4px 10px;border-radius:20px;text-transform:capitalize}
.estado-activo{background:#123f2a;color:var(--verde)}
.estado-inactivo{background:#3f2a12;color:var(--dorado)}
.estado-prospecto{background:#1d2f45;color:var(--azul)}
.etiqueta{font-size:12px;padding:4px 10px;border-radius:20px;background:#1d2f45;color:var(--azul)}
.vacio{color:var(--suave);font-size:14px}
td.acciones{white-space:nowrap}
.tabla a{color:var(--azul)}
/* --- módulo Resultados --- */
.medidores{display:flex;gap:26px;flex-wrap:wrap;margin:6px 0 10px}
.medidor{text-align:center}
.med-num{fill:var(--texto);font-size:30px;font-weight:800}
.med-cal{fill:var(--suave);font-size:13px}
.med-buro{font-weight:700;margin-top:6px}
.med-cambio{font-size:14px;margin-top:2px}
.subio{color:var(--verde);font-weight:700}
.bajo{color:var(--rojo);font-weight:700}
.sin-cambio{color:var(--suave)}
.factores,.comparacion{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.factores-crc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.factor-crc{background:var(--fondo);border:1px solid var(--borde);border-radius:10px;
  padding:18px 8px;text-align:center}
.num-crc{font-size:44px;font-weight:800;color:var(--suave);line-height:1}
.num-crc.verde{color:var(--verde)}
.num-crc.azul{color:var(--azul)}
.num-crc.rojo{color:var(--rojo)}
.lbl-crc{margin-top:8px;font-size:13px;color:var(--suave)}
.grupo-prev{padding:8px 2px;border-bottom:1px solid var(--borde);font-size:14px}
.grupo-prev:last-child{border-bottom:none}
.factor h3{margin:0 0 8px;font-size:15px;font-weight:600}
.factor p{margin:4px 0;font-size:14px}
.num-factor{display:inline-block;min-width:30px;text-align:center;font-size:13px;
  padding:3px 9px;border-radius:16px;background:#1d2f45;color:var(--texto);font-weight:700}
.num-factor.verde{background:#123f2a;color:var(--verde)}
.num-factor.rojo{background:#3f1a1a;color:var(--rojo)}
.num-factor.dorado{background:#3f2a12;color:var(--dorado)}
.num-factor.azul{background:#1d2f45;color:var(--azul)}
.cuenta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  border-bottom:1px solid var(--borde);padding:12px 2px;flex-wrap:wrap}
.cuenta:last-child{border-bottom:none}
.cuenta-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cuenta-buros{display:flex;align-items:center;gap:6px}
.buro{font-size:12px;font-weight:800;padding:4px 10px;border-radius:8px;letter-spacing:1px}
.buro-si{background:#3f1a1a;color:var(--rojo);border:1px solid #5a2424}
.buro-no{background:#123f2a;color:var(--verde);border:1px solid #1d5a35}
.estado-cuenta{font-size:12px;padding:4px 10px;border-radius:20px}
.estado-cuenta-disputar{background:#3f2a12;color:var(--dorado)}
.estado-cuenta-en_disputa{background:#123f2a;color:var(--verde)}
.estado-cuenta-en_disputa::before{content:"✓ ";font-weight:bold}
.estado-cuenta-eliminada{background:#123f2a;color:var(--verde)}
.btn-mini{font-size:12px;padding:6px 10px}
/* --- módulo Cartas --- */
.pestanas{display:flex;gap:8px;margin-bottom:18px}
.pestanas a{color:var(--suave);text-decoration:none;padding:9px 16px;border-radius:9px;
  border:1px solid var(--borde);font-size:14px}
.pestanas a.activa{background:#1d2f45;color:var(--texto);border-color:var(--azul)}
.pestanas a:hover{color:var(--texto)}
.editor-carta{background:#0b1420;border:1px solid var(--borde);border-radius:12px;
  padding:22px 26px;min-height:320px;font-size:14px;line-height:1.6}
.editor-carta:focus{outline:2px solid var(--azul)}
.editor-carta img{max-width:100%;border:1px solid var(--borde);border-radius:8px;margin:8px 0;cursor:pointer}
.editor-carta img.img-sel{outline:3px solid var(--azul);outline-offset:2px}
.barra-img{display:none;gap:6px;align-items:center;margin-bottom:8px;padding:8px 10px;background:#0f1b2d;border:1px solid var(--borde);border-radius:8px;font-size:13px}
.barra-img.visible{display:flex}
.edicion input,.edicion textarea,.edicion select{margin-bottom:8px}
/* --- módulo CRM --- */
.linea-tiempo{display:flex;flex-direction:column;gap:0}
.hito{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid var(--borde)}
.hito:last-child{border-bottom:none}
.hito-marca{flex:0 0 110px;padding-top:2px}
.hito-cuerpo{flex:1}
.hito-titulo{font-weight:600;font-size:15px}
.hito-detalle{color:var(--texto);font-size:14px;margin-top:4px;white-space:pre-wrap}
.hito-fecha{color:var(--suave);font-size:12px;margin-top:6px}
.hito-fecha a{color:var(--azul)}
.hito-pago .hito-titulo{color:var(--verde)}
.hito-carta .hito-titulo{color:var(--azul)}
.hito-nota .hito-titulo{color:var(--dorado)}
.prioridad-alta{background:#3f1a1a;color:var(--rojo)}
.prioridad-media{background:#3f2a12;color:var(--dorado)}
.prioridad-baja{background:#1d2f45;color:var(--azul)}
.volver{display:inline-block;margin-bottom:12px;color:var(--azul);text-decoration:none}

/* Correos */
.lista-cheques{max-height:220px;overflow:auto;border:1px solid var(--borde);border-radius:8px;padding:8px;display:grid;gap:4px}
.lista-cheques label{display:flex;gap:8px;align-items:center;font-size:14px}
.vista-previa{background:#0f141b;border:1px solid var(--borde);border-radius:8px;padding:12px;white-space:pre-wrap;font-size:14px}
/* Compositor de correo (estilo cliente de correo real) */
.correo-compositor{max-width:880px}
.correo-fila{display:flex;gap:.7rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--borde)}
.correo-etiqueta{flex:0 0 5.4rem;color:var(--suave);font-size:14px}
.correo-fila select,.correo-fila input[type=file]{max-width:100%}
#correo-asunto{flex:1}
.correo-para-opciones{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:14px}
.correo-para-opciones label{display:flex;gap:.4rem;align-items:center;margin:0}
.correo-manual{margin:.2rem 0 .6rem}
.correo-manual #correo-buscar{width:100%;margin-bottom:.5rem}
.correo-extras{display:block;margin-top:.6rem;font-size:14px}
.correo-barra{margin-top:.9rem;border:1px solid var(--borde);border-bottom:none;
  border-radius:12px 12px 0 0;padding:8px 10px;background:#0f1622}
.correo-editor{background:#0b1420;border:1px solid var(--borde);border-radius:0 0 12px 12px;
  padding:14px 16px;min-height:220px;font-size:15px;line-height:1.6}
.correo-editor:focus{outline:2px solid var(--azul)}
.correo-editor p{margin:.5em 0}
.correo-vista{background:#ffffff;color:#141414;border:1px solid var(--borde);
  border-radius:8px;padding:16px 18px;font-size:15px;line-height:1.6}
.correo-vista p{margin:.5em 0}
.estado-enviado{background:#123f2a;color:var(--verde)}
.estado-parcial{background:#3f2a12;color:var(--dorado)}
.estado-fallido{background:#451d1d;color:#f08a8a}
.btn-ok{background:var(--verde);color:#06130c;border:none;border-radius:8px;padding:10px 18px;font-weight:700;cursor:pointer}
.btn-ok:disabled{opacity:.5;cursor:default}
.tema-bib{font-size:15px;margin:18px 0 8px;color:var(--azul);border-bottom:1px solid var(--borde);padding-bottom:6px}
.barra-formato{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.aviso-exito{background:#123f2a;border:1px solid var(--verde);color:var(--verde);
  border-radius:10px;padding:12px 16px;margin:12px 0;font-weight:700;font-size:15px}
.cuadro-doc{border:1px dashed var(--borde);border-radius:10px;padding:12px;font-weight:700}
.cuadro-doc input{margin-top:8px;width:100%}
.ya-subido{display:inline-block;background:#123f2a;color:var(--verde);font-size:11px;
  font-weight:700;border-radius:20px;padding:2px 10px;margin-left:8px}
.campo-clave{display:flex;gap:6px;align-items:center}
.campo-clave input{flex:1}
.btn-ver{background:none;border:1px solid var(--borde);border-radius:8px;padding:8px 10px;
  cursor:pointer;margin-top:0;font-size:14px}
.btn-ver:hover{border-color:var(--azul)}

/* Alertas del Panel */
.alerta-pago_vencido{border-left:4px solid #d33}
.alerta-carta_30d{border-left:4px solid #e80}
.alerta-reenvio_mensual{border-left:4px solid #e80}
.alerta-documentos_faltantes{border-left:4px solid #a06cd5}
.alerta-pago_proximo{border-left:4px solid #36c}

/* Estado de pago en Cuentas por cobrar */
.estado-pago{font-size:12px;padding:4px 10px;border-radius:20px;white-space:nowrap}
.estado-pago-aldia{background:#123f2a;color:var(--verde)}
.estado-pago-atrasado{background:#451d1d;color:#f08a8a}

/* Botón de menú móvil (oculto en escritorio) */
.menu-movil{display:none}

/* ============ Fase 2 móvil: diseño responsive ============ */
@media (max-width:768px){
  /* iOS no hace zoom al enfocar si la letra es >=16px */
  input,select,textarea,button{font-size:16px}
  /* Objetivos táctiles mínimos */
  button,.btn-sec,.btn-ok,.btn-mini,.borrar,.btn-ver{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .barra nav a{min-height:44px;display:flex;align-items:center}

  /* Estructura: barra lateral -> barra superior con hamburguesa */
  .app{flex-direction:column}
  .menu-movil{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:0;font-size:22px;background:none;
    border:1px solid #cbd5e1;color:#0d1622;border-radius:10px}
  .barra{width:100%;border-right:none;border-bottom:1px solid #e2e8f0;
    flex-direction:row;align-items:center;gap:12px;padding:10px 14px;
    position:sticky;top:0;z-index:50;background:#fff}
  .barra .marca{flex:1;background:none;padding:4px 0}
  .logo-barra{height:32px}
  .barra nav{display:none;width:100%;flex-direction:column;gap:4px}
  .barra nav a{color:#334155}
  .barra nav a.activo,.barra nav a:hover{background:#e8eef5;color:#0d1622}
  .barra.abierta{flex-wrap:wrap}
  .barra.abierta nav{display:flex}
  .barra .pie-barra{display:none}
  .barra.abierta .pie-barra{display:flex;width:100%;margin-top:6px;
    border-top:1px solid #e2e8f0;padding-top:10px;color:#64748b}

  main{padding:16px 14px 90px}
  h1{font-size:22px}
  .sub{font-size:14px}

  /* Tarjetas y rejillas a una columna */
  .tarjetas{flex-direction:column}
  .tarjeta{min-width:0;width:100%}
  .tarjeta > strong{font-size:26px}
  .rejilla,.rejilla-form,.factores,.factores-crc,.comparacion{grid-template-columns:1fr}
  .tarjeta-login{width:100%;max-width:380px;padding:28px 20px}

  /* Tablas -> tarjetas apiladas */
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla{background:none;border-radius:0}
  .tabla tr{background:var(--panel);border:1px solid var(--borde);
    border-radius:12px;margin-bottom:10px;padding:4px 0}
  .tabla td{border-bottom:1px solid var(--borde);padding:10px 14px;font-size:15px}
  .tabla td:last-child{border-bottom:none}
  td.acciones{white-space:normal}

  /* Formularios */
  .form-linea{flex-direction:column}
  .form-linea input{min-width:0;width:100%}
  .acciones{flex-direction:column;align-items:stretch}
  .acciones .btn-sec,.acciones button{width:100%;text-align:center}
  .pestanas{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .pestanas a{white-space:nowrap}

  /* Ficha del cliente */
  .editor-carta{padding:16px;font-size:15px}
  .hito-marca{flex:0 0 74px}
  .cuadro-doc{font-size:15px}

  /* Resultados */
  .medidores{gap:16px}
  .cuenta-info{font-size:15px}

  /* Redactor de correos usable en móvil */
  .correo-fila{flex-wrap:wrap;gap:.4rem}
  .correo-etiqueta{flex:0 0 100%;font-size:13px}
  #correo-asunto{flex:1 1 100%}
  .correo-barra{display:flex;flex-wrap:wrap;gap:6px}
  .correo-barra button{min-height:40px}
  .barra-formato{gap:8px}
  .barra-formato button,.barra-formato .btn-sec{min-height:40px}
  .correo-editor{min-height:180px;font-size:16px}
  .lista-cheques{max-height:180px}
}