/* =====================================================================
   Restaurant Admin — Portal Web
   Estilos base. Mantiene la paleta dark del desktop (Theme.vb) para
   consistencia visual.
   ===================================================================== */

:root {
    --bg: #0D0F16;
    --surface: #181B27;
    --surface-alt: #23253A;
    --surface-hover: #2A2D3F;
    --surface-deep: #12131A;
    --border: #2D3246;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A6B9;
    --text-tertiary: #6E7282;
    --primary: #7C5CFF;
    --primary-hover: #8E74FF;
    --primary-pressed: #6A4EDC;
    --success: #22C55E;
    --warning: #FBBF24;
    --error: #EF4444;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text-primary);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

/* ======================== App shell (layout principal) ===================== */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    background: var(--surface-deep);
    border-right: 1px solid var(--border);
    padding: 24px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-title {
    font-weight: 600;
    color: var(--text-secondary);
}

.topbar-title .company { color: var(--primary); }
.topbar-title .separator { color: var(--text-tertiary); margin: 0 8px; }
.topbar-title .user { color: var(--text-primary); }

.btn-logout {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}
.btn-logout:hover {
    border-color: var(--error);
    color: var(--error);
}

.app-main {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* ======================== Sidebar nav ===================== */

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

/* Logo S&J — sidebar es 240px - 32px padding = 208px utiles. Subimos a
   160px (vs 64px) para aprovechar el espacio y que el branding tenga
   presencia. Drop-shadow morado para integrarlo con la paleta. */
.sidebar-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(124, 92, 255, 0.4));
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}

.nav-section {
    color: var(--text-tertiary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 12px 4px;
    margin-top: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--primary);
    color: white;
}

.nav-disabled {
    color: var(--text-tertiary);
    cursor: not-allowed;
}
.nav-disabled:hover {
    background: transparent;
    color: var(--text-tertiary);
}

.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.nav-label { flex: 1; }

/* ======================== Login ===================== */

.empty-layout {
    min-height: 100vh;
    background: var(--bg);
}

/* ============ Login: imagen full-bleed + card flotante a la derecha ============
   Como en el mockup S&J: la imagen del restaurant ocupa TODO el viewport
   y el card del form queda superpuesto sobre el lado derecho con
   glassmorphism, manteniendo continuidad visual con el fondo. */

