/* Boceto de la intranet de Grupo On Travel.
   Mismos colores, tipografía y menú que la demo que gustó al cliente, con lo que pidió el 27/10:
   letra y tarjetas más grandes y menos apelotonado, pensado para pantallas de 27 pulgadas. */

@font-face {
  font-family: "Manrope";
  src: url("../fuentes/manrope-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #F4F6FA; --superficie: #fff;
  --tinta: #0F172A; --tinta2: #334155; --suave: #64748B; --suave2: #94A3B8;
  --linea: #E5E7EB; --linea2: #EEF0F3;
  --acento: #1F4FA8; --acento2: #173E86; --acento-claro: #EAF0FB; --marino: #0B1F45;
  --verde: #0F7A3D; --verde-claro: #E7F8EE; --rojo: #B42318; --rojo-claro: #FEF0EE;
  --ambar: #8A6A12; --ambar-claro: #FEF7E0; --naranja: #B45309; --naranja-claro: #FDF3E1;
  --turquesa: #0E7490; --turquesa-claro: #E2F5F8; --morado: #6D28D9; --morado-claro: #F0EBFE;
  --indigo: #4F46E5; --indigo-claro: #EEF0FF; --rosa: #BE185D; --rosa-claro: #FCE7F3; --gris-claro: #F1F5F9;
  --r-s: 12px; --r: 20px; --r-l: 24px;
  --sombra: 0 1px 2px rgb(15 23 42 / .04), 0 6px 20px rgb(15 23 42 / .05);
  --sombra-alta: 0 16px 48px rgb(15 23 42 / .18);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ancho: 1640px;
  --hueco: 24px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 500 16px/1.55 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--acento); }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #7FA3E8; outline-offset: 2px; }
.ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico.peq { width: 15px; height: 15px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .92em; }
.suave { color: var(--suave); }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--acento); color: #fff; padding: 10px 16px; border-radius: var(--r-s); font-weight: 800; }
.saltar:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Colores de agencia (insignias, avatares y tarjetas de la clave única) */
.c-central { background: #C99A3B; } .c1 { background: #1F4FA8; } .c2 { background: #0E7490; } .c3 { background: #6D28D9; } .c4 { background: #B45309; }
.c5 { background: #0F7A3D; } .c6 { background: #BE185D; } .c7 { background: #334155; } .c8 { background: #4F46E5; }

/* Pares de color para avisos, indicadores y tipos */
.c-azul { --c: var(--acento); --cc: var(--acento-claro); } .c-verde { --c: var(--verde); --cc: var(--verde-claro); }
.c-rojo { --c: var(--rojo); --cc: var(--rojo-claro); } .c-naranja { --c: var(--naranja); --cc: var(--naranja-claro); }
.c-turquesa { --c: var(--turquesa); --cc: var(--turquesa-claro); } .c-morado { --c: var(--morado); --cc: var(--morado-claro); }
.t-webinar { --c: var(--indigo); --cc: var(--indigo-claro); } .t-formacion { --c: var(--turquesa); --cc: var(--turquesa-claro); }
.t-evento { --c: var(--naranja); --cc: var(--naranja-claro); } .t-convencion { --c: var(--rosa); --cc: var(--rosa-claro); }
/* Orígenes de las reservas (B28): Web, WebAG, GOT, Agencia y Grupo */
.o-web { --c: var(--turquesa); } .o-webag { --c: #5BB6CB; } .o-got { --c: var(--acento); } .o-agencia { --c: var(--naranja); } .o-grupo { --c: var(--rosa); }

/* Degradados de las tarjetas grandes (los mismos tonos de la demo) */
.g-azul { --c: #1F4FA8; --c2: #3B6FD0; } .g-indigo { --c: #4F46E5; --c2: #7069F0; } .g-turquesa { --c: #0E7490; --c2: #1795B5; }
.g-naranja { --c: #B45309; --c2: #D9731A; } .g-morado { --c: #6D28D9; --c2: #8B5CF6; } .g-marino { --c: #0B1F45; --c2: #284B8F; }
.g-verde { --c: #0F7A3D; --c2: #1E9B57; } .g-rosa { --c: #BE185D; --c2: #DB3A7E; }

/* ---------- Botones, etiquetas y campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--r-s); border: 1px solid var(--linea); background: #fff; color: var(--tinta); font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--suave2); background: #FAFBFC; }
.btn.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.principal:hover { background: var(--acento2); border-color: var(--acento2); }
.btn.mini { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn.grande { height: 52px; padding: 0 24px; font-size: 16px; }
.btn.claro { background: transparent; color: #fff; border-color: rgb(255 255 255 / .45); }
.btn.claro:hover { background: rgb(255 255 255 / .1); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-ico, .btn-x { width: 40px; height: 40px; border-radius: var(--r-s); border: 1px solid var(--linea); background: #fff; display: grid; place-items: center; }
.btn-x { border: 0; background: var(--gris-claro); }
.btn-ico:hover, .btn-x:hover { background: var(--acento-claro); color: var(--acento); }

.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--gris-claro); color: var(--tinta2); white-space: nowrap; line-height: 1.3; }
.tag.ok { background: var(--verde-claro); color: var(--verde); } .tag.mal { background: var(--rojo-claro); color: var(--rojo); }
.tag.amb { background: var(--ambar-claro); color: var(--ambar); } .tag.az { background: var(--acento-claro); color: var(--acento); }
.tag.mor { background: var(--morado-claro); color: var(--morado); } .tag.grande { font-size: 14px; padding: 8px 14px; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, currentColor); flex: 0 0 9px; }
.punto.ok { background: var(--verde); } .punto.amb { background: #D6A21E; } .punto.gris { background: var(--suave2); }
.punto.late { animation: latir 1.8s infinite; }
@keyframes latir { 0% { box-shadow: 0 0 0 0 rgb(15 122 61 / .45); } 70% { box-shadow: 0 0 0 8px rgb(15 122 61 / 0); } 100% { box-shadow: 0 0 0 0 rgb(15 122 61 / 0); } }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.campo label, .campo .etq { font-size: 13.5px; font-weight: 800; color: var(--tinta2); }
.campo.ancho { grid-column: 1 / -1; }
.entrada { height: 46px; border: 1px solid var(--linea); border-radius: var(--r-s); padding: 0 14px; background: #fff; width: 100%; font-size: 15.5px; }
textarea.entrada { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
select.entrada { padding-right: 8px; }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-claro); }
.entrada.corto { width: 90px; flex: 0 0 90px; } .entrada.num { width: 96px; text-align: right; }
.en-linea { display: flex; gap: 8px; align-items: center; }
.ayuda { color: var(--suave); font-size: 12.5px; }
.casilla { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.casilla input { width: 18px; height: 18px; }
.form { display: grid; gap: 16px; }
.form.dos-col { grid-template-columns: 1fr 1fr; }
.form.tres-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form .campo { min-width: 0; }
.pila { display: grid; gap: var(--hueco); }

/* ---------- Entrada ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-izq { background: linear-gradient(160deg, var(--marino), #1E4FA8); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; gap: 20px; }
.login-logo { background: #fff; border-radius: 18px; padding: 14px 20px; align-self: flex-start; }
.login-logo img { height: 44px; width: auto; }
.login-izq h1 { font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 48px; max-width: 600px; }
.login-izq p { font-size: 19px; opacity: .88; max-width: 560px; }
.login-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.login-chips li { border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 700; background: rgb(255 255 255 / .06); }
.login-izq .login-pie { margin-top: auto; font-size: 14px; opacity: .7; }
.login-der { display: grid; place-items: center; padding: 32px; }
.login-caja { width: min(460px, 100%); background: #fff; border-radius: var(--r-l); box-shadow: var(--sombra-alta); padding: 34px; }
.login-caja h2 { font-size: 26px; font-weight: 800; }
.login-caja > p { color: var(--suave); margin: 6px 0 22px; }
.login-caja form { display: grid; gap: 16px; }
.seguro { display: flex; gap: 10px; color: var(--suave); font-size: 13.5px; align-items: flex-start; margin-top: 18px; }
.seguro .ico { color: var(--verde); margin-top: 1px; }
.btn-olvido { justify-self: end; border: 0; background: none; padding: 6px 2px; margin-top: -8px; color: var(--acento); font-weight: 700; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.btn-olvido:hover { color: var(--acento2); }

/* ---------- Cabecera ---------- */
.cab { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cab-in { max-width: var(--ancho); margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 20px; }
.cab-logo img { height: 42px; width: auto; }
.chip-boceto { font-size: 12.5px; font-weight: 800; color: var(--naranja); background: var(--naranja-claro); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.cab-hueco { flex: 1; }
.conectado { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--suave); }
.conectado select { height: 42px; border: 1px solid var(--linea); border-radius: var(--r-s); padding: 0 10px; background: #fff; font-weight: 800; color: var(--tinta); max-width: 260px; }
.usuario { display: flex; align-items: center; gap: 12px; line-height: 1.25; }
.usuario b { display: block; font-size: 15px; }
.usuario small { display: block; font-size: 12.5px; color: var(--suave); }
.avatar { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.btn-menu { display: none; width: 44px; height: 44px; border-radius: var(--r-s); border: 1px solid var(--linea); background: #fff; place-items: center; }

/* ---------- Menú ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
.nav-in { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 0 28px; display: flex; align-items: stretch; height: 60px; gap: 2px; }
.nav-grupo { position: relative; display: flex; }
.nav-grupo.ancho { position: static; }
.nav-enl { display: flex; align-items: center; gap: 6px; padding: 0 15px; text-decoration: none; color: var(--tinta2); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.nav-enl:hover, .nav-grupo:focus-within > .nav-enl { color: var(--acento); }
.nav-enl.activo { color: var(--acento); border-bottom-color: var(--acento); }
.nav-enl.acceso { text-transform: none; letter-spacing: 0; font-size: 15px; }
.nav-sep { width: 1px; background: var(--linea); margin: 14px 10px; }
.desp { display: none; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 360px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-alta); padding: 10px; }
.nav-grupo:hover > .desp, .nav-grupo:focus-within > .desp { display: block; }
.nav.sin-desp .desp { display: none !important; }
.desp.izq { left: auto; right: 0; }
.desp.ancho { left: 28px; right: 28px; min-width: 0; }
.desp-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; }
.desp-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); padding: 10px 12px 4px; }
.desp a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; text-decoration: none; color: var(--tinta); }
.desp a .ico { color: var(--acento); margin-top: 2px; }
.desp a:hover, .desp a:focus-visible { background: var(--acento-claro); }
.desp a b { display: block; font-size: 15px; }
.desp a small { display: block; font-size: 13px; color: var(--suave); }
.desp .ver-todo { border-bottom: 1px solid var(--linea2); border-radius: 14px 14px 0 0; margin-bottom: 4px; }

.franja { background: var(--marino); color: #fff; }
.franja-in { max-width: var(--ancho); margin: 0 auto; padding: 12px 40px; display: flex; gap: 14px; align-items: center; font-size: 15px; }
.franja-in p { flex: 1; }

/* ---------- Pantallas ---------- */
main { max-width: var(--ancho); margin: 0 auto; padding: 30px 40px 72px; }
main:focus { outline: none; }
.miga { font-size: 13.5px; color: var(--suave); margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.miga a { color: var(--suave); text-decoration: none; }
.miga a:hover { color: var(--acento); }
.cabeza { display: flex; align-items: flex-end; gap: 20px; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; }
.cabeza h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.cabeza p { color: var(--suave); margin-top: 8px; font-size: 16.5px; max-width: 820px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.seccion { margin-top: 40px; }
.seccion.primera { margin-top: 0; }
.seccion-tit { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.seccion-tit h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.seccion-tit span { color: var(--suave); font-size: 15px; }

.card { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding: 24px 28px; min-width: 0; }
.card-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-tit.sep { margin-top: 28px; }
.card-tit h2 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.card-tit h2 .ico { color: var(--acento); }
.card-tit .grande { font-size: 28px; font-weight: 800; color: var(--verde); }
.card-pie { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.dato { margin-top: 8px; }
.dato.en-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nota { color: var(--suave); font-size: 14px; margin-top: 12px; }
.vacio { color: var(--suave); padding: 36px 16px; text-align: center; background: #fff; border-radius: var(--r); }
.contador { color: var(--suave); font-size: 14.5px; margin-bottom: 14px; }
.dos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--hueco); align-items: start; }
.columna { display: grid; gap: var(--hueco); }

/* Avisos útiles */
.avisos-utiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--hueco); }
.avu { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding: 22px 24px; border-left: 6px solid var(--c); transition: transform .15s, box-shadow .15s; }
.avu:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(15 23 42 / .09); }
.avu-t { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 800; color: var(--tinta2); }
.avu-t .ico { color: var(--c); width: 24px; height: 24px; }
.avu .cifra { font-size: 40px; font-weight: 800; color: var(--c); line-height: 1.1; margin: 10px 0 4px; }
.avu small { color: var(--suave); font-size: 14.5px; }

/* Tarjetas grandes (Tu intranet y portadas) */
.rejilla-hc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); }
.rejilla-hc.portada { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hc { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border-radius: var(--r-l); box-shadow: var(--sombra); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.hc:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgb(15 23 42 / .11); }
.hc-cab { height: 140px; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c), var(--c2)); }
.portada .hc-cab { height: 110px; }
.hc-ico { width: 78px; height: 78px; border-radius: 22px; background: rgb(255 255 255 / .18); display: grid; place-items: center; color: #fff; }
.hc-ico .ico { width: 40px; height: 40px; stroke-width: 1.7; }
.portada .hc-ico { width: 64px; height: 64px; border-radius: 18px; }
.portada .hc-ico .ico { width: 32px; height: 32px; }
.hc-num { position: absolute; top: 14px; right: 14px; background: rgb(255 255 255 / .94); color: var(--c); font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.hc-cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hc-cuerpo h3 { font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hc-cuerpo p { color: var(--suave); font-size: 15px; }
.hc-cat { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 800; color: var(--c); text-transform: uppercase; letter-spacing: .06em; }

/* Noticias y eventos */
.noticia { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--linea2); }
.noticia:first-of-type { border-top: 0; padding-top: 4px; }
.fecha-caja { width: 60px; flex: 0 0 60px; border-radius: 14px; background: var(--cc, var(--acento-claro)); color: var(--c, var(--acento)); text-align: center; padding: 9px 0; line-height: 1.1; align-self: flex-start; }
.fecha-caja b { display: block; font-size: 22px; font-weight: 800; }
.fecha-caja small { font-size: 12px; font-weight: 800; text-transform: uppercase; }
.noticia h3 { font-size: 15.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.noticia p { color: var(--tinta2); font-size: 15.5px; margin-top: 4px; }
.noticia .meta { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; color: var(--suave); font-size: 13.5px; margin-top: 10px; }
.fila-ev { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linea2); }
.fila-ev:first-of-type { border-top: 0; padding-top: 4px; }
.fila-ev-txt { flex: 1; min-width: 0; }
.fila-ev-txt b { display: block; font-size: 15px; line-height: 1.35; }
.fila-ev-txt small { color: var(--suave); font-size: 13.5px; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); margin-bottom: var(--hueco); }
.kp { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; }
.kp-ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--cc); color: var(--c); flex: 0 0 50px; }
.kp-ico .ico { width: 24px; height: 24px; }
.kp div > span { display: block; font-size: 14.5px; font-weight: 800; color: var(--tinta2); }
.kp b { display: block; font-size: 30px; font-weight: 800; line-height: 1.15; margin-top: 2px; }
.kp small { display: block; color: var(--suave); font-size: 13.5px; margin-top: 2px; }

/* Filtros, pestañas y tablas */
.filtros { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linea); margin-bottom: 26px; }
.pestanas a { padding: 12px 16px; text-decoration: none; color: var(--suave); font-weight: 800; font-size: 15px; border-bottom: 3px solid transparent; margin-bottom: -1px; display: flex; gap: 8px; align-items: center; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current="page"] { color: var(--acento); border-bottom-color: var(--acento); }
.pestanas .n { font-size: 12px; background: var(--gris-claro); color: var(--suave); padding: 2px 8px; border-radius: 999px; }
.tabla-caja { overflow-x: auto; border-radius: var(--r); background: #fff; box-shadow: var(--sombra); }
.tabla-caja.plana, .tabla-caja.compacta { box-shadow: none; border: 1px solid var(--linea2); }
.t { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.t th { text-align: left; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); padding: 14px 18px; border-bottom: 1px solid var(--linea); white-space: nowrap; background: #FAFBFC; }
.t td { padding: 15px 18px; border-bottom: 1px solid var(--linea2); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover { background: #FAFBFF; }
.t .der { text-align: right; } .t .centro { text-align: center; }
.bajo { display: block; color: var(--suave); font-size: 13px; }
.con-insignia { display: flex; align-items: center; gap: 12px; }
.con-insignia small { display: block; color: var(--suave); font-size: 13px; }
.insignia { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: 13.5px; flex: 0 0 40px; }
.si-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--suave2); font-weight: 800; }
.si-no.si { background: var(--verde-claro); color: var(--verde); }

/* Clave única y proveedores: la misma tarjeta, sin fotos ni logos (B43).
   Cabecera en tono pastel con el nombre en el color de la marca, como en la demo que gustó (B42; confirmado por el cliente el 29/10).
   Los tonos son propios: .c1-.c8 siguen siendo de las insignias de agencia.
   Toda la tarjeta es clicable (A7): el botón del nombre la cubre con ::after, y la estrella y «Ver ficha» quedan por encima. */
.tono-c1 { --pt: #DBEAFE; --pc: #1F4FA8; } .tono-c2 { --pt: #CFFAFE; --pc: #0E7490; } .tono-c3 { --pt: #EDE9FE; --pc: #6D28D9; }
.tono-c4 { --pt: #FEF3C7; --pc: #B45309; } .tono-c5 { --pt: #DCFCE7; --pc: #0F7A3D; } .tono-c6 { --pt: #FCE7F3; --pc: #BE185D; }
.tono-c7 { --pt: #E2E8F0; --pc: #334155; } .tono-c8 { --pt: #E0E7FF; --pc: #4F46E5; } .tono-got { --pt: #EAF0FB; --pc: #1F4FA8; }
.rejilla-cu { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--hueco); }
.cu { position: relative; background: #fff; border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.cu:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(15 23 42 / .09); }
.cu:has(.cu-entrar:focus-visible) { outline: 3px solid #7FA3E8; outline-offset: 2px; }
.cu.propio { box-shadow: 0 0 0 2px var(--pc), var(--sombra); }
.cu-cab { min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 56px; background: var(--pt); color: var(--pc); text-align: center; }
.cu-cab h2 { font-size: 19px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.cu-cab small { font-size: 13px; font-weight: 700; }
.cu-entrar { border: 0; padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.cu-entrar::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cu-entrar:focus-visible { outline: none; }
.cu-iconos { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.cu-fav, .cu-llave { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgb(255 255 255 / .85); }
.cu-fav { border: 0; color: var(--suave); pointer-events: auto; }
.cu-fav:hover { background: #fff; color: var(--tinta2); }
.cu-fav[aria-pressed="true"] .ico { fill: #FACC15; stroke: #CA8A04; }
.cu-llave { color: var(--pc); pointer-events: none; }
.cu-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cu-propio { align-self: flex-start; }
.cats { display: flex; gap: 6px; flex-wrap: wrap; }
.cu-cuerpo p { color: var(--suave); font-size: 14.5px; display: flex; gap: 6px; align-items: center; }
.cu-ficha { position: relative; z-index: 2; margin-top: auto; }
.leyenda-cu { display: flex; gap: 8px; align-items: center; color: var(--suave); font-size: 14.5px; margin: -4px 0 14px; }
.leyenda-cu .ico { color: var(--acento); }
.pasos-cu { display: grid; gap: 14px; margin: 6px 0 4px; }
.pasos-cu li { display: flex; gap: 12px; align-items: center; color: var(--suave); font-weight: 700; transition: color .3s; }
.paso-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-claro); color: transparent; transition: background .3s, color .3s; }
.pasos-cu li.hecho { color: var(--tinta); }
.pasos-cu li.hecho .paso-ico { background: var(--verde-claro); color: var(--verde); }

/* Fichas en ventanas */
.sub-tit { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 10px; }
.ficha { display: grid; gap: 0; }
.ficha > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linea2); }
.ficha > div:first-child { border-top: 0; }
.ficha dt { color: var(--suave); font-weight: 700; font-size: 14.5px; }
.ficha dd { font-weight: 700; }

/* Ficha del proveedor (A10, A12): los datos arriba y el resto en pestañas que no cambian de pantalla */
.prov-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 22px; background: var(--gris-claro); border-radius: var(--r-s); padding: 16px 18px; }
.prov-datos dt { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.prov-datos dd { font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.enlace-btn { display: inline-flex; gap: 6px; align-items: center; border: 0; padding: 0; background: none; color: var(--acento); font-weight: 800; text-align: left; }
.enlace-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.prov-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linea); margin: 22px 0 18px; }
.prov-tab { display: inline-flex; gap: 6px; align-items: center; padding: 12px 11px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: var(--suave); font-weight: 800; font-size: 15px; }
.prov-tab:hover { color: var(--tinta); }
.prov-tab[aria-pressed="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.prov-panel { min-height: 120px; }
.prov-etiquetas { display: flex; gap: 8px; flex-wrap: wrap; }

/* Calendario */
.cal { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--hueco); align-items: start; }
.cal-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cal-cab h2 { flex: 1; text-align: center; font-size: 21px; font-weight: 800; }
.cal-cab h2::first-letter { text-transform: uppercase; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--suave); margin-bottom: 14px; }
.leyenda span { display: inline-flex; gap: 7px; align-items: center; font-weight: 700; }
.cal-rej { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-sem { font-size: 12px; font-weight: 800; color: var(--suave); text-transform: uppercase; text-align: center; padding: 6px 0; }
.cal-dia { min-height: 118px; border: 1px solid var(--linea2); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 5px; background: #fff; min-width: 0; }
.cal-dia.fuera { background: #FAFBFC; color: var(--suave2); }
.cal-dia.hoy { border: 2px solid var(--acento); }
.cal-dia .n { font-size: 13.5px; font-weight: 800; }
.cal-dia.hoy .n { color: var(--acento); }
.ev { display: block; width: 100%; text-align: left; border: 0; border-radius: 8px; padding: 5px 7px; font-size: 12.5px; font-weight: 700; line-height: 1.3; background: var(--cc); color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev:hover { filter: brightness(.96); }

/* Tutoriales */
.rejilla-tut { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--hueco); }
.tut { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; text-align: left; border: 0; padding: 0; display: flex; flex-direction: column; transition: transform .15s; }
.tut:hover { transform: translateY(-2px); }
.tut-min { height: 160px; background: linear-gradient(135deg, var(--c), var(--c2)); display: grid; place-items: center; color: #fff; position: relative; width: 100%; }
.tut-min .ico { width: 56px; height: 56px; stroke-width: 1.5; }
.tut-dur { position: absolute; bottom: 10px; right: 10px; background: rgb(15 23 42 / .6); color: #fff; font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 8px; }
.tut-visto { position: absolute; top: 10px; left: 10px; }
.tut-cuerpo { padding: 16px 18px 18px; display: block; }
.tut-cuerpo b { display: block; font-size: 16px; line-height: 1.35; }
.tut-cuerpo small { color: var(--suave); font-size: 13.5px; }
.reproductor { height: 380px; border-radius: var(--r); background: linear-gradient(135deg, var(--c), var(--c2)); color: #fff; display: grid; place-items: center; position: relative; overflow: hidden; }
.reproductor > .ico { width: 80px; height: 80px; stroke-width: 1.4; }
.barra-rep { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 6px; border-radius: 6px; background: rgb(255 255 255 / .3); overflow: hidden; }
.barra-rep i { display: block; height: 100%; width: 0; background: #fff; transition: width 2.4s linear; }

/* Gestión */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--hueco); align-items: start; }
.rejilla-tarjetas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-tarjetas.dos-c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-enlaces li + li { border-top: 1px solid var(--linea2); }
.lista-enlaces button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 4px; background: none; border: 0; text-align: left; font-weight: 700; color: var(--tinta); }
.lista-enlaces button:hover { color: var(--acento); }
.lista-enlaces .ico { color: var(--suave2); }
.lista-docs li { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--linea2); }
.lista-docs li:first-child { border-top: 0; padding-top: 2px; }
.lista-docs li > .ico { color: var(--acento); width: 22px; height: 22px; }
.lista-docs li > span { flex: 1; min-width: 0; }
.lista-docs b { display: block; font-size: 15px; line-height: 1.35; }
.lista-docs small { color: var(--suave); font-size: 13px; }
.iban { font-size: 20px; font-weight: 700; margin-top: 14px; letter-spacing: .02em; }
.barras { display: flex; align-items: flex-end; gap: 12px; height: 260px; padding-top: 12px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 0; }
.barra-pila { width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 8px 8px 4px 4px; overflow: hidden; height: 0; }
.barra-pila i { display: block; width: 100%; }
.barra-pila i[class^="o-"] { background: var(--c); }
.barra small { font-size: 12px; color: var(--suave); font-weight: 700; text-transform: uppercase; }
.hbar { display: grid; grid-template-columns: minmax(140px, 200px) 1fr 52px; gap: 12px; align-items: center; padding: 7px 0; font-size: 14.5px; }
.hbar-fondo { height: 12px; border-radius: 999px; background: var(--gris-claro); overflow: hidden; }
.hbar-fondo i { display: block; height: 100%; width: 0; background: var(--acento); border-radius: 999px; }
.hbar b { text-align: right; }
/* Ventas por vendedor: % de cierre con su barra */
.cierre { display: inline-flex; gap: 10px; align-items: center; min-width: 150px; }
.cierre .hbar-fondo { flex: 1; min-width: 70px; }
.cierre b { min-width: 44px; text-align: right; }
.rejilla-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--hueco); }
.img-tema { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.img-min { height: 150px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); }
.img-min .ico { width: 48px; height: 48px; stroke-width: 1.5; }
.img-cuerpo { padding: 16px 18px 18px; display: grid; gap: 4px; }
.img-cuerpo b { font-size: 17px; }
.img-cuerpo small { color: var(--suave); }
.img-cuerpo .acciones { margin-top: 10px; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hueco); align-items: start; }
.ed-prev { aspect-ratio: 1; border-radius: var(--r); background: linear-gradient(135deg, var(--c), var(--c2)); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; gap: 10px; }
.ed-prev b { font-size: 26px; font-weight: 800; line-height: 1.15; }
.ed-prev span { align-self: flex-end; background: #fff; color: var(--tinta); font-weight: 800; padding: 6px 12px; border-radius: 10px; font-size: 14px; }
.interruptor { position: relative; display: inline-block; width: 46px; height: 26px; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor i { position: absolute; inset: 0; border-radius: 999px; background: var(--linea); transition: background .2s; pointer-events: none; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .2s; }
.interruptor input:checked + span + i { background: var(--verde); }
.interruptor input:checked + span + i::after { transform: translateX(20px); }
.interruptor input:focus-visible + span + i { outline: 3px solid #7FA3E8; outline-offset: 2px; }
.interruptor input:disabled + span + i { opacity: .45; }

/* Legal y Online */
.apilada { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: var(--gris-claro); margin: 8px 0 14px; }
.apilada i { display: block; height: 100%; width: 0; }
.apilada .ok { background: var(--verde); } .apilada .amb { background: #D6A21E; } .apilada .gris { background: var(--suave2); }
.leyenda-apilada { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14.5px; color: var(--tinta2); }
.leyenda-apilada li { display: flex; gap: 8px; align-items: center; }
.lista-check li { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--linea2); flex-wrap: wrap; font-weight: 700; }
.lista-check li:first-child { border-top: 0; padding-top: 2px; }
.lista-check li .btn { margin-left: auto; }
.margenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
.margen-grupo h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 8px; }
.margen { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linea2); font-weight: 700; }
.margen b { width: 18px; color: var(--suave); }
.entrada.unidad { width: 68px; flex: 0 0 68px; padding: 0 6px; }
/* Opciones grandes con un botón de radio (por ejemplo, el canal para pedir el consentimiento) */
.opciones { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.opcion { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linea); border-radius: var(--r-s); padding: 14px 16px; cursor: pointer; font-weight: 800; }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.opcion input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 18px; accent-color: var(--acento); }
.opcion span { display: grid; gap: 2px; min-width: 0; }
.opcion small { font-weight: 600; color: var(--suave); font-size: 13.5px; }

/* Listas de lo que incluye algo */
.lista-tendra { display: grid; gap: 14px; }
.lista-tendra li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.lista-tendra .ico { color: var(--verde); margin-top: 3px; }
.aviso-fijo { display: flex; gap: 12px; align-items: flex-start; background: var(--acento-claro); color: var(--acento2); border-radius: var(--r-s); padding: 14px 18px; margin-bottom: 18px; font-weight: 700; }

/* ---------- Ventanas y avisos ---------- */
dialog.dlg { border: 0; border-radius: var(--r-l); padding: 0; width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--sombra-alta); color: var(--tinta); }
dialog.dlg.ancho { width: min(880px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background: rgb(11 31 69 / .45); }
.dlg-cab { display: flex; align-items: center; gap: 12px; padding: 22px 26px 4px; }
.dlg-cab h2 { flex: 1; font-size: 21px; font-weight: 800; }
.dlg-cuerpo { padding: 14px 26px 8px; }
.dlg-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 16px 26px 24px; }
.avisos { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 60; max-width: 440px; }
.aviso { background: var(--tinta); color: #fff; border-radius: 14px; padding: 14px 18px; font-size: 15px; font-weight: 600; box-shadow: var(--sombra-alta); border-left: 5px solid var(--verde); animation: entra .25s ease-out; }
.aviso.mal { border-left-color: #F97066; } .aviso.az { border-left-color: #7FA3E8; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Pantallas de 27 pulgadas: todo un 20 % más grande ---------- */
@media (min-width: 2200px) { body { zoom: 1.2; } }

/* ---------- Pantallas más pequeñas ---------- */
@media (max-width: 1320px) {
  .rejilla-hc, .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avisos-utiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-boceto { display: none; }
}
@media (max-width: 1180px) {
  .dos, .cal, .editor { grid-template-columns: 1fr; }
  .rejilla-hc, .kpis, .rejilla-tarjetas.tres, .margenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form.tres-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1060px) {
  .btn-menu { display: grid; }
  .conectado > span, .usuario-txt { display: none; }
  .nav { display: none; }
  body.menu-abierto .nav { display: block; position: fixed; inset: 0 auto 0 0; width: min(380px, 92vw); overflow-y: auto; box-shadow: var(--sombra-alta); z-index: 50; }
  body.menu-abierto::after { content: ""; position: fixed; inset: 0; background: rgb(11 31 69 / .45); z-index: 45; }
  .nav-in { flex-direction: column; height: auto; padding: 16px; gap: 0; }
  .nav-grupo, .nav-grupo.ancho { position: static; flex-direction: column; }
  .nav-enl { padding: 12px; border: 0; }
  .nav-enl .ico.peq { display: none; }
  .desp, .desp.ancho, .nav-grupo:hover > .desp { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 10px 6px; min-width: 0; }
  .desp-cols { grid-template-columns: 1fr; }
  .desp .ver-todo { display: none; }
  .nav-sep { width: auto; height: 1px; margin: 8px 0; }
}
@media (max-width: 760px) {
  main { padding: 20px 16px 56px; }
  .cab-in { padding: 10px 16px; gap: 10px; }
  .cab-logo img { height: 22px; }
  .conectado select { max-width: 110px; }
  .usuario { display: none; }
  .txt-salir { display: none; }
  .franja-in { padding: 10px 16px; flex-wrap: wrap; }
  .cabeza h1 { font-size: 26px; }
  .rejilla-hc, .kpis, .avisos-utiles, .rejilla-tarjetas.tres, .rejilla-tarjetas.dos-c, .margenes, .form.dos-col, .form.tres-col { grid-template-columns: 1fr; }
  .card { padding: 20px; }
  .login { grid-template-columns: 1fr; }
  .login-izq { display: none; }
  .t thead { display: none; }
  .t, .t tbody, .t tr, .t td { display: block; }
  .t tr { padding: 12px 16px; border-bottom: 1px solid var(--linea); }
  .t td { border: 0; padding: 4px 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; text-align: right; }
  .t td[data-l]::before { content: attr(data-l); font-size: 12px; font-weight: 800; color: var(--suave); text-transform: uppercase; text-align: left; }
  .t td.der { justify-content: flex-end; }
  .cal-dia { min-height: 56px; padding: 6px; }
  .cal-dia .ev { font-size: 0; padding: 0; height: 6px; }
  .ficha > div { grid-template-columns: 1fr; gap: 2px; }
  .hbar { grid-template-columns: 110px 1fr 44px; }
  .barras { gap: 6px; }
}