/* ==========================================================================
   FORHUMAN CRM — estilos base
   Paleta tomada de forhuman.mx: carbón + lavanda (acento) + magenta (alerta)
   ========================================================================== */
:root {
    --fh-carbon: #333333;
    --fh-carbon-deep: #222222;
    --fh-carbon-soft: #3d3d44;
    --fh-lavanda: #8c7ad2;
    --fh-lavanda-dark: #6f5cc0;
    --fh-lavanda-light: #c3b4e3;
    --fh-lavanda-tint: #e0d9f0;
    --fh-magenta: #cc3366;
    --fh-ok: #2f9e6e;
    --fh-bg: #f5f3fa;
    --fh-surface: #ffffff;
    --fh-text: #33373d;
    --fh-muted: #69727d;
    --fh-border: #e4e0f0;
    --fh-radius: 16px;
    --fh-topbar-h: 60px;
    --fh-sidebar-w: 256px;
    --fh-shadow: 0 6px 24px rgba(51, 45, 80, .08);
    --fh-menu-ms: .3s;                              /* duración de la animación del menú (sincronizada con shell.js) */
    --fh-menu-ease: cubic-bezier(.4, 0, .2, 1);
}

html, body { height: 100%; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--fh-text);
    background: var(--fh-bg);
    font-size: .95rem;
}
a { color: var(--fh-lavanda-dark); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--fh-lavanda) 55%, transparent); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.fh-topbar {
    position: fixed; inset: 0 0 auto 0; height: var(--fh-topbar-h); z-index: 1030;
    display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
    background: linear-gradient(90deg, var(--fh-carbon-deep), var(--fh-carbon) 55%, #3a3550);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}
.fh-topbar-spacer { flex: 1; }
.fh-brand { display: flex; align-items: center; height: 100%; padding: 0 .25rem; }
.fh-brand img { height: 34px; width: auto; display: block; }

.fh-iconbtn {
    width: 40px; height: 40px; border: 0; border-radius: 12px; color: #fff; font-size: 1.05rem;
    background: rgba(255, 255, 255, .08); display: grid; place-items: center; cursor: pointer;
    transition: background .15s;
}
.fh-iconbtn:hover { background: rgba(140, 122, 210, .45); }

.fh-user {
    display: flex; align-items: center; gap: .6rem; border: 0; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, .08); border-radius: 14px; padding: .3rem .75rem .3rem .3rem;
    transition: background .15s; max-width: 280px;
}
.fh-user:hover { background: rgba(140, 122, 210, .35); }
.fh-avatar {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, var(--fh-lavanda), var(--fh-lavanda-dark)); font-weight: 600; font-size: .85rem;
}
.fh-user-text { display: flex; flex-direction: column; text-align: left; line-height: 1.15; min-width: 0; }
.fh-user-text strong { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-user-text small { font-size: .7rem; color: var(--fh-lavanda-light); }
.fh-user-caret { font-size: .65rem; opacity: .7; }

.fh-dropdown { border: 1px solid var(--fh-border); border-radius: 14px; box-shadow: var(--fh-shadow); padding: .4rem; min-width: 230px; }
.fh-dropdown .dropdown-item { border-radius: 9px; padding: .5rem .7rem; display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.fh-dropdown .dropdown-item i { width: 1.1rem; color: var(--fh-lavanda-dark); text-align: center; }
.fh-dropdown .dropdown-item:hover { background: var(--fh-lavanda-tint); }
.fh-dd-head { display: flex; flex-direction: column; padding: .45rem .7rem .55rem; }
.fh-dd-head small { color: var(--fh-muted); word-break: break-all; }
.fh-notif { min-width: 260px; }
.fh-notif-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.2rem; color: var(--fh-muted); }
.fh-notif-empty i { font-size: 1.4rem; color: var(--fh-lavanda-light); }

/* ---------- Menú lateral ---------- */
.fh-sidebar {
    position: fixed; top: var(--fh-topbar-h); bottom: 0; left: 0; width: var(--fh-sidebar-w); z-index: 1020;
    display: flex; flex-direction: column; overflow-y: auto; padding: .75rem .65rem;
    background: linear-gradient(180deg, var(--fh-carbon) 0%, var(--fh-carbon-deep) 100%);
    /* Siempre contraído: es un cajón que se abre con el botón de la barra superior. */
    transform: translateX(-100%); visibility: hidden; box-shadow: 8px 0 30px rgba(0, 0, 0, .35);
    transition: transform var(--fh-menu-ms) var(--fh-menu-ease), visibility 0s linear var(--fh-menu-ms);
}
.fh-open .fh-sidebar { transform: none; visibility: visible; transition: transform var(--fh-menu-ms) var(--fh-menu-ease), visibility 0s; }
.fh-menu-title {
    color: var(--fh-lavanda-light); font-weight: 600; font-size: .85rem; padding: .5rem .75rem .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: .6rem; display: flex; gap: .5rem; align-items: center;
}
.fh-nav { display: flex; flex-direction: column; gap: .2rem; }
.fh-nav-item {
    display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: 12px;
    background: transparent; color: #e9e6f3; font-size: .9rem; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer;
    transition: background .15s, color .15s;
}
.fh-nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.fh-nav-item.active { background: linear-gradient(90deg, var(--fh-lavanda), var(--fh-lavanda-dark)); color: #fff; box-shadow: 0 4px 14px rgba(111, 92, 192, .45); }
.fh-nav-ico {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: rgba(255, 255, 255, .09); font-size: .85rem;
}
.fh-nav-item.active .fh-nav-ico { background: rgba(255, 255, 255, .2); }
.fh-nav-sep { height: 1px; background: rgba(255, 255, 255, .08); margin: .5rem .4rem; }
.fh-nav-caret { margin-left: auto; font-size: .65rem; transition: transform .2s; }
.fh-nav-group:not(.collapsed) .fh-nav-caret { transform: rotate(180deg); }
.fh-subnav { display: flex; flex-direction: column; gap: .2rem; padding: .25rem 0 .25rem 1rem; }
.fh-subnav .fh-nav-item { font-size: .86rem; }
.fh-sidebar-foot { margin-top: auto; padding: 1rem .75rem .25rem; color: rgba(255, 255, 255, .35); font-size: .72rem; text-align: center; }
/* El fondo oscuro se desvanece al abrir y cerrar (no aparece ni desaparece de golpe). */
.fh-backdrop {
    position: fixed; inset: 0; z-index: 1010; background: rgba(20, 18, 30, .55);
    opacity: 0; visibility: hidden; transition: opacity var(--fh-menu-ms) ease, visibility 0s linear var(--fh-menu-ms);
}
.fh-open .fh-backdrop { opacity: 1; visibility: visible; transition: opacity var(--fh-menu-ms) ease, visibility 0s; }

/* ---------- Contenido (ocupa todo el ancho: el menú no le quita espacio) ---------- */
.fh-main { padding: calc(var(--fh-topbar-h) + 1.5rem) 1.75rem 2rem; min-height: 100%; }

@media (max-width: 991.98px) {
    .fh-main { padding-inline: 1rem; }
    .fh-user-text, .fh-user-caret { display: none; }
    .fh-user { padding: .3rem; }
}

.fh-page-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.fh-page-head h1 { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--fh-carbon); display: flex; align-items: center; gap: .6rem; }
.fh-page-head h1 i { color: var(--fh-lavanda); }
.fh-page-head p { margin: .25rem 0 0; color: var(--fh-muted); }
.fh-pill {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: var(--fh-lavanda-tint); color: var(--fh-lavanda-dark);
}
.fh-card { background: var(--fh-surface); border: 1px solid var(--fh-border); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); padding: 1.25rem; }
.fh-card-title { font-size: 1rem; font-weight: 700; margin: 0; }
.fh-muted { color: var(--fh-muted); }
.fh-narrow { max-width: 520px; }

.fh-kpi { position: relative; padding-top: 1.1rem; height: 100%; }
.fh-kpi small { display: block; color: var(--fh-muted); font-weight: 600; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; margin-top: .6rem; }
.fh-kpi strong { font-size: 1.7rem; font-weight: 700; color: var(--fh-carbon); }
.fh-kpi-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fh-lavanda-tint); color: var(--fh-lavanda-dark); }
.fh-progress { height: 12px; border-radius: 999px; background: var(--fh-lavanda-tint); overflow: hidden; }
.fh-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fh-lavanda), var(--fh-lavanda-dark)); }

.fh-soon { text-align: center; padding: 2.5rem 1.5rem; max-width: 640px; margin: 0 auto; }
.fh-soon-ico { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 20px; display: grid; place-items: center; font-size: 1.8rem; background: var(--fh-lavanda-tint); color: var(--fh-lavanda-dark); }
.fh-soon-ico-warn { background: #fbe3ea; color: var(--fh-magenta); }
.fh-soon h2 { font-size: 1.2rem; font-weight: 700; }
.fh-soon p { color: var(--fh-muted); }
.fh-soon ul { list-style: none; padding: 0; margin: 1rem auto 0; display: inline-flex; flex-direction: column; gap: .5rem; text-align: left; }
.fh-soon li { display: flex; gap: .6rem; align-items: flex-start; }
.fh-soon li i { color: var(--fh-lavanda); margin-top: .25rem; }

/* ---------- Formularios y botones (compartidos) ---------- */
.fh-field { margin-bottom: 1rem; }
.fh-field label { display: block; font-size: .78rem; font-weight: 600; color: var(--fh-muted); margin-bottom: .35rem; }
.fh-input {
    display: flex; align-items: center; gap: .6rem; padding: 0 .85rem; height: 48px; border-radius: 12px;
    background: #f7f5fc; border: 1.5px solid var(--fh-border); transition: border-color .15s, box-shadow .15s, background .15s;
}
.fh-input:focus-within { border-color: var(--fh-lavanda); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--fh-lavanda) 22%, transparent); }
.fh-input > i { color: var(--fh-lavanda); width: 1rem; text-align: center; }
.fh-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .95rem; color: var(--fh-text); height: 100%; }
.fh-input input::placeholder { color: #a9a3bd; }
.fh-eye { border: 0; background: transparent; color: var(--fh-muted); padding: .3rem; border-radius: 8px; cursor: pointer; }
.fh-eye:hover { color: var(--fh-lavanda-dark); }
.fh-field-error { display: block; color: var(--fh-magenta); font-size: .78rem; margin-top: .3rem; }
.fh-field-error:empty { display: none; }

.fh-btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; height: 48px; border: 0; border-radius: 12px;
    color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
    background: linear-gradient(135deg, var(--fh-lavanda), var(--fh-lavanda-dark)); box-shadow: 0 8px 20px rgba(111, 92, 192, .35);
    transition: transform .1s, box-shadow .15s, filter .15s;
}
.fh-btn:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 10px 24px rgba(111, 92, 192, .45); }
.fh-btn:active { transform: translateY(1px); }
.fh-btn-ghost { background: var(--fh-lavanda-tint); color: var(--fh-lavanda-dark); box-shadow: none; }
.fh-btn-ghost:hover { color: var(--fh-lavanda-dark); box-shadow: none; }
.fh-btn-inline { display: inline-flex; width: auto; padding: 0 1.4rem; margin-top: .5rem; }
.fh-link { display: block; text-align: center; margin-top: 1rem; font-size: .85rem; }
.fh-link-btn { background: none; border: 0; width: 100%; color: var(--fh-lavanda-dark); text-decoration: underline; cursor: pointer; }

.fh-alert { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 12px; margin-bottom: 1rem; font-size: .88rem; background: #fbe3ea; color: #8f1d44; }
.fh-alert i { margin-top: .15rem; }
.fh-alert-ok { background: #def4ea; color: #1f6b4a; }
.fh-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--fh-lavanda-dark); }

/* ---------- Pantalla de acceso ---------- */
.fh-auth-body {
    min-height: 100%;
    background:
        radial-gradient(900px 500px at 8% 0%, rgba(140, 122, 210, .22), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(204, 51, 102, .10), transparent 60%),
        var(--fh-bg);
}
.fh-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1.25rem; max-width: 1180px; margin: 0 auto; }
.fh-auth-hero {
    position: relative; overflow: hidden; border-radius: 28px; padding: 2.5rem 2rem; color: #fff; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
    background:
        radial-gradient(420px 320px at 85% 8%, rgba(140, 122, 210, .45), transparent 65%),
        radial-gradient(360px 280px at 0% 100%, rgba(140, 122, 210, .25), transparent 65%),
        linear-gradient(160deg, var(--fh-carbon-soft), var(--fh-carbon-deep));
    box-shadow: 0 20px 50px rgba(34, 30, 55, .25);
}
.fh-auth-logo { width: min(300px, 75%); height: auto; }
.fh-chip { display: inline-flex; gap: .4rem; align-items: center; font-size: .72rem; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--fh-lavanda-light); }
.fh-auth-hero h1 { font-size: 2.1rem; font-weight: 700; margin: .4rem 0 0; }
.fh-auth-hero p { max-width: 320px; color: rgba(255, 255, 255, .72); margin: 0; }
.fh-hero-ico { margin-top: 1rem; width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center; font-size: 2.6rem; background: rgba(140, 122, 210, .22); color: var(--fh-lavanda-light); }
.fh-auth-card { display: grid; place-items: center; border-radius: 28px; padding: 1.5rem; background: rgba(255, 255, 255, .6); border: 1px solid #fff; backdrop-filter: blur(6px); }
.fh-auth-form { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--fh-border); border-radius: 22px; padding: 1.9rem 1.7rem; box-shadow: var(--fh-shadow); }
.fh-auth-title { font-size: 1.55rem; font-weight: 700; margin: .15rem 0 1.2rem; color: var(--fh-carbon); }

@media (max-width: 860px) {
    .fh-auth { grid-template-columns: 1fr; gap: .9rem; padding: .9rem; min-height: 0; }
    .fh-auth-hero { padding: 1.5rem 1.25rem; gap: .5rem; }
    .fh-auth-logo { width: 190px; }
    .fh-hero-ico, .fh-auth-hero p { display: none; }
    .fh-auth-hero h1 { font-size: 1.5rem; }
    .fh-auth-card { padding: .9rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Tablas, filtros y etiquetas (módulos de administración) ---------- */
.fh-btn-top { margin-top: 0; }
.fh-btn-sm { height: 36px; font-size: .82rem; }
.fh-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; align-items: center; }
.fh-toolbar .fh-input { height: 44px; }
.fh-toolbar .fh-btn { height: 44px; margin-top: 0; }
.fh-grow { flex: 1 1 240px; }
.fh-select {
    height: 44px; padding: 0 2rem 0 .85rem; border-radius: 12px; border: 1.5px solid var(--fh-border); background-color: #f7f5fc;
    color: var(--fh-text); font-size: .9rem; max-width: 100%;
}
.fh-select:focus { outline: 0; border-color: var(--fh-lavanda); background-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--fh-lavanda) 22%, transparent); }
.fh-select-full { width: 100%; height: 48px; }
.fh-input-ro { background: #efedf5; }
.fh-input-ro input { color: var(--fh-muted); }
.fh-hint { display: block; margin-top: .35rem; color: var(--fh-muted); font-size: .78rem; }
.fh-check { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 1rem; cursor: pointer; }
.fh-check input { width: 18px; height: 18px; accent-color: var(--fh-lavanda-dark); }
.fh-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.fh-form-actions .fh-btn { margin-top: 0; }

.fh-card-flush { padding: 0; overflow: hidden; }
.fh-table-wrap { overflow-x: auto; }
.fh-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fh-table th {
    text-align: left; padding: .8rem 1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: #fff; background: var(--fh-carbon); white-space: nowrap;
}
.fh-table td { padding: .75rem 1rem; border-top: 1px solid var(--fh-border); vertical-align: middle; }
.fh-table tbody tr:nth-child(even) { background: #faf9fd; }
.fh-table tbody tr:hover { background: var(--fh-lavanda-tint); }
.fh-empty { text-align: center; color: var(--fh-muted); padding: 2rem !important; }
.fh-nowrap { white-space: nowrap; }
.fh-col-actions { text-align: right !important; width: 1%; white-space: nowrap; }
.fh-cell-user { display: flex; flex-direction: column; line-height: 1.25; }
.fh-cell-user small { color: var(--fh-muted); }
.fh-table-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid var(--fh-border); }
.fh-pager { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--fh-muted); }
.fh-pager a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--fh-lavanda-tint); color: var(--fh-lavanda-dark); text-decoration: none; }

.fh-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; }
.fh-actions form { margin: 0; }
.fh-iconact {
    width: 34px; height: 34px; border: 0; border-radius: 10px; display: inline-grid; place-items: center; cursor: pointer;
    background: var(--fh-lavanda-tint); color: var(--fh-lavanda-dark); text-decoration: none; font-size: .85rem; transition: background .15s, color .15s;
}
.fh-iconact:hover { background: var(--fh-lavanda); color: #fff; }
.fh-iconact-danger { background: #fbe3ea; color: var(--fh-magenta); }
.fh-iconact-danger:hover { background: var(--fh-magenta); color: #fff; }

.fh-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.fh-badge-ok { background: #def4ea; color: #1f6b4a; }
.fh-badge-off { background: #ececf1; color: #6a6a78; }
.fh-badge-warn { background: #fff0d6; color: #8a5a00; }
.fh-badge-int { background: var(--fh-lavanda-tint); color: var(--fh-lavanda-dark); }
.fh-badge-cli { background: #fbe3ea; color: #8f1d44; }
.fh-badge-me { background: var(--fh-carbon); color: #fff; margin-left: .3rem; }

.fh-secret { border: 2px solid var(--fh-lavanda); background: #f4f0ff; border-radius: var(--fh-radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.fh-secret-head { display: flex; gap: .5rem; align-items: center; color: var(--fh-lavanda-dark); }
.fh-secret p { margin: .4rem 0 .75rem; font-size: .88rem; }
.fh-secret-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.fh-secret code { font-size: 1.15rem; letter-spacing: .08em; padding: .45rem .9rem; border-radius: 10px; background: #fff; border: 1px dashed var(--fh-lavanda); color: var(--fh-carbon); user-select: all; }

.fh-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0 0 1rem; }
.fh-dl dt { color: var(--fh-muted); font-weight: 600; font-size: .8rem; }
.fh-dl dd { margin: 0; }

/* ---------- Tablero: periodos en curso, navegación y métricas ---------- */
.fh-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fh-muted); margin: 0 0 .6rem; }
.fh-clock { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: .5rem; }
.fh-clock-card {
    display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-radius: var(--fh-radius); text-decoration: none;
    background: var(--fh-surface); border: 1.5px solid var(--fh-border); box-shadow: var(--fh-shadow); color: var(--fh-text);
    transition: border-color .15s, transform .1s, box-shadow .15s;
}
.fh-clock-card:hover { border-color: var(--fh-lavanda); color: var(--fh-text); transform: translateY(-1px); }
.fh-clock-card.active { border-color: var(--fh-lavanda-dark); background: linear-gradient(180deg, #f4f0ff, #fff); box-shadow: 0 8px 22px rgba(111, 92, 192, .22); }
.fh-clock-tipo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fh-lavanda-dark); }
.fh-clock-card strong { font-size: 1.35rem; font-weight: 700; color: var(--fh-carbon); line-height: 1.2; }
.fh-clock-card small { color: var(--fh-muted); }
.fh-clock-card .fh-progress { margin-top: .5rem; }
.fh-clock-avance { font-size: .72rem; color: var(--fh-muted); margin-top: .35rem; }
.fh-progress-sm { height: 7px; }

.fh-periodnav { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.fh-periodnav-title { flex: 1 1 220px; text-align: center; line-height: 1.25; min-width: 0; }
.fh-periodnav-title h2 { font-size: 1.35rem; font-weight: 700; margin: .25rem 0 0; color: var(--fh-carbon); }
.fh-periodnav-title p { margin: 0; color: var(--fh-muted); }
.fh-periodnav .fh-iconact { width: 40px; height: 40px; }
.fh-iconact-off { opacity: .35; cursor: default; pointer-events: none; }
.fh-periodnav-hoy { margin-top: 0; }

.fh-metric { height: 100%; display: flex; flex-direction: column; gap: .15rem; padding-top: 1.1rem; }
.fh-metric small { color: var(--fh-muted); font-weight: 600; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; margin-top: .6rem; }
.fh-metric strong { font-size: 1.6rem; font-weight: 700; color: var(--fh-carbon); }
.fh-metric .fh-progress { margin: .35rem 0; }
.fh-metric-ayuda { font-size: .75rem; }

@media (max-width: 480px) {
    .fh-clock { gap: .5rem; }
    .fh-clock-card { padding: .7rem .8rem; }
    .fh-clock-card strong { font-size: 1.05rem; }
    .fh-clock-big strong { font-size: 1.2rem; }
    .fh-periodnav-hoy { width: 100%; justify-content: center; }
}

/* ---------- Modo demostración: aviso, pestañas de periodicidad, tablas con cifras ---------- */
.fh-demo-banner {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -0.5rem 0 1.25rem; padding: .55rem .9rem;
    border-radius: 12px; background: #fff3cd; color: #6b4f00; border: 1px solid #ffe08a; font-size: .82rem;
}
.fh-demo-banner i { color: #b07d00; }
.fh-demo-banner strong { font-weight: 700; }

.fh-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.fh-tab {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: .05rem; padding: .45rem .9rem; border-radius: 12px;
    background: var(--fh-surface); border: 1px solid var(--fh-border); color: var(--fh-text); text-decoration: none; font-weight: 600; font-size: .85rem; line-height: 1.2;
}
.fh-tab small { font-weight: 500; color: var(--fh-muted); font-size: .72rem; }
.fh-tab:hover { border-color: var(--fh-lavanda); color: var(--fh-text); }
.fh-tab.active { background: linear-gradient(90deg, var(--fh-lavanda), var(--fh-lavanda-dark)); border-color: transparent; color: #fff; }
.fh-tab.active small { color: rgba(255, 255, 255, .85); }

.fh-money { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fh-table tfoot td { font-weight: 700; background: #f4f0ff; border-top: 2px solid var(--fh-lavanda-light); }
.fh-metric-link { text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.fh-metric-link:hover { border-color: var(--fh-lavanda); transform: translateY(-1px); color: inherit; }

.fh-stat { display: flex; flex-direction: column; gap: .1rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--fh-surface); border: 1px solid var(--fh-border); min-width: 0; }
.fh-stat small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fh-muted); }
.fh-stat strong { font-size: 1.25rem; font-weight: 700; color: var(--fh-carbon); white-space: nowrap; }
.fh-stat span { font-size: .75rem; color: var(--fh-muted); }
.fh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }

.fh-bar { display: flex; align-items: center; gap: .6rem; min-width: 160px; }
.fh-bar .fh-progress { flex: 1; height: 8px; }
.fh-bar span.fh-bar-val { font-size: .78rem; color: var(--fh-muted); white-space: nowrap; min-width: 3ch; text-align: right; }

.fh-notif-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.fh-notif-item { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 10px; text-decoration: none; color: var(--fh-text); }
.fh-notif-item:hover { background: var(--fh-lavanda-tint); color: var(--fh-text); }
.fh-notif-item i { width: 1.2rem; text-align: center; color: var(--fh-lavanda-dark); margin-top: .15rem; }
.fh-notif-item strong { display: block; font-size: .85rem; font-weight: 600; line-height: 1.25; }
.fh-notif-item small { color: var(--fh-muted); font-size: .72rem; }
.fh-notif-count { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--fh-magenta); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.fh-topbar .dropdown { position: relative; }

.fh-kardex-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.fh-kardex-logo { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--fh-lavanda), var(--fh-lavanda-dark)); }
.fh-kardex-head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--fh-carbon); }
.fh-kardex-head p { margin: 0; color: var(--fh-muted); font-size: .85rem; }
.fh-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }

/* ---------- Tablero: tarjetas de periodo con las ocho etapas ---------- */
.fh-clock-card { cursor: default; }
.fh-clock-card:hover { transform: none; }
.fh-clock-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin: .15rem 0 .4rem; }
.fh-clock-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; }
.fh-clock-link:hover strong { color: var(--fh-lavanda-dark); }
.fh-clock-big { text-align: right; line-height: 1.1; white-space: nowrap; }
.fh-clock-big strong { font-size: 1.6rem; }
.fh-clock-big small { display: block; font-size: .72rem; color: var(--fh-muted); margin-top: .15rem; }
.fh-etapas { display: flex; flex-direction: column; margin-top: .6rem; }
.fh-etapa {
    display: grid; grid-template-columns: 22px 1fr 52px 46px; gap: .5rem; align-items: center; padding: .4rem 0;
    border-top: 1px solid var(--fh-border); font-size: .82rem; color: var(--fh-text); text-decoration: none;
}
.fh-etapa:hover { color: var(--fh-lavanda-dark); }
.fh-etapa > i { color: var(--fh-muted); text-align: center; font-size: .9rem; }
.fh-etapa-body { min-width: 0; }
.fh-etapa-nombre { display: block; line-height: 1.2; margin-bottom: .25rem; }
.fh-progress-xs { height: 6px; }
.fh-etapa .fh-progress-xs span { background: var(--fh-lavanda-light); }
.fh-etapa.ok .fh-progress-xs span { background: var(--fh-ok); }
.fh-etapa-n { font-size: .75rem; color: var(--fh-muted); text-align: right; white-space: nowrap; }
.fh-etapa-p { font-weight: 700; text-align: right; white-space: nowrap; }
.fh-etapa.ok .fh-etapa-p { color: var(--fh-ok); }
.fh-etapa.off .fh-etapa-p { color: var(--fh-muted); font-weight: 600; }
.fh-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .75rem; color: var(--fh-muted); margin-bottom: 1.25rem; }
.fh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
.fh-legend-ok { background: var(--fh-ok); }
.fh-legend-run { background: var(--fh-lavanda-light); }
.fh-legend-off { background: var(--fh-lavanda-tint); border: 1px solid var(--fh-border); }

/* Tablero: semana, quincena y mes en una fila; extraordinarias abajo a lo ancho con sus etapas en dos columnas */
.fh-clock-card strong { font-size: 1.2rem; }
.fh-clock-big strong { font-size: 1.45rem; }
.fh-clock-card small { font-size: .76rem; }
.fh-etapa { grid-template-columns: 20px 1fr 46px 42px; gap: .4rem; font-size: .78rem; }
.fh-clock-wide { grid-column: 1 / -1; }
.fh-clock-wide .fh-etapas { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 1.5rem; }
@media (max-width: 1199.98px) {
    .fh-clock { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .fh-clock { grid-template-columns: 1fr; }
    .fh-clock-wide .fh-etapas { grid-template-columns: 1fr; grid-auto-flow: row; }
}