.login-page {
    min-height: 100vh;
    background-image: url('img/fondo-web.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0d18;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 24px 4vw;
}

/* Logo S&J + tagline superpuestos en la esquina superior izquierda. */
.login-hero-brand {
    position: absolute;
    top: 7%;
    left: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.login-hero-logo {
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 10px 32px rgba(124, 92, 255, 0.55));
    margin-bottom: 6px;
}

.login-hero-tagline {
    color: rgba(255, 255, 255, 0.95);
    margin-top: 4px;
}

.login-hero-product {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 8px;
    color: #ECECEC;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.login-hero-subline {
    font-size: 11px;
    letter-spacing: 6px;
    color: rgba(220, 220, 240, 0.7);
    margin-top: 2px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.login-hero-accent {
    height: 2px;
    width: 80px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, #7C5CFF, transparent);
    border-radius: 2px;
}

/* ----- Card del form: flotando sobre la imagen, lado derecho ----- */
/* El panel es solo wrapper para alinear vertical/horizontalmente. El card
   tiene su propio glassmorphism (background translucido + blur) para que se
   vea integrado con la imagen detras, no como un panel solido pegado. */
.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 460px;
}

.login-card {
    width: 100%;
    /* Background translucido para que la imagen del restaurant se siga
       viendo apenas detras (efecto glass). 0.78-0.82 da buen contraste
       de lectura sin matar la conexion visual con el fondo. */
    background: linear-gradient(180deg, rgba(24, 28, 48, 0.82) 0%, rgba(14, 16, 32, 0.85) 100%);
    border: 1px solid rgba(124, 92, 255, 0.28);
    border-radius: 28px;
    padding: 44px 40px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(124, 92, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.login-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.login-icon {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(124, 92, 255, 0.45));
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text-primary);
    text-align: center;
}

.login-subtitle {
    color: var(--text-secondary);
    margin: 0 0 28px;
    font-size: 14px;
    text-align: center;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

.input-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.input-toggle:hover { color: var(--text-primary); }

.form-input {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-input.input-pl { padding-left: 42px; }
.form-input.input-pr { padding-right: 42px; }

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(124, 92, 255, 0.06);
}

.form-input::placeholder { color: var(--text-tertiary); }

.login-submit {
    background: linear-gradient(90deg, #5E72FF 0%, #8E5CFF 50%, #B85CFF 100%);
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    box-shadow: 0 8px 24px rgba(94, 114, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    width: 100%;
}

.login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(94, 114, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    filter: brightness(1.08);
}

.login-submit span:first-child { flex: 1; text-align: center; }

.login-submit:disabled {
    background: var(--surface-alt);
    cursor: not-allowed;
    color: var(--text-tertiary);
    box-shadow: none;
}

.submit-arrow { font-size: 18px; }

/* Legacy alias para que paginas que usan .btn-primary sigan funcionando */
.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:disabled { background: var(--surface-alt); cursor: not-allowed; color: var(--text-tertiary); }

.login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--error);
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 4px;
}

.login-separator {
    display: flex;
    align-items: center;
    margin: 24px 0 16px;
    color: var(--text-tertiary);
    font-size: 13px;
}
.login-separator::before, .login-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.login-separator span { padding: 0 14px; }

.login-help {
    display: block;
    text-align: center;
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px;
}
.login-help:hover { color: var(--primary-hover); text-decoration: underline; }

.login-footer-floating {
    position: absolute;
    bottom: 16px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(220, 220, 240, 0.7);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 2;
}
.login-footer-floating .footer-status,
.login-footer-floating .footer-version { pointer-events: auto; }

.footer-status { display: inline-flex; align-items: center; gap: 6px; }
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    display: inline-block;
}

/* Responsive: en pantallas chicas el brand del hero se oculta para que
   el card sea legible. El fondo del restaurant se mantiene pero queda
   muy atras del card que ahora ocupa el centro. */
@media (max-width: 900px) {
    .login-page {
        justify-content: center;
        padding: 16px;
    }
    .login-hero-brand { display: none; }
    .login-card { padding: 32px 24px; }
}

/* ======================== Páginas (Home, etc.) ===================== */

.page-header { margin-bottom: 24px; }
.page-header h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.page-subtitle { color: var(--text-secondary); margin: 0; font-size: 14px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-card-link {
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}
.info-card-link:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.info-card-icon { font-size: 28px; }
.info-card h2 { margin: 0; font-size: 16px; font-weight: 600; }
.info-card p { margin: 0; color: var(--text-secondary); font-size: 13px; flex: 1; }

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    align-self: flex-start;
}
.badge-soon { background: rgba(124, 92, 255, 0.15); color: var(--primary); }
.badge-ready { background: rgba(34, 197, 94, 0.15); color: var(--success); }

/* ======================== Health page ===================== */

.health-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
}

.health-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.health-label { font-size: 12px; color: var(--text-secondary); }
.health-value { font-size: 13px; color: var(--text-primary); font-family: Consolas, monospace; }
.health-idle { color: var(--text-tertiary); font-style: italic; }
.health-testing { color: var(--warning); }
.health-ok { color: var(--success); font-weight: 600; }
.health-fail { color: var(--error); font-weight: 600; }

.health-error {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px;
}
.health-error pre { margin: 8px 0 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; }

.health-actions { margin-top: 8px; }

/* ======================== Responsive ===================== */

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: auto;
        flex-direction: row;
        padding: 8px;
        z-index: 100;
        border-right: none;
        border-top: 1px solid var(--border);
        overflow-x: auto;
    }

    .sidebar-brand { display: none; }
    .nav-section { display: none; }

    .sidebar-nav {
        flex-direction: row;
        flex: 1;
        gap: 2px;
        padding: 0;
    }

    .nav-item { flex: 1; min-width: 60px; flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 10px; text-align: center; }
    .nav-icon { font-size: 18px; width: auto; }
    .nav-label { font-size: 9px; }

    .app-main { padding: 16px; padding-bottom: 80px; }
    .app-topbar { padding: 10px 16px; }
}


