/* =====================================================================
   KüchenHouse · Control Horario — Estilos
   Estética blanco/negro minimalista acorde al wordmark de marca.
   ===================================================================== */

:root {
    --kh-negro: #000000;
    --kh-tinta: #111418;
    --kh-gris-900: #1d2125;
    --kh-gris-600: #5b626b;
    --kh-gris-400: #9aa1aa;
    --kh-gris-200: #e3e6ea;
    --kh-gris-100: #f2f4f6;
    --kh-blanco: #ffffff;
    --kh-ok: #1f8a4c;
    --kh-warn: #b7791f;
    --kh-error: #c0392b;
    --kh-radio: 10px;
    --kh-sombra: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
    --kh-fuente: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--kh-fuente);
    color: var(--kh-tinta);
    background: var(--kh-gris-100);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--kh-negro); }

/* ---- Marca / wordmark ---- */
.kh-wordmark {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--kh-negro);
    text-decoration: none;
    font-size: 1.35rem;
    line-height: 1;
}
.kh-wordmark small {
    display: block;
    font-weight: 600;
    letter-spacing: 0.28em;
    font-size: 0.52rem;
    color: var(--kh-gris-600);
    margin-top: 4px;
    text-transform: uppercase;
}

/* ---- Cabecera de la app ---- */
.kh-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kh-blanco);
    border-bottom: 1px solid var(--kh-gris-200);
    padding: 14px 24px;
}
.kh-topbar .kh-user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.9rem;
    color: var(--kh-gris-600);
}
.kh-badge-rol {
    background: var(--kh-negro);
    color: #fff;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- Estructura ---- */
.kh-layout { display: flex; min-height: calc(100vh - 57px); }
.kh-nav {
    width: 230px;
    background: var(--kh-blanco);
    border-right: 1px solid var(--kh-gris-200);
    padding: 18px 12px;
    flex-shrink: 0;
}
.kh-nav a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--kh-gris-900);
    font-size: 0.92rem;
    margin-bottom: 2px;
}
.kh-nav a:hover { background: var(--kh-gris-100); }
.kh-nav a.activo { background: var(--kh-negro); color: #fff; }
.kh-main { flex: 1; padding: 28px 32px; }

/* ---- Tarjetas / contenido ---- */
.kh-card {
    background: var(--kh-blanco);
    border: 1px solid var(--kh-gris-200);
    border-radius: var(--kh-radio);
    box-shadow: var(--kh-sombra);
    padding: 24px;
    margin-bottom: 22px;
}
.kh-h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.01em; }
.kh-sub { color: var(--kh-gris-600); margin: 0 0 22px; font-size: 0.95rem; }

.kh-grid { display: grid; gap: 18px; }
.kh-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kh-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) {
    .kh-grid.cols-3, .kh-grid.cols-2 { grid-template-columns: 1fr; }
    /* Gestores en el móvil: el menú pasa a una fila deslizable bajo la cabecera */
    .kh-layout { flex-direction: column; }
    .kh-nav { width: auto; display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--kh-gris-200); padding: 8px 10px; -webkit-overflow-scrolling: touch; }
    .kh-nav a { white-space: nowrap; padding: 8px 12px; margin: 0; font-size: 0.86rem; }
    .kh-nav-sep { display: none; }
    .kh-main { padding: 16px 14px; }
    .kh-topbar { padding: 10px 14px; }
    .kh-topbar .kh-user span:not(.kh-badge-rol) { display: none; }
    .kh-table { font-size: 0.84rem; }
    .kh-table th, .kh-table td { padding: 8px 6px; }
}

.kh-stat { text-align: left; }
.kh-stat .num { font-size: 2rem; font-weight: 800; }
.kh-stat .lbl { color: var(--kh-gris-600); font-size: 0.85rem; }

/* ---- Tablas ---- */
.kh-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.kh-table th, .kh-table td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--kh-gris-200);
}
.kh-table th { color: var(--kh-gris-600); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kh-table tr:hover td { background: var(--kh-gris-100); }

/* ---- Formularios ---- */
.kh-field { margin-bottom: 16px; }
.kh-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.kh-input, .kh-select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--kh-gris-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
}
.kh-input:focus, .kh-select:focus { outline: none; border-color: var(--kh-negro); }
.kh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .kh-row { grid-template-columns: 1fr; } }

/* ---- Botones ---- */
.kh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--kh-negro);
    background: var(--kh-negro);
    color: #fff;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.kh-btn:hover { background: var(--kh-gris-900); }
.kh-btn.secundario { background: #fff; color: var(--kh-negro); }
.kh-btn.secundario:hover { background: var(--kh-gris-100); }
.kh-btn.peligro { background: var(--kh-error); border-color: var(--kh-error); }

/* ---- Avisos / flash ---- */
.kh-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 0.9rem; border: 1px solid; }
.kh-alert.ok    { background: #eaf7ef; border-color: #bfe3cc; color: var(--kh-ok); }
.kh-alert.error { background: #fdecea; border-color: #f5c6c0; color: var(--kh-error); }
.kh-alert.warn  { background: #fdf6e9; border-color: #f0e0b8; color: var(--kh-warn); }

/* ---- Login ---- */
.kh-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(900px 500px at 50% -10%, #ffffff 0%, var(--kh-gris-100) 60%);
}
.kh-login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--kh-gris-200);
    border-radius: 16px;
    box-shadow: var(--kh-sombra);
    padding: 36px 32px;
}
.kh-login-logo { text-align: center; margin-bottom: 26px; }
.kh-login-logo .kh-wordmark { font-size: 1.7rem; }

.kh-pill {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--kh-gris-600);
    border: 1px solid var(--kh-gris-200);
    border-radius: 999px;
    padding: 3px 10px;
}
.kh-muted { color: var(--kh-gris-400); font-size: 0.8rem; }

/* ---- Cartel de pruebas (Centro de Mando) ---- */
.kh-cartel-pruebas {
    background: #fff4cc;
    color: #6b4f00;
    border-bottom: 1px solid #f0d78a;
    padding: 8px 16px;
    font-size: 0.85rem;
    text-align: center;
}

/* ---- Cinturón de apps (SSO de list) ---- */
.kh-cinturon { display: inline-flex; gap: 6px; margin-right: 8px; }
.kh-cinturon a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; text-decoration: none;
    border: 1px solid var(--kh-gris-200); background: #fff; font-size: 0.95rem;
}
.kh-cinturon a.actual { background: var(--kh-negro); color: #fff; border-color: var(--kh-negro); }
.kh-nav-sep { border-top: 1px solid var(--kh-gris-200); margin: 10px 4px; }

/* ---- Campana del Centro de Mando (cambios.md #11) ---- */
.kh-campana { position: relative; }
.kh-campana summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    width: auto; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--kh-gris-200); background: #fff; font-size: 0.95rem;
}
.kh-campana summary::-webkit-details-marker { display: none; }
.kh-campana summary b { background: var(--kh-error); color: #fff; border-radius: 999px; font-size: 0.68rem; padding: 1px 6px; }
.kh-campana-panel {
    position: absolute; right: 0; top: 36px; width: 320px; max-width: 90vw; background: #fff; border: 1px solid var(--kh-gris-200);
    border-radius: 10px; box-shadow: var(--kh-sombra); padding: 12px; z-index: 50; font-size: 0.86rem;
}
.kh-campana-panel a { display: block; padding: 6px 0; border-bottom: 1px solid var(--kh-gris-100); text-decoration: none; color: var(--kh-tinta); }
.kh-campana-panel a small { display: block; }
a.kh-card { text-decoration: none; color: inherit; display: block; }
a.kh-card:hover { border-color: var(--kh-negro); }

/* ---- PWA del empleado: una pantalla, un botón ---- */
body.kh-app { background: var(--kh-gris-100); padding-bottom: 76px; }
.kh-app-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--kh-gris-200);
}
.kh-app-hola { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.kh-app-sub { color: var(--kh-gris-600); font-size: 0.85rem; margin-top: 2px; }
.kh-app-tienda { border: 0; background: transparent; color: var(--kh-gris-600); font-size: 0.9rem; padding: 2px 0; font-family: inherit; }
.kh-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--kh-negro); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.kh-app-main { max-width: 520px; margin: 0 auto; padding: 16px 16px 24px; }
.kh-app-card { padding: 18px 20px; }
.kh-compacto { padding: 8px 12px; font-size: 0.82rem; }

.kh-hero {
    background: #fff; border: 1px solid var(--kh-gris-200); border-radius: 22px; box-shadow: var(--kh-sombra);
    padding: 22px 20px 18px; text-align: center; margin-bottom: 14px;
}
.kh-hero-estado { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kh-hero-estado small { color: var(--kh-gris-600); font-weight: 500; }
.kh-hero-timer { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 16px; line-height: 1; }
.kh-hero-timer span { font-size: 0.85rem; font-weight: 500; color: var(--kh-gris-600); margin-left: 6px; letter-spacing: 0; }
.kh-dot { display:inline-block; width:12px; height:12px; border-radius:50%; background: var(--kh-gris-400); }
.kh-estado-dentro .kh-dot { background: var(--kh-ok); box-shadow: 0 0 0 5px rgba(31,138,76,.15); }
.kh-estado-pausa  .kh-dot { background: var(--kh-warn); box-shadow: 0 0 0 5px rgba(183,121,31,.15); }

.kh-big {
    width: 168px; height: 168px; border-radius: 50%; border: 0; cursor: pointer; font-family: inherit;
    font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: 0.01em;
    display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 12px;
    transition: transform .08s ease, box-shadow .2s ease;
}
.kh-big:active { transform: scale(.96); }
.kh-big:disabled { opacity: .5; cursor: wait; }
.kh-big-entrada   { background: var(--kh-ok);    box-shadow: 0 10px 28px rgba(31,138,76,.35); }
.kh-big-salida    { background: var(--kh-tinta); box-shadow: 0 10px 28px rgba(17,20,24,.35); }
.kh-big-pausa_fin { background: var(--kh-warn);  box-shadow: 0 10px 28px rgba(183,121,31,.35); }
.kh-sec { display: inline-flex; margin: 0 auto 6px; padding: 9px 18px; }
.kh-hint { color: var(--kh-gris-600); font-size: 0.82rem; min-height: 1.2em; margin: 8px 0 0; }
.kh-hint.error { color: var(--kh-error); font-weight: 600; }

.kh-hoy { padding: 14px 16px; }
.kh-hoy-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.92rem; }
.kh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kh-chip { border: 1px solid var(--kh-gris-200); border-radius: 999px; padding: 4px 10px; font-size: 0.8rem; background: var(--kh-gris-100); }
.kh-chip-entrada { border-color: #bfe3cc; background: #eaf7ef; }
.kh-chip-salida  { border-color: var(--kh-gris-400); background: #fff; }
.kh-chip-pausa_inicio, .kh-chip-pausa_fin { border-color: #f0e0b8; background: #fdf6e9; }

.kh-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #fff;
    border-top: 1px solid var(--kh-gris-200); padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.kh-tabbar a { flex: 1; text-align: center; text-decoration: none; color: var(--kh-gris-600); font-size: 0.72rem; font-weight: 600; }
.kh-tabbar a span { display: block; font-size: 1.25rem; line-height: 1.2; }
.kh-tabbar a.actual { color: var(--kh-negro); }