/* Portal del empleado: mismo layout que la app (style.css) + lo propio del portal y compatibilidad con las clases cortas
   que usan las vistas (.row, .pill, .muted, .sub, .kpi, .tile, .turno-hoy, .cal, .leg, .pane). Lo que el kit ya trae
   (.kh-card, .kh-btn, .kh-alert, .kh-field, .kh-input…) NO se copia aquí: así obedece al tamaño de interfaz. */

/* ---- Layout ---- */
body.kh-portal .kh-main { max-width: none; }
body.kh-portal .kh-main.kh-portal-centro { display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; }
body.kh-portal .kh-main.kh-portal-centro > * { width: 100%; max-width: 560px; }
body.kh-portal .kh-main.kh-portal-centro.narrow > * { max-width: 420px; }
.kh-portal-who { padding: 6px 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--kh-gris-200); }
.kh-portal-who strong { display: block; font-size: .95rem; line-height: 1.2; }
.kh-portal-who span { display: block; font-size: .78rem; color: var(--kh-gris-600); margin-top: 2px; }
.kh-portal-who .kh-portal-estado { display: inline-block; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: .68rem; font-weight: 700; margin-top: 6px; }
html.kh-nav-col .kh-portal-who { display: none; }
.kh-nav a.ptab { position: relative; }
.kh-portal-n { margin-left: auto; font-weight: 700; font-size: .72rem; background: #dc2626; color: #fff; border-radius: 999px; padding: 1px 7px; }
html.kh-nav-col .kh-portal-n { position: absolute; top: 4px; right: 4px; margin: 0; font-size: .6rem; padding: 0 5px; }
@media (max-width: 900px) { .kh-portal-who { display: none; } .kh-portal-n { position: absolute; top: 4px; right: 4px; margin: 0; font-size: .6rem; padding: 0 5px; } }

/* ---- Pestañas (paneles) ---- */
.pane { display: none; }
.pane.active { display: block; }

/* ---- Lo propio del portal (lo demás lo pone el kit) ---- */
/* 07/10/2026 · las tarjetas, los campos, las etiquetas, los botones y los avisos eran copias locales del kit
   y NO obedecían al tamaño de interfaz (Compacto / cómodo): tenían el relleno y la letra en px fijos.
   Por eso el portal se veía más espaciado que el resto de la app. Ahora se usan .kh-card, .kh-field,
   .kh-label, .kh-input/.kh-select/.kh-textarea, .kh-btn y .kh-alert, y aquí solo queda lo que el kit no tiene. */
.kh-card h2 { font-size: .98rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.kh-card h2 .muted { font-weight: 500; }
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 20px; flex-wrap: wrap; margin: 4px 0 14px; }
.hero h1 { font-size: 1.22rem; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; letter-spacing: -.02em; }
.hero .sub { margin: 6px 0 0; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: .9rem; color: var(--kh-gris-600); }
.qa { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
#qaSeg { margin: 0 0 16px; }   /* el selector de arriba: el hueco que antes daba .qa */
.sub { color: var(--kh-gris-600); font-size: .9rem; margin: 0 0 10px; line-height: 1.5; }
.muted { color: var(--kh-gris-600); font-size: .84rem; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .74rem; font-weight: 700; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 160px; }
/* Dos matices de aviso que el kit no trae: el informativo (azul) y el apretado. */
.kh-alert.info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.kh-alert.compact { padding: 8px 12px; font-size: .86rem; }
.kh-alert.compact details summary { cursor: pointer; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.kpi { display: block; background: #fff; border: 1px solid var(--kh-gris-200); border-radius: var(--kh-radio); padding: 11px 13px; text-decoration: none; color: inherit; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kh-negro); }
.kpi.al::before { background: #dc2626; }
.kpi:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.kpi .l { font-size: .78rem; font-weight: 600; color: var(--kh-gris-700); }
.kpi .v { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin: 1px 0; }
.kpi .s { font-size: .78rem; color: var(--kh-gris-600); }
.turno-hoy { display: flex; gap: 12px; flex-wrap: wrap; }
.turno-hoy .t { flex: 1; min-width: 200px; border-radius: var(--kh-radio); padding: 11px 13px 11px 16px; color: inherit; background: #fff !important; border: 1px solid var(--kh-gris-200); position: relative; overflow: hidden; }
.turno-hoy .t::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--kh-negro, #111)); }
.turno-hoy .t .d { font-size: .76rem; font-weight: 600; color: var(--kh-gris-600); }
.turno-hoy .t .c { font-size: 1.05rem; font-weight: 700; margin: 2px 0; color: var(--kh-negro); }
.turno-hoy .t .h { font-size: .88rem; color: var(--kh-gris-700); }
.tile { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--kh-gris-200); border-radius: var(--kh-radio); padding: 9px 12px; margin-top: 6px; font-size: .9rem; }
.sol { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--kh-gris-200); padding: 9px 0; font-size: .9rem; }
.leg { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: .8rem; margin-top: 12px; }
.leg .sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
/* Rejilla propia del portal (vista año y equipo); el mes usa el calendario de la app (.kcal) */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .wd { text-align: center; font-size: 10px; color: #9ca3af; font-weight: 600; }
.cal .d { min-height: 46px; border-radius: var(--kh-radio-sm); display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.15; font-size: 12px; }
.cal .d .n { font-size: 9px; opacity: .8; }
.kcal-d.kcal-pd { cursor: pointer; }
.kcal-d.kcal-pd:hover { filter: brightness(.93); }
.print-title { display: none; }
@media print {
    .kh-topbar, .kh-nav, .qa, .kh-btn, form, .hero, footer, .kh-cartel-pruebas { display: none !important; }
    .pane { display: none !important; } .pane.printme.active { display: block !important; }
    .print-title { display: block; font-weight: 800; font-size: 16px; margin-bottom: 8px; }
    .kh-layout { display: block !important; } .kh-main { padding: 0 !important; }
}
@media (max-width: 640px) {
    /* Barra de arriba en el móvil: el kit la quiere en UNA línea, así que se encoge y lo largo se oculta con .kh-ocultar-movil */
    body.kh-portal .kh-topbar .kh-user { gap: 6px; min-width: 0; }
    body.kh-portal .kh-topbar .kh-user .kh-btn { padding: 6px 11px; font-size: .82rem; white-space: nowrap; }
    body.kh-portal .kh-wordmark small { display: none; }
    .hero h1 { font-size: 1.25rem; }
    .turno-hoy .t { min-width: 140px; }
}

/* Accesos directos del portal (César 22/09/2026): grandes, claros y elegidos por cada persona */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 0 0 14px; }
.accesos .acc { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--kh-gris-200, #e5e7eb); border-radius: var(--kh-radio);
    background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.accesos .acc:hover { border-color: #111827; box-shadow: 0 6px 18px rgba(0,0,0,.08); text-decoration: none; }
.accesos .acc .ic { font-size: 1.15rem; line-height: 1; flex: none; }
.accesos .acc strong { display: block; font-size: .92rem; font-weight: 600; }
.accesos .acc small { display: block; color: var(--kh-gris-500, #6b7280); font-size: .8rem; margin-top: 2px; }
@media (max-width: 700px) { .accesos { grid-template-columns: 1fr; } .accesos .acc { padding: 12px 14px; } }