/* ===== W2: Dashboard de Costos, Análisis FC, Recetas ===== */

.page-header { margin-bottom: 24px; }
.page-header h1 { margin: 0 0 6px 0; font-size: 28px; color: var(--text-primary); font-weight: 600; }
.page-subtitle { margin: 0; color: var(--text-secondary); font-size: 14px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.card-title { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }

/* Filtros */
.filters .filters-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.filter-group.flex-grow { flex: 1; min-width: 240px; }
.filter-group label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.form-input, .form-select { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 10px; border-radius: 6px; font-size: 14px; min-height: 36px; }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--primary); }

.btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color 0.15s; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: var(--surface-alt); color: var(--text-primary); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
a.btn { text-decoration: none; display: inline-block; }

/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; letter-spacing: 0.3px; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.kpi-sub { font-size: 12px; color: var(--text-tertiary); }

.kpi-fc.fc-ok .kpi-value { color: #22C55E; }
.kpi-fc.fc-warning .kpi-value { color: #F0C850; }
.kpi-fc.fc-critical .kpi-value { color: #E65A5A; }

.delta-good { color: #22C55E; }
.delta-bad { color: #E65A5A; }
.delta-neutral { color: var(--text-secondary); }

/* Charts grid (dashboard) */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-section { min-height: 320px; }
.chart-footnote { margin-top: 8px; font-size: 11px; color: var(--text-tertiary); font-style: italic; }

/* Tabla de datos */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th { text-align: left; padding: 10px 12px; background: var(--surface-deep); color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid var(--border); white-space: nowrap; }
.data-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.data-table tbody tr:hover { background: var(--surface-hover); }
.th-sub { font-weight: 400; font-size: 11px; color: var(--text-tertiary); }
.table-scroll { overflow-x: auto; max-height: 500px; }
.empty { color: var(--text-tertiary); font-style: italic; text-align: center; padding: 24px; }

/* Strip de totales */
.totals-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.total-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.total-label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.total-value { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.total-value.fc-ok { color: #22C55E; }
.total-value.fc-warning { color: #F0C850; }
.total-value.fc-critical { color: #E65A5A; }

.grids-stack { display: flex; flex-direction: column; gap: 16px; }

/* Alertas */
.alerts-list { display: flex; flex-direction: column; gap: 8px; }
.alert-item { padding: 12px 16px; border-radius: 8px; border-left: 4px solid; background: var(--surface-deep); }
.alert-item.alert-info { border-color: #3B82F6; }
.alert-item.alert-warning { border-color: #F0C850; }
.alert-item.alert-critical { border-color: #E65A5A; }
.alert-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-size: 14px; }
.alert-detail { font-size: 12px; color: var(--text-secondary); }
.alert-error { border-left: 4px solid #E65A5A; color: #E65A5A; }

/* PDFs */
.pdf-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1024px) {
    .charts-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .totals-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kpi-grid, .totals-strip { grid-template-columns: 1fr; }
    .page-header h1 { font-size: 22px; }
    .kpi-value { font-size: 22px; }
}

/* ===== W2 mejoras: modal drill-down + alineacion numericos ===== */

.data-table-clickable tbody tr { cursor: pointer; }
.data-table-clickable tbody tr:hover { background: var(--surface-hover); }
.td-num, .th-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid-hint { margin-top: 8px; font-size: 11px; color: var(--text-tertiary); font-style: italic; }

/* Modal overlay (drill-down) */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; animation: fade-in 0.15s ease;
}
.modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    max-height: 90vh; width: 100%; max-width: 720px;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slide-up 0.18s ease;
}
.modal-lg { max-width: 1100px; }
.modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 18px; color: var(--text-primary); }
.modal-subtitle { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }
.modal-close {
    background: transparent; border: none; color: var(--text-secondary);
    font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 16px 20px; overflow: auto; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
    .modal-overlay { padding: 8px; }
    .modal-header { padding: 14px 16px; }
    .modal-body { padding: 12px 14px; }
}

/* ===== Comparativa: deltas con color (CSS specificity > .data-table tbody td) ===== */
/* Sin estos selectores especificos, el .data-table tbody td gana por specificity
   y pisa el color de las clases delta-*. */
.data-table tbody td.delta-good { color: #22C55E; font-weight: 600; }
.data-table tbody td.delta-bad  { color: #E65A5A; font-weight: 600; }
.data-table tbody td.delta-neutral { color: var(--text-secondary); }

/* Zebra rows + alineacion mejorada en la tabla comparativa */
.data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.data-table tbody td:first-child { color: var(--text-secondary); font-weight: 500; }

/* Sub-header de fechas en la columna comparativa con un poco mas de contraste */
.data-table thead th { font-weight: 600; }
.th-sub { display: block; font-weight: 400; font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ===== Health page simplificada (sin connection string) ===== */
.health-panel-simple { max-width: 720px; }

.health-status { margin-bottom: 24px; }

.status-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-deep);
}

.status-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.status-ok { border-color: rgba(34, 197, 94, 0.4); }
.status-ok .status-icon { background: rgba(34, 197, 94, 0.18); color: #22C55E; }

.status-fail { border-color: rgba(230, 90, 90, 0.4); }
.status-fail .status-icon { background: rgba(230, 90, 90, 0.18); color: #E65A5A; }

.status-idle { }
.status-idle .status-icon { background: var(--surface-alt); color: var(--text-tertiary); }

.status-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.status-detail { font-size: 13px; color: var(--text-secondary); }

.health-actions { display: flex; gap: 12px; }

/* ===== Access denied (replica del FrmAccessDenied del desktop) ===== */
.access-denied-shell {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.access-denied-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.access-denied-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(230, 90, 90, 0.18);
    border: 2px solid rgba(230, 90, 90, 0.45);
    color: #E65A5A;
    font-size: 44px;
    font-weight: 700;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.access-denied-title {
    margin: 0 0 12px;
    font-size: 24px;
    color: var(--text-primary);
}

.access-denied-message {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 8px;
    line-height: 1.5;
}

.access-denied-help {
    color: var(--text-tertiary);
    font-size: 13px;
    margin: 0 0 24px;
}

.access-denied-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ===== Recepción de facturas (modal de confirmación) ===== */
.confirm-summary {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 14px;
    padding: 14px 16px;
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 10px;
}
.confirm-summary > div {
    display: contents;
}
.confirm-summary span {
    color: var(--text-secondary);
    font-size: 13px;
}
.confirm-summary strong {
    color: var(--text-primary);
    font-size: 13px;
    word-break: break-word;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-deep);
    border-radius: 0 0 12px 12px;
}

.alert-success {
    border-left: 4px solid #22C55E;
    color: #22C55E;
    background: rgba(34, 197, 94, 0.08);
    padding: 12px 16px;
}

/* ===== Modal section title (subtitulos dentro de modales con drill-down) ===== */
.modal-section-title {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

/* ===== Modal footer con 3 acciones (Cancelar | Rechazar | Parcial | Aceptar) ===== */
.modal-footer-3btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.modal-actions-right {
    display: flex;
    gap: 8px;
}

/* Botones semanticos para acciones destructivas / advertencia */
.btn-warning {
    background: rgba(240, 200, 80, 0.16);
    color: #F0C850;
    border: 1px solid rgba(240, 200, 80, 0.4);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.btn-warning:hover:not(:disabled) {
    background: rgba(240, 200, 80, 0.25);
}
.btn-warning:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger {
    background: rgba(230, 90, 90, 0.16);
    color: #E65A5A;
    border: 1px solid rgba(230, 90, 90, 0.4);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.btn-danger:hover:not(:disabled) {
    background: rgba(230, 90, 90, 0.25);
}
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }