/* Panel de Grupos · Magic Travel
   Sin librerías externas: todo se sirve desde este mismo servidor.

   La tipografía es Poppins, la de la marca. Los archivos están en
   assets/fuentes/ y salen de aquí: el panel no llama a Google ni a
   ningún otro sitio de fuera. Si algún día faltaran esos archivos, el
   navegador usaría la letra del sistema y el panel se seguiría viendo
   bien, solo que con otra tipografía.

   Cada peso va en dos archivos: el juego "latin" (el que usa el
   español) y el "ext" (acentos de otros idiomas). El navegador se baja
   solo el que necesita. */

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/poppins-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/poppins-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(fuentes/poppins-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(fuentes/poppins-500-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(fuentes/poppins-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(fuentes/poppins-600-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(fuentes/poppins-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(fuentes/poppins-700-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;
  src:url(fuentes/poppins-800.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;
  src:url(fuentes/poppins-800-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:italic;font-weight:400;font-display:swap;
  src:url(fuentes/poppins-400i.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:italic;font-weight:400;font-display:swap;
  src:url(fuentes/poppins-400i-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


:root{
  --pink:#E5006E; --pink-dark:#C10060; --pink-soft:#FDE7F1;
  --navy:#232463; --navy-soft:#EAEAF6;
  --cream:#FEF8E6; --white:#fff;
  --ink:#2B2D42; --muted:#8A8CA3; --line:#EDEDF3;
  --green:#1E9E6A; --green-soft:#E6F7EF;
  --blue:#2B6CB0; --blue-soft:#EAF2FD;
  --amber:#B7791F; --amber-soft:#FDF3DC;
  --red:#D6336C; --red-soft:#FDE8EE;
  --r:14px; --shadow:0 2px 14px rgba(35,36,99,.07);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--cream); color:var(--ink); font-size:14px;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:var(--pink)}
h1,h2{color:var(--navy);margin:0 0 8px}
h1{font-size:24px;font-weight:800}
h2{font-size:16px;font-weight:700}

/* ---------- barra superior ---------- */
.nav{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav-in{max-width:1340px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:38px;width:auto;display:block}
.logo-texto{font-weight:700;font-size:19px;color:var(--navy);letter-spacing:-.3px}
.nav-links{display:flex;gap:6px;flex:1}
.nav-links a{padding:9px 18px;border-radius:999px;color:var(--navy);font-weight:500;text-decoration:none}
.nav-links a.on{background:var(--pink-soft);color:var(--pink);font-weight:600}
.nav-links a:hover:not(.on){background:var(--navy-soft)}
.user{display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:18px}
.user .role{font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;text-align:right;display:block}
.user .name{font-weight:700;color:var(--navy);text-align:right;display:block;line-height:1.1}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--pink-soft);color:var(--pink);
        display:grid;place-items:center;font-weight:700}

.wrap{max-width:1340px;margin:0 auto;padding:26px 22px 70px}
.cabecera-pagina{margin-bottom:20px}
.cabecera-pagina p{color:var(--muted);margin:0}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--navy);color:#fff;border:none;border-radius:10px;
     padding:12px 20px;font-weight:600;font-size:13.5px;font-family:inherit;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:#171848}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{background:var(--pink-dark)}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--navy)}
.btn-line:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.btn-sm{padding:8px 14px;font-size:12.5px;border-radius:9px}

/* ---------- tarjetas y paneles ---------- */
.panel{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.kpi{background:var(--white);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);border-left:4px solid var(--navy)}
.kpi.ok{border-left-color:var(--green)}
.kpi .n{font-size:30px;font-weight:800;color:var(--navy);line-height:1.1}
.kpi .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:3px}
.kpi .s{font-size:11.5px;color:var(--muted);margin-top:5px}
.lista-fases{margin:10px 0 0;padding-left:20px;line-height:1.9;color:var(--ink)}
.lista-fases b{color:var(--navy)}

/* ---------- pantallas de acceso ---------- */
.acceso{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);
        padding:30px;max-width:430px;margin:40px auto}
.acceso .sub{color:var(--muted);margin:0 0 20px;line-height:1.5}
.pie-nota{font-size:12px;color:var(--muted);margin:16px 0 0;line-height:1.5}

/* ---------- formularios ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
             color:var(--muted);font-weight:700;margin-bottom:6px}
.field input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
             background:#F8F8FC;color:var(--ink);outline:none;font-family:inherit;font-size:14px}
.field input:focus{border-color:var(--pink);background:#fff}

/* ---------- avisos ---------- */
.aviso{border-radius:10px;padding:12px 15px;font-size:13px;margin-bottom:16px;line-height:1.5}
.aviso-mal{background:var(--red-soft);color:var(--red)}
.aviso-bien{background:var(--green-soft);color:var(--green)}

/* ---------- barra de búsqueda y acciones ---------- */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.buscador{flex:1;min-width:220px;background:var(--white);border-radius:var(--r);box-shadow:var(--shadow)}
.buscador input{width:100%;border:none;outline:none;padding:14px 16px;border-radius:var(--r);
                background:transparent;font-family:inherit;font-size:14px;color:var(--ink)}

/* ---------- tarjeta con pestañas y listado ---------- */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{padding:16px 20px;font-weight:600;color:var(--muted);font-size:13.5px;text-decoration:none;
     border-bottom:3px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:8px}
.tab.on{color:var(--pink);border-bottom-color:var(--pink)}
.tab:hover:not(.on){background:#FCFCFE}
.cnt{background:var(--navy-soft);color:var(--navy);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700}
.tab.on .cnt{background:var(--pink-soft);color:var(--pink)}

.thead,.grow{display:grid;grid-template-columns:92px 2.2fr 1.1fr 90px 1fr 120px;
             align-items:center;gap:14px;padding:15px 20px}
.thead{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
       font-weight:700;border-bottom:1px solid var(--line)}
.grow{border-bottom:1px solid var(--line)}
.grow:last-child{border-bottom:none}
.grow:hover{background:#FCFCFE}
.gid{color:var(--pink);font-weight:700;font-size:13px;letter-spacing:.04em}
.gname{font-weight:700;color:var(--navy);font-size:14.5px}
.gsub{color:var(--muted);font-size:12.5px;margin-top:2px}
.pill{display:inline-block;background:var(--blue-soft,#EAF2FD);color:#2B6CB0;border-radius:8px;
      padding:3px 9px;font-size:11.5px;font-weight:600;margin-bottom:3px}
.fechas .pill{display:block;width:max-content}
.pax{font-weight:700;color:var(--navy);font-size:15px}
.pax span{display:block;font-size:11px;color:var(--muted);font-weight:500}

.vacio{padding:46px 20px;text-align:center;color:var(--muted)}
.vacio b{display:block;color:var(--navy);font-size:15px;margin-bottom:6px}

/* ---------- etiquetas de fase ---------- */
.badge{display:inline-block;border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:600;
       background:var(--navy-soft);color:var(--navy);vertical-align:middle}
.fase-cotizando{background:#FDF3DC;color:#B7791F}
.fase-preparacion{background:#EAF2FD;color:#2B6CB0}
.fase-venta{background:var(--pink-soft);color:var(--pink)}
.fase-confirmado{background:var(--green-soft);color:var(--green)}
.fase-finalizado{background:var(--navy-soft);color:var(--muted)}
.fase-archivado{background:var(--red-soft);color:var(--red)}

/* ---------- ficha ---------- */
.volver{display:inline-block;color:var(--navy);text-decoration:none;font-weight:600;
        font-size:13px;margin-bottom:12px}
.volver:hover{color:var(--pink)}
.ficha-head{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);
            padding:20px 22px;margin-bottom:18px}
.ficha-head-in{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.ficha-head-in > div:first-child{flex:1;min-width:240px}
.ficha-head h1{font-size:23px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.eyebrow{color:var(--pink);font-weight:700;font-size:13px}
.meta{color:var(--muted);font-size:12.5px}
.meta b{color:var(--ink);font-weight:600}
.meta-chica{font-size:11.5px;margin-top:4px}

.destacado{background:var(--pink-soft);color:var(--navy);border-radius:10px;
           padding:12px 16px;font-size:13px;margin-bottom:18px;line-height:1.5}
.destacado .vencido{color:var(--red);font-weight:600}

.columnas{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
.ptitulo{font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;
         letter-spacing:.04em;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
     border-radius:10px;background:#F8F8FC;color:var(--ink);outline:none;font-family:inherit;font-size:14px}
.field textarea{resize:vertical}
.field select:focus,.field textarea:focus{border-color:var(--pink);background:#fff}
.acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:16px;
          border-top:1px solid var(--line)}

.dinero{background:var(--navy);color:#fff;border-radius:12px;padding:16px}
.dinero .fila{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;color:#C9CAE6}
.dinero .fila b{color:#fff;font-weight:600;text-align:right}
.dinero .fila.grande{border-top:1px solid rgba(255,255,255,.18);margin-top:6px;padding-top:12px;font-size:15px}
.dinero .fila.grande b{font-size:19px;font-weight:800}

/* Solo se ven unos cinco cambios; el resto, deslizando. */
.historial-caja{max-height:296px;overflow-y:auto;padding-right:6px;
                scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.historial-caja::-webkit-scrollbar{width:8px}
.historial-caja::-webkit-scrollbar-track{background:transparent}
.historial-caja::-webkit-scrollbar-thumb{background:#DCDCE8;border-radius:99px}
.historial-caja::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.historial{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.6}
.historial li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.historial li:last-child{border-bottom:none}
.historial .hfecha{display:block;color:var(--muted);font-size:11px}
.historial .hquien{font-weight:700;color:var(--navy)}
.historial i{font-style:normal;color:var(--navy);font-weight:600}

/* ---------- ficha con dos columnas ---------- */
.columnas-ficha{display:grid;grid-template-columns:370px 1fr;gap:20px;align-items:start}
.destacado.alerta{background:var(--red-soft);color:var(--red)}
.dinero .pos{color:#7CE0B0}
.dinero .neg{color:#FF9BB8}
.en-linea{display:inline}

/* ---------- estancias ---------- */
.tab-head{padding:16px 18px 14px;display:flex;justify-content:space-between;
          align-items:center;gap:12px;flex-wrap:wrap}
.estancia{border:1px solid var(--line);border-radius:13px;margin:0 18px 16px;overflow:hidden}
.estancia-head{background:#FBFBFE;padding:14px 16px;display:flex;gap:14px;align-items:center;
               flex-wrap:wrap;border-bottom:1px solid var(--line)}
.estancia-t{font-weight:800;color:var(--navy);font-size:16px}
.estancia-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.estancia-estado{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.estancia-pie{padding:11px 16px;background:#FCFCFE;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sin-opciones{padding:18px 16px;color:var(--muted);font-size:13px}

/* ---------- una opción de hotel ---------- */
.opcion{display:grid;grid-template-columns:74px 1fr 120px 100px 120px 118px;gap:14px;
        align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.opcion:last-of-type{border-bottom:none}
.opcion.ganadora{background:var(--green-soft)}
.opcion.descartada{opacity:.55}
.opcion-foto{position:relative;width:74px;height:56px;border-radius:8px;overflow:hidden;
             background:var(--navy-soft);display:grid;place-items:center}
.opcion-foto img{width:100%;height:100%;object-fit:cover;display:block}
.opcion-foto .cuantas{position:absolute;right:4px;bottom:4px;background:rgba(35,36,99,.8);
                      color:#fff;border-radius:6px;padding:1px 6px;font-size:10px;font-weight:700}
.sin-foto{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;
          font-family:inherit;width:100%;height:100%}
.sin-foto:hover{color:var(--pink)}
.opcion-n{font-weight:700;color:var(--navy);font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opcion-notas{font-size:12px;color:var(--ink);margin-top:5px;line-height:1.45}
.opcion-notas.motivo{color:var(--red)}
.corona{background:var(--green);color:#fff;border-radius:6px;padding:2px 7px;font-size:10px;font-weight:700}
.precio{font-size:17px;font-weight:800;color:var(--navy);line-height:1.2}
.precio small{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.dif{font-size:11.5px;font-weight:700}
.dif.arriba{color:var(--red)}
.dif.abajo{color:var(--green)}
.total{color:var(--navy);font-size:14px;display:block}
.reloj{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px}
.reloj.tarde{color:var(--red)}
.opcion-botones{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.btn-xs{padding:6px 11px;font-size:11.5px;border-radius:8px}
.btn-ghost{background:var(--pink-soft);color:var(--pink);font-weight:600}
.btn-ghost:hover{background:#fbd5e7}
.btn-borrar{background:#fff;border:1px solid var(--line);color:var(--red);font-weight:600}
.btn-borrar:hover{border-color:var(--red);background:var(--red-soft)}

/* ---------- estados de consulta ---------- */
.est-todo{background:var(--navy-soft);color:var(--navy)}
.est-wait{background:var(--amber-soft);color:var(--amber)}
.est-resp{background:var(--blue-soft);color:var(--blue)}
.est-block,.est-ok{background:var(--green-soft);color:var(--green)}
.est-no,.est-caro{background:var(--red-soft);color:var(--red)}

/* ---------- servicios ---------- */
.opcion.servicio{grid-template-columns:1fr 130px 130px 130px 118px}
.opciones-radio{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radio{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;
       padding:11px 13px;cursor:pointer;background:#F8F8FC;font-size:12.5px;line-height:1.4}
.radio:hover{border-color:var(--pink)}
.radio input{margin-top:2px}
.radio b{color:var(--navy)}

/* ---------- agenda de proveedores ---------- */
.filtros{padding:16px 18px}
.sec-t{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
       font-weight:700;margin:14px 0 8px}
.sec-t:first-child{margin-top:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-block;background:var(--navy-soft);color:var(--navy);border-radius:7px;
      padding:4px 10px;font-size:11.5px;font-weight:600;text-decoration:none;border:none;
      font-family:inherit;cursor:default}
.chip span{opacity:.6;font-weight:500}
a.chip,button.chip{cursor:pointer;background:#fff;border:1px solid var(--line)}
a.chip:hover,button.chip:hover{border-color:var(--pink);color:var(--pink)}
.chip.on{background:var(--pink);color:#fff;border-color:var(--pink)}
.chip.on:hover{color:#fff}
.chip.enlace{background:var(--pink-soft);color:var(--pink);border-color:transparent;font-weight:600}
.chip.enlace:hover{background:var(--pink);color:#fff}

.rejilla-prov{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.tarjeta{display:block;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);
         padding:17px;text-decoration:none;color:var(--ink);border-top:4px solid var(--navy)}
.tarjeta:hover{box-shadow:0 6px 22px rgba(35,36,99,.13)}
.tarjeta.tp-hotel{border-top-color:var(--pink)}
.tarjeta.tp-dmc{border-top-color:var(--blue)}
.tarjeta.tp-guia{border-top-color:var(--green)}
.tarjeta.tp-otro{border-top-color:var(--amber)}
.t-nombre{font-weight:700;color:var(--navy);font-size:15.5px;line-height:1.25}
.t-tipo{font-size:12px;color:var(--muted);margin:3px 0 10px}
.t-desc{font-size:12.5px;line-height:1.5;margin-bottom:12px}
.t-pie{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;display:flex;
       gap:8px;align-items:center;flex-wrap:wrap}
.t-fecha{font-size:11px;color:var(--muted);margin-left:auto}
.estrellas{color:var(--amber);font-size:13px;letter-spacing:1px}

.ver-bien{background:var(--green-soft);color:var(--green)}
.ver-regular{background:var(--amber-soft);color:var(--amber)}
.ver-mal{background:var(--red-soft);color:var(--red)}

.casillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.casilla{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:9px;
         padding:8px 11px;cursor:pointer;background:#F8F8FC;font-size:12.5px}
.casilla:hover{border-color:var(--pink)}

.contacto{list-style:none;margin:0;padding:0;font-size:13px}
.contacto li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
             border-bottom:1px solid var(--line)}
.contacto li:last-child{border-bottom:none}
.contacto span{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.contacto b,.contacto a{color:var(--navy);text-align:right;word-break:break-word}
.notas-trabajo{font-size:13px;line-height:1.6}

.usos{list-style:none;margin:0;padding:0;font-size:12.5px}
.usos li{padding:9px 0;border-bottom:1px solid var(--line);line-height:1.5}
.usos li:last-child{border-bottom:none}
.usos a{text-decoration:none;color:var(--navy);font-weight:600}
.usos a:hover{color:var(--pink)}
.usos span{display:block;color:var(--muted)}

.columnas-ficha.invertida{grid-template-columns:1fr 370px}

/* ---------- tramos de edad ---------- */
.tramos-rejilla{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tramos-cab,.tramos-fila{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;
                         align-items:center;padding:8px 12px}
.tramos-fila.dos-col{grid-template-columns:1.2fr 1fr}
.tramos-cab{background:#F8F8FC;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
            color:var(--muted);font-weight:700}
.tramos-fila{border-top:1px solid var(--line)}
.tramos-n{font-weight:700;color:var(--navy);font-size:13px;display:flex;align-items:center;gap:8px;cursor:pointer}
.tramos-fila.apagada{background:#FBFBFE}
.tramos-fila.apagada .tramos-n{color:var(--muted);font-weight:600}
.tramos-fila input:disabled{background:#F2F2F7;color:var(--muted);cursor:not-allowed}
.tramos-fila input{padding:8px 10px;font-size:13px;border:1px solid var(--line);
                   border-radius:8px;background:#F8F8FC;font-family:inherit;width:100%}
.tramos-fila input:focus{border-color:var(--pink);background:#fff;outline:none}

.tabla-tramos{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
.tabla-tramos th{text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
                 color:var(--muted);font-weight:700;padding:0 6px 6px}
.tabla-tramos th:first-child{text-align:left}
.tabla-tramos td{padding:8px 6px;border-top:1px solid var(--line);text-align:right;color:var(--navy)}
.tabla-tramos td:first-child{text-align:left}
.tabla-tramos td:first-child .gsub{display:block;font-size:11px}
.tabla-tramos tr.apagado{opacity:.5}
.tabla-tramos .verde{color:var(--green)}
.tabla-tramos .rojo{color:var(--red)}
.total-grupo{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
             font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
.total-grupo b{color:var(--navy);font-size:16px;font-weight:800}

.por-tramos div{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:1px 0}
.por-tramos b{color:var(--navy)}

.tramo-editar{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;padding:14px 16px}
.tramo-editar .field{margin-bottom:0}

/* ---------- bitácora ---------- */
.pendientes{margin:0 18px 16px;background:var(--amber-soft);border-radius:12px;padding:14px 16px}
.pendientes .ptitulo{border-bottom:none;padding-bottom:0;color:var(--amber)}
.pendiente{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:13px;flex-wrap:wrap}
.pendiente em{font-style:normal;color:var(--amber);font-weight:600;font-size:12px}
.pendiente em.vencido{color:var(--red)}
.marcar{width:22px;height:22px;border-radius:50%;border:1px solid var(--amber);background:#fff;
        color:var(--amber);cursor:pointer;font-size:12px;line-height:1;font-family:inherit}
.marcar:hover{background:var(--green);border-color:var(--green);color:#fff}

.log{padding:4px 18px 18px}
.apunte{display:grid;grid-template-columns:110px 1fr 120px;gap:14px;padding:14px 0;
        border-bottom:1px solid var(--line)}
.apunte:last-child{border-bottom:none}
.apunte.cerrado{opacity:.6}
.afecha{font-size:12px;color:var(--muted)}
.afecha span{display:block;font-weight:700;color:var(--navy);font-size:11.5px;margin-top:2px}
.atexto{font-size:13.5px;line-height:1.55;color:var(--ink)}
.asiguiente{margin-top:7px;font-size:12.5px;color:var(--muted)}
.asiguiente em{font-style:normal;color:var(--amber);font-weight:600}
.asiguiente em.vencido{color:var(--red)}
.aacciones{display:flex;gap:6px;justify-content:flex-end;align-items:flex-start;flex-wrap:wrap}

/* ---------- comparativa ---------- */
.ctabla{width:100%;border-collapse:collapse}
.ctabla th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
           color:var(--navy);padding:12px 16px;border-bottom:1px solid var(--line)}
.ctabla td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.ctabla tr.mejor td{background:var(--green-soft)}
.ctabla .ciudad{font-weight:700;color:var(--pink);font-size:12px;text-transform:uppercase;
                letter-spacing:.05em;background:#FCFCFE}
.ctabla .chico{font-size:12px}
/* Zonas dentro de una misma estancia: dormir en Rovaniemi o en Ruka
   esas mismas noches es la misma decision, asi que van juntas pero
   separadas por un renglon. */
.ctabla .czona{background:#FBFBFE;color:var(--navy);font-weight:700;font-size:12px;
               padding:8px 16px 8px 30px;border-bottom:1px solid var(--line)}
.ctabla .czona::before{content:"▸ ";color:var(--muted)}
.czonas{float:right;background:var(--navy-soft);color:var(--navy);border-radius:999px;
        padding:2px 10px;font-size:10px;letter-spacing:0;text-transform:none;font-weight:600}
.tabla-pie{padding:16px 18px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}

/* ---------- ventanas emergentes ---------- */
.mascara{position:fixed;inset:0;background:rgba(35,36,99,.45);z-index:60;padding:20px;
         display:none;overflow:auto}
.mascara.abierto{display:grid;place-items:start center}
body.con-modal{overflow:hidden}
.modal{background:#fff;border-radius:18px;width:min(680px,100%);padding:24px;margin:20px 0}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}
.modal h3{margin:0 0 3px;color:var(--navy);font-size:19px}
.modal .sub{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.modal .cerrar{background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.modal .cerrar:hover{color:var(--pink)}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;
            border-top:1px solid var(--line);flex-wrap:wrap}
.modal-foot .btn-borrar{margin-right:auto}
.oculto{display:none}
.field input[type=file]{width:100%;padding:10px;border:1px dashed var(--line);border-radius:10px;
                        background:#F8F8FC;font-family:inherit;font-size:13px}

.galeria{display:flex;gap:10px;flex-wrap:wrap}
.galeria-foto{position:relative;width:96px;height:72px;border-radius:9px;overflow:hidden;background:var(--navy-soft)}
.galeria-foto img{width:100%;height:100%;object-fit:cover;display:block}
.galeria-foto .quitar{position:absolute;top:3px;right:3px;background:rgba(214,51,108,.92);color:#fff;
                      border:none;border-radius:50%;width:22px;height:22px;font-size:15px;line-height:1;
                      cursor:pointer;font-family:inherit}

.pie{text-align:center;color:var(--muted);font-size:11.5px;padding:0 0 26px}

:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

@media(max-width:1050px){
  .columnas{grid-template-columns:1fr}
  .columnas-ficha,
  .columnas-ficha.invertida{grid-template-columns:1fr}
  .opcion{grid-template-columns:74px 1fr;gap:10px}
  .opcion > div:nth-child(2){grid-column:2}
  .opcion > div:nth-child(n+3){grid-column:1 / -1}
  .opcion-botones{flex-direction:row;align-items:center}
  .opcion.servicio{grid-template-columns:1fr}
  .opcion.servicio > div{grid-column:1 / -1}
  .opciones-radio{grid-template-columns:1fr}
  .apunte{grid-template-columns:1fr}
  .aacciones{justify-content:flex-start}
  .tramo-editar{grid-template-columns:1fr}
  .tramos-cab{display:none}
  .tramos-fila{grid-template-columns:1fr}
  .ctabla{display:block;overflow-x:auto}
}
@media(max-width:760px){
  .kpis{grid-template-columns:1fr}
  .user{border-left:none;padding-left:0}
  .thead{display:none}
  .grow{grid-template-columns:1fr 1fr;gap:8px}
  .grow > div:nth-child(2){grid-column:1 / -1}
  .dos{grid-template-columns:1fr}
}

/* ---------- tarjetas de aviso de la ficha de grupo ----------
   Van arriba del todo y tienen que verse a la primera: son las dos
   cosas que cuestan dinero si se pasan por alto. */
.tarjeta-aviso{display:flex;gap:16px;align-items:flex-start;background:var(--amber-soft);
               border-left:5px solid var(--amber);border-radius:var(--r);
               padding:16px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
.tarjeta-aviso-icono{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;
                     place-items:center;font-weight:800;font-size:17px;
                     background:var(--amber);color:#fff}
.tarjeta-aviso-t{font-weight:700;color:var(--navy);font-size:15px;margin-bottom:6px}
.tarjeta-aviso-p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.tarjeta-aviso-lista{margin:0 0 8px;padding-left:18px;font-size:13.5px;line-height:1.7}
.tarjeta-aviso-lista .corona{margin-left:4px}
.tarjeta-aviso-lista .vencido{color:var(--red);font-weight:700}
.tarjeta-aviso-pie{font-size:12px;color:var(--muted)}
.tarjeta-aviso-pie a{color:var(--navy);font-weight:600}

/* Mientras quedan tres dias o mas todavia hay margen de sobra, pero un
   cupo bloqueado siempre cuesta dinero: la tarjeta va en el rosa de la
   marca, sin latido. El ambar se quedaba corto y parecia un aviso mas. */
.tarjeta-aviso.pronto{background:var(--red-soft);border-left:5px solid var(--red);
                      box-shadow:0 3px 14px rgba(214,51,108,.12)}
.tarjeta-aviso.pronto .tarjeta-aviso-icono{background:var(--red)}
.tarjeta-aviso.pronto .tarjeta-aviso-t{color:var(--red)}
.tarjeta-aviso.pronto .tarjeta-aviso-pie{color:#A2718A}
.tarjeta-aviso.pronto .tarjeta-aviso-pie a{color:var(--red)}

/* Cuando quedan dos dias o menos, o ya se ha pasado la fecha, deja de
   ser un recordatorio y pasa a ser una alarma. */
.tarjeta-aviso.urgente{background:#FDECEC;border-left:6px solid #DC2626;
                       box-shadow:0 4px 20px rgba(220,38,38,.18)}
.tarjeta-aviso.urgente .tarjeta-aviso-icono{background:#DC2626}
.tarjeta-aviso.urgente .tarjeta-aviso-t{color:#B91C1C}
.tarjeta-aviso.urgente .vencido{color:#B91C1C}
.tarjeta-aviso.urgente .tarjeta-aviso-pie{color:#9F5B5B}

/* La linea para juntar dos estancias que se pisan */
.fusionar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;
          border:1px solid var(--line);border-radius:10px;padding:10px 14px;
          margin-bottom:10px;font-size:13px}
.fusionar label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.fusionar select{border:1px solid var(--line);border-radius:8px;padding:6px 10px;
                 background:#F8F8FC;font-family:inherit;font-size:13px;color:var(--ink)}
.fusionar span{flex:1;min-width:240px}

/* ---------- ajustes: plazos de aviso ---------- */
.ajuste-fila{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
             padding:16px 0;border-bottom:1px solid var(--line)}
.ajuste-fila:first-child{padding-top:0}
.ajuste-fila p{margin:4px 0 0;max-width:440px;line-height:1.5}
.ajuste-fila .field{width:110px;flex-shrink:0;margin:0}

/* ---------- habitaciones de una estancia ----------
   Rejilla de tres columnas: tipo, cuantas y cuanta gente cabe. */
.habs-rejilla{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.habs-cab,.habs-fila{display:grid;grid-template-columns:1fr 110px 150px;gap:10px;
                     padding:8px 12px;align-items:center}
.habs-cab{background:#F8F8FC;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
          color:var(--muted);font-weight:600}
.habs-fila{border-top:1px solid var(--line)}
.habs-fila input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;
                 background:#fff;font-family:inherit;font-size:13.5px;color:var(--ink);width:100%}
.habs-fila input:focus{outline:2px solid var(--pink-soft);border-color:var(--pink)}

/* Resumen de habitaciones en la cabecera de la estancia */
.habs-resumen{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.hab-chip{background:var(--navy-soft);color:var(--navy);border-radius:8px;padding:3px 9px}
.hab-chip .gsub{font-size:11px}
.habs-resumen .rojo{color:var(--red)}

/* ---------- precios por tipo de habitacion (modal de opcion) ---------- */
.precios-rejilla{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.precios-fila{display:grid;grid-template-columns:1fr 130px;gap:10px;padding:9px 12px;
              align-items:center;border-top:1px solid var(--line)}
.precios-fila:first-child{border-top:none}
.precios-fila.apagada{opacity:.55}
.precios-fila .gsub{display:block;font-size:11.5px}
.precios-fila input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;
                    background:#F8F8FC;font-family:inherit;font-size:13.5px;
                    color:var(--ink);width:100%;text-align:right}

/* Aviso de cotizacion a medias */
.incompleta{color:var(--amber);font-size:11.5px;font-weight:600}
.dif.incompleta{display:block;margin-top:3px}
.dinero .fila.aviso-medio{color:var(--amber);font-size:12px;border:none;padding-top:0}

/* ---------- zonas dentro de una estancia ----------
   Seis colores fijos. La zona se elige en la estancia y cada hotel se
   asigna a una: asi los de Ruka salen juntos y con el mismo color. */
:root{
  --z0:#2B6CB0; --z0s:#EAF2FD;
  --z1:#1E9E6A; --z1s:#E6F7EF;
  --z2:#B7791F; --z2s:#FDF3DC;
  --z3:#7C3AED; --z3s:#F1EAFE;
  --z4:#D6336C; --z4s:#FDE8EE;
  --z5:#8A8CA3; --z5s:#F0F0F6;
}
.zona-cab{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13px;
          border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zona-cab b{color:var(--navy);font-size:13.5px}
.zona-cab.z0{background:var(--z0s)} .zona-cab.z1{background:var(--z1s)}
.zona-cab.z2{background:var(--z2s)} .zona-cab.z3{background:var(--z3s)}
.zona-cab.z4{background:var(--z4s)} .zona-cab.z5{background:var(--z5s)}

.zona-punto{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}
.zona-punto.z0{background:var(--z0)} .zona-punto.z1{background:var(--z1)}
.zona-punto.z2{background:var(--z2)} .zona-punto.z3{background:var(--z3)}
.zona-punto.z4{background:var(--z4)} .zona-punto.z5{background:var(--z5)}

/* La franja de color a la izquierda de cada hotel de esa zona */
.opcion.enzona{border-left:4px solid transparent}
.opcion.enzona.z0{border-left-color:var(--z0)} .opcion.enzona.z1{border-left-color:var(--z1)}
.opcion.enzona.z2{border-left-color:var(--z2)} .opcion.enzona.z3{border-left-color:var(--z3)}
.opcion.enzona.z4{border-left-color:var(--z4)} .opcion.enzona.z5{border-left-color:var(--z5)}

/* Rejilla de zonas del modal de estancia */
.zonas-rejilla{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.zonas-fila{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.zonas-fila:first-child{border-top:none}
.zonas-fila input[type=text]{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
                             background:#fff;font-family:inherit;font-size:13.5px;color:var(--ink)}

/* Cambiar la zona de un hotel sin abrir su ficha */
.cambiar-zona{display:flex;gap:5px;align-items:center;margin-top:4px}
.cambiar-zona select{border:1px solid var(--line);border-radius:8px;padding:5px 7px;
                     background:#F8F8FC;font-family:inherit;font-size:11.5px;
                     color:var(--muted);max-width:120px}
.cambiar-zona .btn{padding:5px 8px;font-size:11px}

/* Aviso dentro de una estancia a la que le falta configurar
   habitaciones o zonas. Sin esto no hay forma de saber que esas
   casillas existen: viven dentro del modal de la estancia. */
.estancia-config{display:flex;gap:14px;align-items:center;justify-content:space-between;
                 background:var(--amber-soft);border-top:1px solid var(--line);
                 border-bottom:1px solid var(--line);padding:12px 18px;font-size:12.5px;
                 line-height:1.5;color:var(--ink)}
.estancia-config b{color:var(--navy)}
.estancia-config .btn{flex-shrink:0}

/* Boton de anadir filas a una rejilla (zonas, tipos de habitacion) */
.anadir-fila{margin-top:8px}

/* Donde duerme el team leader, dentro del modal de la estancia */
.tl-cama{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;
         background:var(--navy-soft);border-radius:10px;padding:10px 14px;font-size:13px}
.tl-cama-t{font-weight:600;color:var(--navy)}
.tl-cama select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;
                background:#fff;font-family:inherit;font-size:13px;color:var(--ink)}
.tl-cama label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.tl-cama input{width:70px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
               background:#fff;font-family:inherit;font-size:13px;color:var(--ink)}

/* La linea del team leader en el bloque de precio */
.dinero .fila.tl-fila{border-top:1px dashed var(--line);padding-top:8px}
.dinero .fila.tl-fila .gsub{display:block;font-size:11.5px}

/* La rejilla de tramos pasa a cuatro columnas: se le ha sumado el markup */
.tramos-cab,.tramos-fila{grid-template-columns:1.4fr .8fr 1fr .9fr}

/* Precio y margen por tramo */
.tabla-tramos .gsub{display:block;font-size:11px;line-height:1.35;margin-top:2px}
.tabla-tramos .gsub.rojo{color:var(--red)}
.total-margen{display:block;margin-top:6px;font-weight:400;color:var(--green)}
.total-margen b{color:var(--green)}

/* Desglose del team leader: de donde sale su total */
.tl-detalle{margin:2px 0 0 14px;padding-left:12px;border-left:2px solid rgba(255,255,255,.18)}
.tl-detalle .fila{font-size:12px;opacity:.9}
.tl-detalle .gsub{display:block;font-size:11px;line-height:1.35}

/* ---------- vuelos ----------
   Cuatro columnas en vez de seis: aqui no hay foto ni total de
   estancia, y en cambio los horarios necesitan sitio. */
.opcion.vuelo{grid-template-columns:1fr 150px 120px 118px}
.vuelo-datos{min-width:0}
.trayectos{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.trayecto{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:13px}
.trayecto-t{background:var(--navy-soft);color:var(--navy);border-radius:6px;
            padding:1px 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;
            letter-spacing:.05em}
.trayecto b{color:var(--navy)}
.trayecto .gsub{font-size:11.5px}

/* Ida y vuelta dentro del formulario */
.bloque-vuelo{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.bloque-vuelo-t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
                color:var(--pink);font-weight:700;margin-bottom:8px}

/* Interruptor de si el viaje lleva vuelos */
.interruptor{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;
             color:var(--navy);font-size:14px}
.interruptor input{width:18px;height:18px;accent-color:var(--pink);cursor:pointer}

@media (max-width:900px){
  .opcion.vuelo{grid-template-columns:1fr}
}

/* ---------- el latido del aviso urgente ----------
   Late tres veces al abrir la ficha y se para. Lo justo para que el ojo
   vaya ahi al entrar, sin quedarse moviendose toda la tarde. */
@keyframes late-aviso{
  0%,100%{transform:scale(1);box-shadow:0 4px 20px rgba(220,38,38,.18)}
  50%{transform:scale(1.015);box-shadow:0 6px 30px rgba(220,38,38,.42)}
}
@keyframes late-icono{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.22)}
}
.tarjeta-aviso.late{animation:late-aviso 1.05s ease-in-out 3;transform-origin:center left}
.tarjeta-aviso.late .tarjeta-aviso-icono{animation:late-icono 1.05s ease-in-out 3}

/* A quien le moleste el movimiento (o lo tenga desactivado en su
   sistema) se le deja la tarjeta quieta: el color ya avisa. */
@media (prefers-reduced-motion: reduce){
  .tarjeta-aviso.late,
  .tarjeta-aviso.late .tarjeta-aviso-icono{animation:none}
}

/* ---------- en que grupos se usa un tramo (Ajustes) ---------- */
.tramo-grupos{border-top:1px solid var(--line);padding:12px 16px}
.tramo-grupos summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:13px;
                      display:flex;align-items:center;gap:8px}
.tramo-grupos summary::marker{color:var(--muted)}
.tramo-grupos .cnt{background:var(--navy-soft);color:var(--navy);border-radius:999px;
                   padding:1px 9px;font-size:11px}
.tramo-grupos[open] summary{margin-bottom:10px}
.lista-grupos{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;
              max-height:260px;overflow-y:auto}
.grupo-check{display:flex;align-items:flex-start;gap:9px;padding:7px 10px;border-radius:8px;
             background:#F8F8FC;cursor:pointer;font-size:13px}
.grupo-check:hover{background:var(--navy-soft)}
.grupo-check input{margin-top:2px;accent-color:var(--pink);cursor:pointer}
.grupo-check b{color:var(--pink);font-size:12px;letter-spacing:.04em;margin-right:4px}
.grupo-check .gsub{display:block;font-size:11.5px}

/* Añadir un tramo desde la ficha del grupo */
.anadir-tramo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
              background:#F8F8FC;border-radius:10px;padding:10px 12px;font-size:13px}
.anadir-tramo label{color:var(--muted);font-size:12.5px}
.anadir-tramo select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;
                     background:#fff;font-family:inherit;font-size:13px;color:var(--ink)}
.tramos-vacio{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}

/* ==========================================================
   PORTADA · LO QUE TOCA
   Los pendientes de todos los grupos juntos. Antes solo se veían
   entrando grupo por grupo, que es como se olvidan.
   ========================================================== */
.tareas{margin-bottom:22px}
.tareas-cab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
            flex-wrap:wrap;padding:18px 20px 0}
.tareas-cab .ptitulo{border-bottom:none;padding-bottom:0;margin-bottom:0}
.tareas-cuenta{font-size:12.5px;color:var(--muted)}
.tareas-cuenta b.vencido{color:var(--red)}

.tarea{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;
       border-top:1px solid var(--line)}
.tareas-cab + .tarea{border-top:none;margin-top:10px}
.tarea:hover{background:#FBFBFE}
.tarea-que{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.tarea-que a{color:var(--navy);font-weight:600}
.tarea-que a:hover{color:var(--pink)}
.tarea-cuando{flex-shrink:0;text-align:right;font-size:12px;padding-top:2px}
.tarea-cuando em{font-style:normal;font-weight:600;color:var(--muted)}
.tarea-cuando em.vencido{color:var(--red)}
.tarea-cuando em.hoy{color:var(--pink)}
.tarea-cuando em.sin-fecha{font-weight:400}
.tarea.vencida{background:var(--red-soft)}
.tarea.vencida:hover{background:#FBDDE7}
.tarea.vencida .marcar{border-color:var(--red);color:var(--red)}
.tarea .marcar{margin-top:1px}

.tareas-mas{border-top:1px solid var(--line)}
.tareas-mas summary{cursor:pointer;padding:11px 20px;font-size:12.5px;color:var(--navy);
                    font-weight:600;list-style:none}
.tareas-mas summary::-webkit-details-marker{display:none}
.tareas-mas summary::before{content:'▸ ';color:var(--muted)}
.tareas-mas[open] summary::before{content:'▾ '}
.tareas-mas summary:hover{color:var(--pink)}
.tareas-pie{padding:11px 20px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}

/* ==========================================================
   PORTADA · EL AÑO POR DELANTE
   Doce meses con los viajes colocados encima. Los meses no miden lo
   mismo: cada columna ocupa los días que tiene, o las barras no
   cuadrarían con la cabecera.
   ========================================================== */
.calendario{margin-bottom:22px;padding-bottom:6px}
.cal-scroll{overflow-x:auto;padding:14px 20px 6px}
.cal-tabla{min-width:660px}

.cal-fila{display:flex;align-items:center;gap:12px;min-height:30px}
.cal-quien{width:210px;flex-shrink:0;font-size:12.5px;line-height:1.25;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-quien a{color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis}
.cal-quien a:hover{color:var(--pink)}
.cal-quien .gid{margin-right:6px}
.cal-pista{position:relative;flex:1;height:22px}

.cal-cabecera{margin-bottom:4px}
.cal-cabecera .cal-pista{height:20px}
.cal-mes{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:5px;
         padding-left:6px;font-size:11px;color:var(--muted);text-transform:uppercase;
         letter-spacing:.04em;overflow:hidden}
.cal-mes i{font-style:normal;font-weight:700;color:var(--navy);font-size:10px}

/* Las rayas de los meses van una sola vez, detrás de todas las filas.
   Puestas fila a fila serían cientos de divisiones para nada. */
.cal-cuerpo{position:relative}
.cal-rejilla{position:absolute;left:222px;right:0;top:0;bottom:0;pointer-events:none}
.cal-rejilla i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.cal-rejilla i.enero{background:#D9D9E8}
.cal-rejilla .cal-hoy{position:absolute;top:0;bottom:0;width:2px;background:var(--pink);opacity:.55}

.cal-cuerpo .cal-fila{position:relative;z-index:1}
.cal-cuerpo .cal-fila:hover{background:rgba(35,36,99,.03);border-radius:8px}

.cal-barra{position:absolute;top:3px;height:16px;border-radius:8px;display:flex;
           align-items:center;padding:0 7px;font-size:10.5px;font-weight:600;
           white-space:nowrap;overflow:hidden;min-width:8px}
.cal-barra span{opacity:.85}
.cal-barra:hover{filter:brightness(.94)}
/* Un viaje que ya venía de antes, o que se sale por el otro lado, se
   corta en recto para que se vea que sigue más allá. */
.cal-barra.abierta-izq{border-top-left-radius:0;border-bottom-left-radius:0}
.cal-barra.abierta-der{border-top-right-radius:0;border-bottom-right-radius:0}

.cal-sueltos{padding:12px 20px 14px;margin-top:6px;border-top:1px solid var(--line);
             font-size:12.5px;color:var(--muted);line-height:1.7}
.cal-sueltos b{color:var(--navy);font-weight:600;margin-right:4px}
.cal-sueltos a{color:var(--navy);font-weight:600;margin-right:2px}
.cal-sueltos a:hover{color:var(--pink)}

/* ==========================================================
   BUSCADOR GLOBAL
   Por qué ha salido este grupo, cuando la coincidencia no está en su
   nombre sino en un hotel o un servicio de dentro.
   ========================================================== */
.coincide{margin-top:5px;display:flex;flex-wrap:wrap;gap:6px}
.coincide span{background:var(--navy-soft);color:var(--navy);border-radius:8px;
               padding:2px 8px;font-size:11.5px}
.coincide b{font-weight:600;color:var(--muted);margin-right:3px}

@media(max-width:760px){
  .tarea{flex-wrap:wrap}
  .tarea-cuando{text-align:left;padding-left:34px;width:100%}
  .cal-quien{width:140px}
  .cal-rejilla{left:152px}
}

/* ==========================================================
   HISTORIAL DE UN GRUPO
   Se llevaba escribiendo desde la fase 3 y no se leia en ninguna
   parte. Agrupado por dias, con el valor viejo tachado al lado del
   nuevo para que se vea el salto de un vistazo.
   ========================================================== */
.historial{padding:4px 18px 6px}
.hist-dia{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
          letter-spacing:.05em;margin:18px 0 8px;padding-bottom:6px;
          border-bottom:1px solid var(--line)}
.hist-dia:first-child{margin-top:6px}

.hist-fila{display:flex;gap:14px;align-items:flex-start;padding:9px 0;font-size:13px}
.hist-fila + .hist-fila{border-top:1px solid #F6F6FA}
.hist-hora{width:42px;flex-shrink:0;color:var(--muted);font-size:11.5px;padding-top:2px;
           font-variant-numeric:tabular-nums}
.hist-que{flex:1;min-width:0;line-height:1.5}
.hist-que b{color:var(--navy);font-weight:600}
.hist-quien{width:90px;flex-shrink:0;text-align:right;color:var(--muted);font-size:12px;
            padding-top:1px}

/* En qué parte del grupo pasó. Cada zona con su color, los mismos que
   usan las pestañas, para no inventar una clave de lectura nueva. */
.hist-ambito{display:inline-block;border-radius:7px;padding:2px 8px;font-size:10.5px;
             font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-right:7px;
             background:var(--navy-soft);color:var(--navy);vertical-align:1px}
.hist-opcion{background:var(--blue-soft);color:var(--blue)}
.hist-servicio,.hist-servicio_opcion{background:var(--green-soft);color:var(--green)}
.hist-vuelo{background:var(--pink-soft);color:var(--pink)}

.hist-valores{margin-top:3px;display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
              font-size:12.5px}
.hist-viejo{color:var(--muted);text-decoration:line-through}
.hist-flecha{color:var(--muted)}
.hist-nuevo{color:var(--ink);font-weight:600}
.hist-pie{padding:12px 18px 16px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}

@media(max-width:760px){
  .hist-fila{flex-wrap:wrap}
  .hist-quien{width:auto;text-align:left;padding-left:56px}
}

/* ==========================================================
   DUPLICAR UN GRUPO ARCHIVADO
   Sale solo en la ficha de un grupo archivado: es ahí donde se mira
   el viaje del año pasado para volver a montarlo.
   ========================================================== */
.duplicar{display:flex;gap:20px;align-items:center;justify-content:space-between;
          flex-wrap:wrap;padding:16px 20px;margin-bottom:18px;border-left:4px solid var(--pink)}
.duplicar b{color:var(--navy);font-size:14px}
.duplicar .gsub{max-width:520px;margin-top:4px;line-height:1.5}
.duplicar-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.duplicar-form label{font-size:12px;color:var(--muted);font-weight:600}
.duplicar-form input{border:1px solid var(--line);border-radius:9px;padding:8px 11px;
                     background:#F8F8FC;font-family:inherit;font-size:13.5px;color:var(--ink)}
.duplicar-form input:focus{outline:none;border-color:var(--pink);background:#fff}

/* ==========================================================
   PAPELERA (Ajustes)
   ========================================================== */
.basura{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
        flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.basura:last-child{border-bottom:none}
.basura:hover{background:#FBFBFE}
.basura-que{flex:1;min-width:240px}
.basura-que b{color:var(--navy);font-size:14px}
.basura-que .gsub{margin-top:3px}
.basura-tipo{display:inline-block;border-radius:7px;padding:2px 8px;font-size:10.5px;
             font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-right:8px;
             background:var(--navy-soft);color:var(--navy);vertical-align:1px}
.basura-grupo{background:var(--pink-soft);color:var(--pink)}
.basura-estancia{background:var(--blue-soft);color:var(--blue)}
.basura-opcion{background:var(--amber-soft);color:var(--amber)}
.basura-proveedor{background:var(--green-soft);color:var(--green)}
.basura-botones{display:flex;gap:8px;flex-shrink:0;align-items:center}

/* ==========================================================
   HISTÓRICO DE COTIZACIONES DE UN PROVEEDOR
   Los datos estaban guardados desde la fase 1 y no se enseñaban.
   Lo importante de cada línea son tres cosas: cuándo, cuánto, y por
   qué se descartó si no se le cogió.
   ========================================================== */
.cot-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;
             margin-bottom:16px}
.cot-resumen div{background:var(--navy-soft);border-radius:10px;padding:10px 12px}
.cot-resumen b{display:block;color:var(--navy);font-size:19px;font-weight:800;line-height:1.1}
.cot-resumen span{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.3}

.cot-bloque{border-top:1px solid var(--line);margin-top:4px}
.cot-bloque summary{cursor:pointer;padding:12px 0 10px;font-size:12px;font-weight:700;
                    color:var(--navy);text-transform:uppercase;letter-spacing:.05em;
                    list-style:none;display:flex;align-items:center;gap:8px}
.cot-bloque summary::-webkit-details-marker{display:none}
.cot-bloque summary::before{content:'▾';color:var(--muted);font-size:11px}
.cot-bloque:not([open]) summary::before{content:'▸'}
.cot-bloque summary:hover{color:var(--pink)}

.cot{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
     border-top:1px solid #F6F6FA;font-size:12.5px}
.cot-cuando{width:38px;flex-shrink:0;color:var(--muted);font-weight:700;font-size:12px;
            padding-top:1px;font-variant-numeric:tabular-nums}
.cot-que{flex:1;min-width:0;line-height:1.5}
.cot-que a{color:var(--navy);font-weight:600}
.cot-que a:hover{color:var(--pink)}
.cot-que .badge{margin-left:5px;font-size:10px;padding:2px 7px}
.cot-precio{flex-shrink:0;text-align:right;min-width:96px;line-height:1.3}
.cot-precio b{color:var(--navy);font-size:14px;font-weight:700;display:block}
.cot-precio span{display:block;color:var(--muted);font-size:11px}
.cot-precio .corona{display:inline-block;margin-top:4px}
.cot-precio .cot-parcial{color:var(--amber);font-weight:600}

/* La cotización que se acabó cogiendo: es la referencia de lo que de
   verdad se pagó, así que se distingue de las que solo se miraron. */
.cot.elegida{background:var(--green-soft);border-radius:10px;padding:11px 12px;
             margin:4px 0;border-top-color:transparent}
.cot.elegida .cot-cuando,.cot.elegida .cot-precio span{color:#4E8A72}

.cot-motivo{margin-top:4px;color:var(--red);font-size:11.5px;line-height:1.45}

/* Con siete servicios cotizados la columna se hacía interminable, así
   que cada bloque se queda en una caja de altura fija y se desliza
   dentro. El hueco de la derecha es para que la barra no se coma el
   precio. Cada bloque se desliza por su cuenta: el de alojamiento y el
   de servicios no arrastran uno al otro. */
.cot-lista{max-height:430px;overflow-y:auto;padding-right:8px;
           overscroll-behavior:contain;scrollbar-width:thin;
           scrollbar-color:#D5D5E4 #F4F4F9}
.cot-lista::-webkit-scrollbar{width:8px}
.cot-lista::-webkit-scrollbar-track{background:#F4F4F9;border-radius:99px}
.cot-lista::-webkit-scrollbar-thumb{background:#D5D5E4;border-radius:99px}
.cot-lista::-webkit-scrollbar-thumb:hover{background:var(--pink)}

/* ==========================================================
   DIVISA DE ORIGEN Y PDF DE LA COTIZACIÓN
   El euro sigue siendo lo que manda; esto es la memoria de cómo se
   llegó a él y el papel que lo respalda.
   ========================================================== */
.bloque-plegable{border:1px solid var(--line);border-radius:10px;padding:0 14px;
                 margin-bottom:14px;background:#FBFBFE}
.bloque-plegable summary{cursor:pointer;padding:11px 0;font-size:13px;font-weight:600;
                         color:var(--navy);list-style:none}
.bloque-plegable summary::-webkit-details-marker{display:none}
.bloque-plegable summary::before{content:'▸ ';color:var(--muted)}
.bloque-plegable[open] summary::before{content:'▾ '}
.bloque-plegable summary:hover{color:var(--pink)}
.bloque-plegable[open]{padding-bottom:8px}

.adjuntos{display:flex;flex-direction:column;gap:8px}
.adjunto{position:relative;background:#F8F8FC;border:1px solid var(--line);
         border-radius:10px;padding:10px 34px 10px 12px}
.adjunto-nombre{color:var(--navy);font-weight:600;font-size:13px;word-break:break-word}
.adjunto-nombre::before{content:'PDF';background:var(--red-soft);color:var(--red);
                        border-radius:5px;padding:1px 5px;font-size:9.5px;font-weight:700;
                        margin-right:6px;vertical-align:1px;letter-spacing:.04em}
.adjunto-nombre:hover{color:var(--pink)}
.adjunto-resumen{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink);
                 border-top:1px solid var(--line);padding-top:6px}
.adjunto .quitar{position:absolute;top:8px;right:8px}

/* La divisa, allí donde se enseña un precio */
.en-divisa{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.4}
.chip-pdf{display:inline-block;background:var(--red-soft);color:var(--red);border-radius:6px;
          padding:1px 6px;font-size:10px;font-weight:700;letter-spacing:.04em;
          margin-left:5px;vertical-align:1px}
a.chip-pdf:hover{background:var(--red);color:#fff}

/* ==========================================================
   PAQUETES DE PROVEEDOR
   El viaje entero en un precio, enfrentado a lo mismo pedido pieza a
   pieza. Vive dentro de la Comparativa porque es ahí donde se decide.
   ========================================================== */
.paquetes{margin:24px 18px 18px;padding-top:20px;border-top:2px solid var(--line)}
.paquetes-cab{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
              flex-wrap:wrap;margin-bottom:14px}
.paquetes-cab .ptitulo{border-bottom:none;padding-bottom:0;margin-bottom:4px}
.paquetes-vacio{background:#F8F8FC;border-radius:12px;padding:18px 20px;font-size:13px;
                color:var(--muted);line-height:1.6}

.paquete{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;
         background:var(--white)}
.paquete.ganadora{border-color:var(--green);background:var(--green-soft)}
.paquete.descartada{opacity:.6}

.paquete-cab{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
             flex-wrap:wrap}
.paquete-n{font-size:15px;font-weight:700;color:var(--navy);display:flex;align-items:center;
           gap:7px;flex-wrap:wrap}
.paquete-precio{flex-shrink:0;text-align:right;line-height:1.3}
.paquete-precio b{display:block;color:var(--navy);font-size:19px;font-weight:800}
.paquete-precio span{display:block;color:var(--muted);font-size:11.5px}

/* El duelo: paquete contra piezas sueltas. Es el corazón de la tanda,
   así que se lee de un vistazo y sin tener que hacer cuentas. */
.duelo{display:grid;grid-template-columns:1fr auto 1fr 1.1fr;gap:14px;align-items:center;
       margin:14px 0 6px;padding:14px;background:#F8F8FC;border-radius:12px}
.paquete.ganadora .duelo{background:rgba(255,255,255,.7)}
.duelo-lado{text-align:center}
.duelo-lado > span:first-child{display:block;font-size:11px;color:var(--muted);
                               text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.duelo-lado b{display:block;font-size:21px;font-weight:800;color:var(--navy);
              line-height:1.2;margin:3px 0 1px;font-variant-numeric:tabular-nums}
.duelo-lado .gsub{font-size:11px}
.duelo-vs{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.duelo-saldo{text-align:center;border-left:1px solid var(--line);padding-left:14px}
.duelo-saldo b{display:block;font-size:21px;font-weight:800;line-height:1.2;
               font-variant-numeric:tabular-nums}
.duelo-saldo span{display:block;font-size:11px;color:var(--muted);line-height:1.35}
.duelo-saldo.gana b{color:var(--green)}
.duelo-saldo.pierde b{color:var(--red)}
.duelo-nota{margin:0 0 4px;font-size:11.5px;color:var(--muted);line-height:1.5}
.duelo-falta{margin:12px 0 4px;padding:11px 14px;background:var(--amber-soft);
             border-radius:10px;font-size:12.5px;color:var(--amber);line-height:1.5}

.paquete-detalle{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--ink)}
.paquete-detalle b{color:var(--navy);font-weight:600}
.paquete-detalle.no b{color:var(--muted)}
.paquete-detalle.motivo{color:var(--red)}

.paquete-pie{display:flex;gap:14px;align-items:center;justify-content:space-between;
             flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.paquete.ganadora .paquete-pie{border-top-color:rgba(30,158,106,.25)}
.paquete-botones{display:flex;gap:8px;margin-left:auto}

/* Las casillas de qué cubre, en el formulario */
.cubre{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.cubre-item{display:flex;gap:9px;align-items:flex-start;background:#F8F8FC;
            border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.cubre-item:hover{border-color:var(--pink)}
.cubre-item input{margin-top:2px;flex-shrink:0}
.cubre-item b{display:block;font-size:13px;color:var(--navy);font-weight:600}
.cubre-item .gsub{display:block;font-size:11.5px;line-height:1.4}

@media(max-width:760px){
  .duelo{grid-template-columns:1fr;gap:10px}
  .duelo-vs{text-align:center}
  .duelo-saldo{border-left:none;border-top:1px solid var(--line);padding:12px 0 0}
  .paquetes{margin-left:12px;margin-right:12px}
}

/* ==========================================================
   DOSSIER DEL GRUPO
   La hoja imita un folio: fondo blanco, ancho de lectura y
   tipografía algo mayor. Al imprimir se va todo lo del panel y
   queda solo el folio.
   ========================================================== */
.dossier-barra{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
               flex-wrap:wrap;margin-bottom:20px}
.dossier-barra h1{margin:6px 0 4px;font-size:22px;color:var(--navy)}
.dossier-botones{display:flex;gap:8px;flex-wrap:wrap}


.hoja{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);
      max-width:820px;margin:0 auto 30px;padding:0}
.hoja-cuerpo{padding:38px 46px 46px;font-size:15px;line-height:1.7;color:var(--ink)}

.hoja-cuerpo h1{font-size:26px;color:var(--navy);margin:0 0 6px;line-height:1.25}
.hoja-cuerpo h2{font-size:17px;color:var(--pink);margin:30px 0 12px;
                padding-bottom:7px;border-bottom:1px solid var(--line)}
.hoja-cuerpo h3{font-size:15px;color:var(--navy);margin:20px 0 6px}
.hoja-cuerpo p{margin:0 0 12px}
.hoja-cuerpo ul,.hoja-cuerpo ol{margin:0 0 14px;padding-left:22px}
.hoja-cuerpo li{margin-bottom:7px}
.hoja-cuerpo img{max-width:100%;height:auto;border-radius:8px}

.hoja-entradilla{color:var(--muted);font-size:14px;margin-bottom:22px !important}
.hoja-nota{background:var(--navy-soft);border-radius:10px;padding:12px 16px;font-size:13.5px}
.hoja-menor{color:var(--muted);font-size:13px;margin:2px 0 !important}

.hoja-estancia{padding:14px 0;border-bottom:1px solid var(--line)}
.hoja-estancia:last-of-type{border-bottom:none}
.hoja-estancia h3{display:flex;gap:10px;align-items:baseline;margin-top:0}
.hoja-estancia h3 span{color:var(--muted);font-size:12.5px;font-weight:400}
.hoja-fechas{color:var(--muted);font-size:13px;margin-bottom:6px !important}
.hoja-hotel{margin-bottom:2px !important}

.hoja-lista{list-style:none;padding-left:0 !important}
.hoja-lista li{padding-left:18px;position:relative}
.hoja-lista li::before{content:'·';position:absolute;left:4px;color:var(--pink);
                       font-weight:700;font-size:18px;line-height:1.2}
.hoja-lista .hoja-menor{display:block}

.hoja-tabla{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14px}
.hoja-tabla th,.hoja-tabla td{padding:9px 10px;text-align:left;
                              border-bottom:1px solid var(--line)}
.hoja-tabla thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
                     color:var(--muted);font-weight:600}
.hoja-tabla.precios td:last-child{font-weight:700;color:var(--navy);
                                  font-variant-numeric:tabular-nums}

/* La caja con los datos en crudo no se ve, pero tiene que existir para
   poder seleccionarla cuando el navegador no deja copiar solo. */
.oculto-del-todo{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Al imprimir ---------- */
@media print{
  body{background:#fff}
  .nav,.dossier-barra,.versiones,.no-imprimir,.aviso{display:none !important}
  .wrap{max-width:none;padding:0}
  .hoja{box-shadow:none;border-radius:0;max-width:none;margin:0}
  .hoja-cuerpo{padding:0;font-size:11.5pt;line-height:1.55}
  .hoja-cuerpo h1{font-size:20pt}
  .hoja-cuerpo h2{font-size:13pt;margin-top:18pt}
  .hoja-cuerpo h3{font-size:11.5pt}
  /* Que no se parta una estancia entre dos folios. */
  .hoja-estancia,.hoja-tabla{break-inside:avoid;page-break-inside:avoid}
  .hoja-cuerpo h2{break-after:avoid;page-break-after:avoid}
  a{text-decoration:none;color:inherit}
}

/* Los botones de la cabecera de la ficha: dossier, Excel y archivar.
   Iban sueltos y sin estilo desde la fase 3; ahora que son cuatro
   necesitan agruparse y saber partirse en dos líneas. */
.ficha-head-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;
                     flex-shrink:0;justify-content:flex-end;max-width:340px}




/* ==========================================================
   CON CUÁNTAS PLAZAS SALE EL VIAJE
   Va plegado y con la respuesta en el propio título: si todo va bien,
   se lee de un vistazo y no hace falta abrirlo. Se abre solo cuando el
   viaje no sale a cuenta ni lleno, que es cuando urge mirarlo.
   ========================================================== */
.pmuerto{margin-top:16px;border-top:1px solid var(--line);padding-top:4px}
.pmuerto summary{cursor:pointer;padding:10px 0;font-size:12px;font-weight:700;
                 color:var(--navy);text-transform:uppercase;letter-spacing:.05em;
                 list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pmuerto summary::-webkit-details-marker{display:none}
.pmuerto summary::before{content:'▸';color:var(--muted);font-size:11px}
.pmuerto[open] summary::before{content:'▾'}
.pmuerto summary:hover{color:var(--pink)}

.pm-clave{background:var(--green-soft);color:var(--green);border-radius:7px;
          padding:2px 9px;font-size:11px;letter-spacing:0;text-transform:none}
.pm-clave.malo{background:var(--red-soft);color:var(--red)}

.pm-tabla{margin-top:4px}
.pm-tabla td{vertical-align:top}
.pm-tabla .gsub{display:block;font-size:11px;line-height:1.35}
.pm-nota{font-size:11.5px;color:var(--muted);line-height:1.4}
.pm-tabla .pm-pierde{background:var(--red-soft)}
.pm-tabla .pm-limite{background:var(--green-soft)}
.pm-tabla .pm-limite .pm-nota b{color:var(--green)}

/* ==========================================================
   SIMULADOR · QUÉ PASARÍA SI
   Todo va por la barra de direcciones y no toca la base: se puede
   trastear sin miedo. El aviso de arriba deja claro que lo que se está
   viendo no es lo guardado.
   ========================================================== */
.simulando{display:flex;gap:20px;align-items:center;justify-content:space-between;
           flex-wrap:wrap;background:var(--navy-soft);border-left:5px solid var(--navy);
           border-radius:var(--r);padding:16px 20px;margin-bottom:18px}
.sim-que{min-width:200px}
.sim-que b{color:var(--navy);font-size:14px}
.sim-que .gsub{margin-top:3px;line-height:1.5;max-width:380px}

.sim-cuentas{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sim-cuentas > div{text-align:center}
.sim-cuentas span{display:block;font-size:10.5px;color:var(--muted);
                  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.sim-cuentas b{display:block;font-size:17px;font-weight:800;color:var(--navy);
               line-height:1.25;font-variant-numeric:tabular-nums}
.sim-flecha{color:var(--muted);font-size:18px}
.sim-saldo{border-left:1px solid #D5D5E4;padding-left:16px}
.sim-saldo span{text-transform:none;letter-spacing:0;font-weight:400;margin-top:2px}
.sim-saldo.gana b{color:var(--green)}
.sim-saldo.pierde b{color:var(--red)}

/* El enlace de probar, en cada fila de la comparativa */
.probar{display:inline-block;margin-left:6px;background:var(--white);
        border:1px solid var(--line);border-radius:6px;padding:1px 7px;
        font-size:10.5px;font-weight:600;color:var(--muted);vertical-align:1px}
.probar:hover{border-color:var(--navy);color:var(--navy)}
.quitar-probar{background:var(--navy);border-color:var(--navy);color:#fff}
.quitar-probar:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.ctabla tr.probandola{background:var(--navy-soft)}

@media(max-width:760px){
  .sim-cuentas{gap:10px}
  .sim-saldo{border-left:none;padding-left:0;border-top:1px solid #D5D5E4;padding-top:8px;width:100%}
}

/* ==========================================================
   EL PANEL EN EL MÓVIL

   No es una versión aparte: es el mismo panel apretado. Lo que se
   arregla aquí es lo que de verdad estorba con el teléfono en la mano,
   negociando fuera de la oficina.

   El corte está en 560 px, que es un móvil en vertical. Entre 560 y
   1050 mandan las reglas de arriba, que ya reparten las columnas.
   ========================================================== */
@media(max-width:560px){

  /* Los márgenes se comen media pantalla si no se recortan. */
  .wrap{padding:16px 12px 50px}
  .nav-in{padding:11px 12px;gap:12px}
  .panel,.card{border-radius:12px}
  .panel{padding:16px 14px}

  /* La barra de arriba: el nombre de la usuaria sobra, con la inicial
     basta. Lo que no puede faltar es el enlace de salir. */
  .nav-links{gap:2px;order:3;width:100%;overflow-x:auto}
  .nav-links a{padding:8px 13px;font-size:13.5px;white-space:nowrap}
  .user{margin-left:auto;gap:7px}
  .user > div{display:none}

  /* iOS amplía la página al tocar un campo con letra menor de 16 px, y
     luego no vuelve. Con 16 px se queda quieto. */
  .field input,.field select,.field textarea,
  .habs-fila input,.precios-fila input,.duplicar-form input{font-size:16px}

  /* Los modales, a pantalla completa: en 375 px no hay sitio para
     márgenes bonitos. */
  .mascara{padding:0}
  .modal{width:100%;border-radius:0;padding:18px 14px;margin:0;min-height:100%}
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn{width:100%;text-align:center}
  .modal-foot .btn-borrar{margin-right:0}

  /* Las tablas anchas se deslizan en vez de aplastarse. */
  .tabla-tramos{display:block;overflow-x:auto;white-space:nowrap}
  .tabla-tramos .gsub{white-space:normal}
  .pm-tabla td:last-child{display:none}   /* la nota, que se lee en el color */

  /* La ficha del grupo */
  .ficha-head{padding:16px 14px}
  .ficha-head h1{font-size:19px}
  .ficha-head-acciones{max-width:none;width:100%;justify-content:flex-start}
  .tab{padding:13px 14px;font-size:13px}

  /* Las opciones: la foto más pequeña deja sitio al nombre. */
  .opcion{grid-template-columns:56px 1fr;gap:9px;padding:14px 14px}
  .opcion-foto{width:56px;height:44px}
  .opcion-botones{flex-wrap:wrap}
  .opcion-botones .btn{flex:1;text-align:center}

  /* Portada */
  .toolbar{gap:8px}
  .toolbar .btn{flex:1;text-align:center}
  .tarea{padding:12px 14px}
  .tareas-cab,.tareas-pie,.tareas-mas summary{padding-left:14px;padding-right:14px}
  .cal-scroll{padding:12px 14px 6px}

  /* Avisos: el icono redondo se queda arriba y el texto ocupa el ancho. */
  .tarjeta-aviso{padding:14px 15px;gap:12px}
  .tarjeta-aviso-icono{width:28px;height:28px;font-size:14px}
  .tarjeta-aviso-t{font-size:14px}

  /* Proveedores y paquetes */
  .cot-lista{max-height:340px;padding-right:4px}
  .cot-precio{min-width:78px}
  .paquete{padding:14px 14px}
  .paquete-botones{width:100%}
  .paquete-botones .btn{flex:1;text-align:center}

  /* El dossier imprimible */
  .hoja-cuerpo{padding:22px 18px 28px;font-size:14.5px}
  .hoja-cuerpo h1{font-size:21px}
  .dossier-botones{width:100%}
  .dossier-botones .btn{flex:1;text-align:center}

  /* Ajustes */
  .ajuste-fila{flex-direction:column;gap:8px}
  .ajuste-fila .field{width:100%}
  .basura-botones{width:100%}
  .basura-botones .btn{flex:1;text-align:center}

  /* Los botones sueltos, más altos: un dedo no es un ratón. */
  .btn-sm,.btn-xs{padding:9px 13px;font-size:12.5px}
  .marcar{width:26px;height:26px;font-size:13px}
}