:root {
    --bg: #edf3f8;
    --surface: rgba(255,255,255,.74);
    --surface-strong: rgba(255,255,255,.90);
    --border: rgba(255,255,255,.68);
    --text: #142033;
    --muted: #6d7b8f;
    --dark: #0b1220;
    --blue: #246bfd;
    --blue-2: #4f8cff;
    --green: #15a66a;
    --red: #e44855;
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 18px;
    --shadow: 0 20px 50px rgba(27, 39, 61, .10);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        linear-gradient(180deg, #f5f8fb 0%, #eaf0f6 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.08));
    z-index: -3;
}

.app-bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
    z-index: -2;
}

.orb-1 {
    width: 340px;
    height: 340px;
    top: -150px;
    right: -120px;
    background: rgba(64, 123, 255, .18);
}

.orb-2 {
    width: 300px;
    height: 300px;
    left: -160px;
    bottom: -120px;
    background: rgba(25, 166, 106, .12);
}

.premium-glass {
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.app-navbar {
    min-height: 66px;
    background: rgba(11, 18, 32, .88);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.app-brand {
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}

.app-brand strong,
.app-brand small {
    display: block;
    line-height: 1.05;
}

.app-brand strong { font-size: .98rem; }
.app-brand small {
    color: rgba(255,255,255,.55);
    font-size: .67rem;
    margin-top: .18rem;
    font-weight: 500;
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #4c8cff, #1e5df4);
    box-shadow: 0 8px 22px rgba(36,107,253,.32);
}

.user-chip {
    align-items: center;
    gap: .65rem;
    padding: .34rem .7rem .34rem .34rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.16);
    color: white;
    font-weight: 800;
}

.user-chip-text strong,
.user-chip-text small { display: block; line-height: 1.05; }
.user-chip-text strong { color: white; font-size: .75rem; }
.user-chip-text small { color: rgba(255,255,255,.48); font-size: .62rem; margin-top: .15rem; }

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    text-decoration: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
}

.app-main { position: relative; }

.glass-alert {
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(20,32,51,.08);
    backdrop-filter: blur(18px);
}

/* LOGIN */
.login-shell {
    min-height: calc(100vh - 2rem);
    display: grid;
    place-items: center;
    padding: 1rem 0;
}

.login-card {
    width: min(100%, 460px);
    border-radius: var(--radius-xl);
    padding: 1.35rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.7rem;
}

.brand-logo-xl {
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    border-radius: 21px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.9rem;
    background: linear-gradient(145deg, #13223c, #0b1220);
    box-shadow: 0 16px 30px rgba(11,18,32,.22);
}

.login-brand h1 {
    margin: .12rem 0 .18rem;
    font-size: 1.7rem;
    font-weight: 850;
    letter-spacing: -.04em;
}

.login-brand p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
}

.eyebrow {
    color: #7b899b;
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .13em;
}

.floating-field {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 72px;
    padding: .75rem 1rem;
    border-radius: 20px;
    border: 1px solid #e0e7ef;
    background: rgba(248,250,252,.78);
    transition: .2s ease;
}

.floating-field:focus-within {
    border-color: rgba(36,107,253,.45);
    background: rgba(255,255,255,.94);
    box-shadow: 0 0 0 4px rgba(36,107,253,.08);
}

.floating-field > i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: rgba(36,107,253,.09);
    font-size: 1rem;
}

.floating-field label {
    display: block;
    font-size: .69rem;
    font-weight: 750;
    color: #738095;
    margin-bottom: .1rem;
}

.floating-field input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--text);
    font-size: .98rem;
    font-weight: 650;
}

.floating-field input::placeholder { color: #a4afbd; font-weight: 450; }

.login-footer-note {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    color: #7b899b;
    font-size: .72rem;
    text-align: center;
}

/* BUTTONS */
.app-primary-btn,
.danger-solid-btn,
.success-solid-btn,
.dark-solid-btn {
    min-height: 58px;
    border: 0;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.app-primary-btn {
    color: #fff;
    background: linear-gradient(135deg, var(--blue-2), var(--blue));
    box-shadow: 0 14px 28px rgba(36,107,253,.25);
}
.app-primary-btn:hover { color: #fff; transform: translateY(-1px); }

.app-primary-btn-lg {
    width: min(100%, 340px);
    min-height: 66px;
    font-size: 1rem;
}

.app-secondary-btn {
    min-height: 54px;
    border-radius: 17px;
    border: 1px solid #dde5ee;
    background: rgba(246,248,251,.86);
    color: #46566b;
    font-weight: 750;
}

.danger-solid-btn { color: white; background: linear-gradient(135deg, #f05c67, #d93b48); }
.success-solid-btn { color: white; background: linear-gradient(135deg, #28ba7f, #11955f); }
.dark-solid-btn { color: white; background: linear-gradient(135deg, #26344a, #0b1220); }

/* IDLE */
.idle-screen {
    min-height: calc(100vh - 120px);
    border-radius: var(--radius-xl);
    padding: 2rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.idle-icon-wrap {
    width: 122px;
    height: 122px;
    margin-bottom: 1.4rem;
    padding: 12px;
    border-radius: 38px;
    background: rgba(36,107,253,.08);
}

.idle-icon {
    width: 100%;
    height: 100%;
    border-radius: 29px;
    display: grid;
    place-items: center;
    color: white;
    font-size: 2.6rem;
    background: linear-gradient(145deg, #4d8bff, #246bfd);
    box-shadow: 0 22px 40px rgba(36,107,253,.25);
}

.idle-title {
    font-size: clamp(2rem, 9vw, 3.4rem);
    font-weight: 880;
    letter-spacing: -.055em;
    margin: .3rem 0 .65rem;
}

.idle-copy {
    max-width: 380px;
    color: var(--muted);
    margin-bottom: 1.6rem;
    font-size: .95rem;
}

/* MODALS */
.modal-backdrop {
    background: rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal-backdrop.show {
    opacity: 1 !important;
}

.modern-modal .modal-dialog {
    margin: .75rem;
}

.modal-glass {
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.92);
    overflow: hidden;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .18);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.modern-modal .modal-header,
.modern-modal .modal-footer {
    border: 0;
    padding: 1.1rem;
}

.modern-modal .modal-body {
    padding: .6rem 1.1rem 1.2rem;
}

.modal-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.modal-heading h2 {
    margin: .1rem 0 0;
    font-size: 1.15rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}
.modal-icon.blue { color: #246bfd; background: rgba(36,107,253,.1); }
.modal-icon.red { color: #d93b48; background: rgba(228,72,85,.1); }

.close-circle {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #eef2f6;
    color: #5d6c7f;
}

.operator-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem;
    border-radius: 18px;
    border: 1px solid #e5ebf2;
    background: rgba(248,250,252,.78);
}

.operator-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #172033;
    color: white;
    font-weight: 850;
}

.operator-card small,
.operator-card strong { display:block; }
.operator-card small { color: var(--muted); font-size: .68rem; }
.operator-card strong { font-size: .92rem; }
.operator-card > i { margin-left: auto; color: var(--green); }

.form-section + .form-section { margin-top: 1.15rem; }

.section-label {
    display: block;
    font-size: .82rem;
    font-weight: 820;
    margin-bottom: .35rem;
}

.section-help {
    color: var(--muted);
    font-size: .76rem;
    margin: 0 0 .6rem;
}

.modern-select,
.modern-textarea {
    width: 100%;
    border: 1px solid #dfe7ef;
    background: rgba(250,252,254,.88);
    color: var(--text);
    border-radius: 17px;
    outline: 0;
}

.modern-select {
    min-height: 56px;
    padding: 0 .9rem;
}

.modern-textarea { padding: .9rem; resize: vertical; }

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
}

.choice-card {
    min-height: 68px;
    padding: .7rem;
    border-radius: 18px;
    border: 1px solid #e0e7ef;
    background: rgba(248,250,252,.86);
    color: #46566b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: .84rem;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.btn-check:checked + .choice-card {
    color: var(--blue);
    border-color: rgba(36,107,253,.36);
    background: rgba(36,107,253,.09);
    box-shadow: inset 0 0 0 1px rgba(36,107,253,.08);
}

/* OPERATION */
.operation-dashboard {
    display: grid;
    gap: 1rem;
}

.status-card {
    border-radius: var(--radius-xl);
    padding: 1.15rem;
}

.status-card.is-running { border-top: 3px solid rgba(21,166,106,.62); }
.status-card.is-stopped { border-top: 3px solid rgba(228,72,85,.68); }

.status-top {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.status-title-row {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.status-title-row h1 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 860;
    letter-spacing: -.02em;
}

.status-pulse {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.status-pulse.success {
    background: var(--green);
    box-shadow: 0 0 0 6px rgba(21,166,106,.10);
}
.status-pulse.danger {
    background: var(--red);
    box-shadow: 0 0 0 6px rgba(228,72,85,.10);
}

.state-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .48rem .72rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
}
.state-pill.success { color: #0b8554; background: rgba(21,166,106,.1); }
.state-pill.danger { color: #c93441; background: rgba(228,72,85,.1); }

.hero-timer-block {
    text-align: center;
    padding: 1.5rem .5rem 1rem;
}

.timer-caption {
    color: var(--muted);
    font-size: .69rem;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.hero-timer {
    color: #0d1627;
    font-size: clamp(3.1rem, 15vw, 5.8rem);
    line-height: .96;
    font-weight: 900;
    letter-spacing: -.065em;
    font-variant-numeric: tabular-nums;
    margin: .55rem 0 .6rem;
}

.timer-start {
    color: #7d8999;
    font-size: .73rem;
}

.active-stop-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(228,72,85,.18);
    background: rgba(255,241,243,.70);
}

.active-stop-info {
    display:flex;
    align-items:center;
    gap:.75rem;
}

.active-stop-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(145deg,#ef6671,#d93b48);
}

.active-stop-info small,
.active-stop-info strong { display:block; }
.active-stop-info small { color:#c34550; font-size:.66rem; font-weight:850; }
.active-stop-info strong { font-size:.9rem; }
.active-stop-info p { margin:.2rem 0 0; color:var(--muted); font-size:.72rem; }

.stop-timer {
    font-size: 2rem;
    font-weight: 900;
    color: #c93441;
    font-variant-numeric: tabular-nums;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.info-tile {
    min-height: 126px;
    border-radius: 22px;
    padding: 1rem;
}

.info-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #4c6078;
    background: rgba(79,108,145,.08);
    margin-bottom: .75rem;
}

.info-tile small,
.info-tile strong { display:block; }
.info-tile small { color:var(--muted); font-size:.68rem; margin-bottom:.2rem; }
.info-tile strong { font-size:.82rem; line-height:1.28; }

.metrics-strip {
    border-radius: 22px;
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.metric-item {
    text-align: center;
}
.metric-item span,
.metric-item strong { display:block; }
.metric-item span { color:var(--muted); font-size:.68rem; }
.metric-item strong {
    margin-top:.2rem;
    font-size:1.3rem;
    font-weight:880;
    font-variant-numeric: tabular-nums;
}
.metric-divider { width:1px; height:42px; background:#dfe6ee; }

.main-actions {
    display: grid;
    gap: .75rem;
    padding-bottom: .6rem;
}

.danger-action-btn,
.success-action-btn,
.finish-action-btn {
    width: 100%;
    min-height: 76px;
    border: 0;
    border-radius: 22px;
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.8rem 1rem;
    text-align:left;
}

.danger-action-btn {
    color:white;
    background: linear-gradient(135deg,#ed5b67,#d93b48);
    box-shadow: 0 16px 28px rgba(217,59,72,.19);
}
.success-action-btn {
    color:white;
    background: linear-gradient(135deg,#25b779,#11955f);
    box-shadow: 0 16px 28px rgba(17,149,95,.17);
}
.finish-action-btn {
    color:#223046;
    background: rgba(255,255,255,.72);
    border:1px solid rgba(215,224,234,.9);
    box-shadow: var(--shadow);
}

.danger-action-btn small,
.danger-action-btn strong,
.success-action-btn small,
.success-action-btn strong,
.finish-action-btn small,
.finish-action-btn strong { display:block; }

.danger-action-btn small,
.success-action-btn small { color:rgba(255,255,255,.72); }
.finish-action-btn small { color:var(--muted); }

.danger-action-btn small,
.success-action-btn small,
.finish-action-btn small { font-size:.66rem; }
.danger-action-btn strong,
.success-action-btn strong,
.finish-action-btn strong { font-size:.84rem; }

.action-icon {
    width:46px;
    height:46px;
    flex:0 0 auto;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.14);
    font-size:1.15rem;
}
.finish-action-btn .action-icon {
    background:#edf2f7;
    color:#34445a;
}

/* STOP REASONS */
.stop-reasons-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:.6rem;
}

.stop-reason-card {
    min-height:64px;
    display:flex;
    align-items:center;
    gap:.72rem;
    padding:.7rem;
    border-radius:18px;
    border:1px solid #e3e9f0;
    background:rgba(249,251,253,.82);
    color:#39495f;
    font-size:.8rem;
    font-weight:790;
    cursor:pointer;
}

.stop-reason-icon {
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#d3424f;
    background:rgba(228,72,85,.08);
}

.stop-reason-card .check {
    margin-left:auto;
    color:transparent;
}

.btn-check:checked + .stop-reason-card {
    border-color:rgba(228,72,85,.35);
    color:#c93441;
    background:rgba(228,72,85,.08);
}
.btn-check:checked + .stop-reason-card .check { color:#d3424f; }

/* CONFIRM */
.confirmation-modal {
    padding:1.25rem;
    text-align:center;
}

.confirm-icon {
    width:62px;
    height:62px;
    margin:0 auto 1rem;
    border-radius:20px;
    display:grid;
    place-items:center;
    font-size:1.6rem;
}
.confirm-icon.green { color:#11955f; background:rgba(21,166,106,.1); }
.confirm-icon.dark { color:#1c2a3e; background:#edf1f5; }

.confirmation-modal h2 {
    font-size:1.35rem;
    font-weight:870;
    letter-spacing:-.03em;
}

.confirmation-modal > p {
    color:var(--muted);
    font-size:.8rem;
    margin:.45rem auto 1rem;
    max-width:340px;
}

.summary-preview {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.55rem;
    margin:1rem 0;
}

.summary-preview > div {
    padding:.75rem;
    border-radius:16px;
    background:rgba(245,248,251,.86);
    border:1px solid #e6ebf1;
    text-align:left;
}
.summary-preview span,
.summary-preview strong { display:block; }
.summary-preview span { color:var(--muted); font-size:.65rem; }
.summary-preview strong { font-size:.78rem; margin-top:.15rem; }

.confirm-note {
    font-size:.68rem !important;
}

.confirm-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.65rem;
    margin-top:1rem;
}

/* MOBILE NAV */
.mobile-bottom-nav {
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:1040;
    height:66px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    border:1px solid rgba(255,255,255,.65);
    border-radius:22px;
    background:rgba(15,24,40,.90);
    box-shadow:0 18px 44px rgba(11,18,32,.22);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
}

.mobile-nav-item {
    min-width:70px;
    color:rgba(255,255,255,.62);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.18rem;
    font-size:.61rem;
    font-weight:720;
}
.mobile-nav-item i { font-size:1.12rem; color:white; }
.with-mobile-nav { padding-bottom:96px !important; }

/* TABLE / ADMIN COMPAT */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding:.95rem; }
.admin-stat { border-radius:22px; padding:1rem; }
.admin-stat i,.admin-stat strong,.admin-stat span { display:block; }
.admin-stat strong { font-size:1.8rem; margin-top:.45rem; }
.admin-stat span { color:var(--muted); font-size:.76rem; }

@media (min-width: 576px) {
    .modern-modal .modal-dialog { margin: 1.75rem auto; }
    .modal-glass { max-width: 560px; margin:auto; }
    .choice-grid { grid-template-columns: repeat(3, 1fr); }
    .stop-reasons-grid { grid-template-columns: repeat(2,1fr); }
}

@media (min-width: 768px) {
    .login-card { padding:2rem; }
    .status-card { padding:1.6rem; }
    .status-top { flex-direction:row; align-items:flex-start; justify-content:space-between; }
    .state-pill { align-self:auto; }
    .active-stop-card { flex-direction:row; align-items:center; justify-content:space-between; }
    .info-grid { grid-template-columns:repeat(4,1fr); }
    .main-actions { grid-template-columns:1.4fr .8fr; }
    .mobile-bottom-nav { display:none !important; }
    .with-mobile-nav { padding-bottom:1.5rem !important; }
}

@media (min-width: 992px) {
    .operation-dashboard { max-width:980px; margin:0 auto; }
    .idle-screen { max-width:980px; margin:0 auto; min-height:68vh; }
}

.touching { transform: scale(.985) !important; }


/* =========================================================
   CORRECCION MODALES BOOTSTRAP
   Evita que el modal quede detras del backdrop.
   ========================================================= */
.app-main {
    position: relative;
    z-index: auto !important;
}

.modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
    background: rgba(15, 23, 42, .18) !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

.modal-dialog {
    position: relative;
    z-index: 1061;
}

/* ============================================================
   IBC SMARTPLANT — IOS FLAT
   Inspirado en iOS 14/15: limpio, claro, plano y táctil
   ============================================================ */

:root {
    --ios-bg: #f2f2f7;
    --ios-card: #ffffff;
    --ios-card-soft: #f8f8fa;
    --ios-text: #1c1c1e;
    --ios-secondary: #6e6e73;
    --ios-tertiary: #8e8e93;
    --ios-separator: #e5e5ea;
    --ios-blue: #007aff;
    --ios-blue-pressed: #0067d8;
    --ios-green: #34c759;
    --ios-red: #ff3b30;
    --ios-orange: #ff9500;
    --ios-radius: 22px;
    --ios-radius-small: 16px;
    --ios-shadow: 0 6px 20px rgba(0,0,0,.055);
}

html,
body {
    background: var(--ios-bg) !important;
    color: var(--ios-text) !important;
}

body::before,
.app-bg-orb {
    display: none !important;
}

/* ------------------------------------------------------------
   NAV SUPERIOR
   ------------------------------------------------------------ */

.app-navbar {
    min-height: 64px !important;
    background: rgba(249,249,251,.96) !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.app-brand {
    color: var(--ios-text) !important;
}

.app-brand strong {
    color: var(--ios-text) !important;
    font-weight: 750 !important;
    letter-spacing: -.025em;
}

.app-brand small {
    color: var(--ios-secondary) !important;
}

.brand-mark {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    color: white !important;
    background: var(--ios-blue) !important;
    box-shadow: none !important;
    border: 0 !important;
}

.user-chip {
    background: #ffffff !important;
    border: 1px solid var(--ios-separator) !important;
    box-shadow: none !important;
}

.user-avatar {
    background: #e9e9ee !important;
    color: var(--ios-text) !important;
}

.user-chip-text strong {
    color: var(--ios-text) !important;
}

.user-chip-text small {
    color: var(--ios-secondary) !important;
}

.icon-btn {
    background: #ffffff !important;
    border: 1px solid var(--ios-separator) !important;
    color: var(--ios-blue) !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   TARJETAS
   ------------------------------------------------------------ */

.premium-glass,
.status-card,
.info-tile,
.metrics-strip,
.admin-stat {
    background: var(--ios-card) !important;
    border: 1px solid rgba(0,0,0,.035) !important;
    box-shadow: var(--ios-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.premium-glass {
    border-radius: var(--ios-radius) !important;
}

.status-card {
    border-radius: 26px !important;
    border-top: 0 !important;
}

.info-tile,
.metrics-strip {
    border-radius: 20px !important;
}

/* ------------------------------------------------------------
   LOGIN
   ------------------------------------------------------------ */

.login-shell {
    padding: 1rem !important;
}

.login-card {
    max-width: 440px;
    padding: 1.5rem !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.075) !important;
}

.login-brand {
    margin-bottom: 1.6rem !important;
}

.brand-logo-xl {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    background: var(--ios-blue) !important;
    box-shadow: none !important;
    border: 0 !important;
}

.login-brand h1 {
    color: var(--ios-text) !important;
}

.login-brand p,
.login-footer-note {
    color: var(--ios-secondary) !important;
}

/* ------------------------------------------------------------
   CAMPOS
   ------------------------------------------------------------ */

.floating-field,
.modern-select,
.modern-textarea,
.operator-card {
    background: #f7f7f9 !important;
    border: 1px solid #ededf0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.floating-field {
    min-height: 68px !important;
    border-radius: 17px !important;
}

.floating-field > i {
    background: #e9f2ff !important;
    color: var(--ios-blue) !important;
    border-radius: 11px !important;
}

.floating-field:focus-within,
.modern-select:focus,
.modern-textarea:focus {
    background: #ffffff !important;
    border-color: rgba(0,122,255,.42) !important;
    box-shadow: 0 0 0 3px rgba(0,122,255,.09) !important;
}

.modern-select {
    min-height: 55px !important;
    border-radius: 15px !important;
}

.modern-textarea {
    border-radius: 16px !important;
}

/* ------------------------------------------------------------
   BOTONES IOS
   ------------------------------------------------------------ */

.app-primary-btn,
.danger-solid-btn,
.success-solid-btn,
.dark-solid-btn,
.danger-action-btn,
.success-action-btn,
.finish-action-btn {
    box-shadow: none !important;
    border: 0 !important;
    transition: transform .12s ease, opacity .12s ease, background .12s ease;
}

.app-primary-btn {
    min-height: 56px !important;
    border-radius: 16px !important;
    background: var(--ios-blue) !important;
    color: white !important;
}

.app-primary-btn:hover,
.app-primary-btn:focus {
    background: var(--ios-blue-pressed) !important;
    color: white !important;
}

.app-primary-btn:active,
.danger-action-btn:active,
.success-action-btn:active,
.finish-action-btn:active {
    transform: scale(.985);
}

.danger-solid-btn,
.danger-action-btn {
    background: var(--ios-red) !important;
    color: white !important;
}

.success-solid-btn,
.success-action-btn {
    background: var(--ios-green) !important;
    color: white !important;
}

.dark-solid-btn {
    background: #2c2c2e !important;
    color: white !important;
}

.finish-action-btn {
    background: #ffffff !important;
    color: var(--ios-text) !important;
    border: 1px solid var(--ios-separator) !important;
}

.action-icon {
    background: rgba(255,255,255,.18) !important;
    border: 0 !important;
}

.finish-action-btn .action-icon {
    background: #f2f2f7 !important;
    color: #3a3a3c !important;
}

/* ------------------------------------------------------------
   PANTALLA SIN TURNO
   ------------------------------------------------------------ */

.idle-screen {
    min-height: calc(100vh - 122px) !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: var(--ios-shadow) !important;
}

.idle-icon-wrap {
    width: 112px !important;
    height: 112px !important;
    padding: 10px !important;
    background: #f0f6ff !important;
    border: 0 !important;
    border-radius: 34px !important;
}

.idle-icon {
    border-radius: 26px !important;
    background: var(--ios-blue) !important;
    box-shadow: none !important;
    border: 0 !important;
}

.idle-title {
    color: var(--ios-text) !important;
    font-weight: 800 !important;
}

.idle-copy {
    color: var(--ios-secondary) !important;
}

/* ------------------------------------------------------------
   ESTADO DEL TURNO
   ------------------------------------------------------------ */

.status-top {
    gap: .75rem !important;
}

.eyebrow {
    color: var(--ios-tertiary) !important;
}

.status-title-row h1 {
    color: var(--ios-text) !important;
}

.status-pulse.success {
    background: var(--ios-green) !important;
    box-shadow: 0 0 0 5px rgba(52,199,89,.11) !important;
}

.status-pulse.danger {
    background: var(--ios-red) !important;
    box-shadow: 0 0 0 5px rgba(255,59,48,.10) !important;
}

.state-pill {
    font-size: .72rem !important;
    padding: .48rem .72rem !important;
}

.state-pill.success {
    color: #248a3d !important;
    background: #eaf8ee !important;
}

.state-pill.danger {
    color: #d70015 !important;
    background: #fff0ef !important;
}

.hero-timer {
    color: #000000 !important;
}

.timer-caption,
.timer-start {
    color: var(--ios-secondary) !important;
}

.active-stop-card {
    background: #fff4f3 !important;
    border: 1px solid #ffe0de !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.active-stop-icon {
    background: var(--ios-red) !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   INFORMACION
   ------------------------------------------------------------ */

.info-icon {
    background: #f2f2f7 !important;
    color: #636366 !important;
    border: 0 !important;
}

.info-tile small,
.metric-item span {
    color: var(--ios-secondary) !important;
}

.info-tile strong,
.metric-item strong {
    color: var(--ios-text) !important;
}

.metric-divider {
    background: var(--ios-separator) !important;
}

/* ------------------------------------------------------------
   OPCIONES DE LARGOS Y DETENCIONES
   ------------------------------------------------------------ */

.choice-card,
.stop-reason-card {
    background: #f7f7f9 !important;
    border: 1px solid #e9e9ed !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #3a3a3c !important;
}

.choice-card {
    min-height: 64px !important;
    border-radius: 16px !important;
}

.stop-reason-card {
    border-radius: 16px !important;
}

.btn-check:checked + .choice-card {
    color: var(--ios-blue) !important;
    background: #eef6ff !important;
    border-color: rgba(0,122,255,.30) !important;
    box-shadow: inset 0 0 0 1px rgba(0,122,255,.05) !important;
}

.stop-reason-icon {
    color: var(--ios-red) !important;
    background: #fff0ef !important;
    border: 0 !important;
}

.btn-check:checked + .stop-reason-card {
    color: #d70015 !important;
    background: #fff1f0 !important;
    border-color: rgba(255,59,48,.27) !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   MODALES
   ------------------------------------------------------------ */

.app-main {
    position: relative !important;
    z-index: auto !important;
}

.modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
    background: rgba(0,0,0,.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

.modal-dialog {
    position: relative;
    z-index: 1061 !important;
}

.modal-glass {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 26px !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modern-modal .modal-header,
.modern-modal .modal-footer {
    background: #ffffff !important;
}

.modal-heading h2 {
    color: var(--ios-text) !important;
}

.modal-icon {
    border: 0 !important;
    box-shadow: none !important;
}

.modal-icon.blue {
    color: var(--ios-blue) !important;
    background: #edf5ff !important;
}

.modal-icon.red {
    color: var(--ios-red) !important;
    background: #fff0ef !important;
}

.close-circle {
    width: 36px !important;
    height: 36px !important;
    background: #f2f2f7 !important;
    color: #636366 !important;
    border: 0 !important;
}

.app-secondary-btn {
    background: #f2f2f7 !important;
    color: var(--ios-blue) !important;
    border: 0 !important;
    min-height: 54px !important;
}

/* Bottom sheet plano para móvil */
@media (max-width: 575.98px) {
    .modern-modal .modal-dialog {
        min-height: 100%;
        margin: 0 !important;
        display: flex;
        align-items: flex-end;
    }

    .modern-modal .modal-content {
        width: 100%;
        max-height: 92vh;
        border-radius: 28px 28px 0 0 !important;
    }

    .modern-modal .modal-content::before {
        content: "";
        display: block;
        width: 38px;
        height: 5px;
        margin: 9px auto 1px;
        border-radius: 999px;
        background: #d1d1d6;
    }

    .modern-modal .modal-header {
        padding-top: .7rem !important;
    }

    .modern-modal .modal-body {
        overflow-y: auto;
    }

    .modern-modal .modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #f0f0f2 !important;
    }
}

/* ------------------------------------------------------------
   BARRA INFERIOR
   ------------------------------------------------------------ */

.mobile-bottom-nav {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    height: 68px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(0,0,0,.055) !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.11) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.mobile-nav-item {
    color: var(--ios-secondary) !important;
}

.mobile-nav-item i {
    color: var(--ios-blue) !important;
}

/* ------------------------------------------------------------
   ALERTAS
   ------------------------------------------------------------ */

.glass-alert {
    background: #ffffff !important;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 18px !important;
    box-shadow: var(--ios-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ------------------------------------------------------------
   ESCRITORIO / TABLET
   ------------------------------------------------------------ */

@media (min-width: 768px) {
    .status-card {
        padding: 1.7rem !important;
    }

    .info-tile {
        min-height: 132px !important;
    }

    .main-actions {
        gap: .9rem !important;
    }
}

@media (min-width: 992px) {
    .operation-dashboard,
    .idle-screen {
        max-width: 940px !important;
    }
}


/* ============================================================
   LOGO DE EMPRESA
   ============================================================ */

.brand-logo-image,
.brand-logo-xl-image {
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid #e5e5ea !important;
}

.brand-logo-image img,
.brand-logo-xl-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.brand-logo-image {
    padding: 4px;
}

.brand-logo-xl-image {
    padding: 7px;
}

/* Si el logo es horizontal, evita deformaciones */
@media (min-width: 768px) {
    .brand-logo-xl-image {
        width: 72px !important;
        height: 72px !important;
    }
}


/* ============================================================
   IBC SMARTPLANT COMPLETO — UI EXTENSIONS
   ============================================================ */

.login-brand-centered {
    flex-direction: column;
    text-align: center;
    gap: .8rem !important;
}
.login-brand-centered h1 { margin-top: .25rem; }

.section-heading-row,
.page-header-simple,
.admin-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.section-title,
.page-header-simple h1,
.admin-welcome h1 {
    margin: .18rem 0 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.025em;
}
.section-icon-soft {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #007aff;
    background: #edf5ff;
}
.consumption-card {
    padding: 1rem;
    border-radius: 22px !important;
}
.pile-consumption-list {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}
.pile-consumption-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 68px;
    padding: .75rem;
    border-radius: 17px;
    background: #f7f7f9;
    border: 1px solid #ededf0;
}
.pile-priority,
.priority-badge {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 800;
    color: #007aff;
    background: #e9f3ff;
}
.pile-consumption-content { min-width: 0; flex: 1; }
.pile-consumption-content strong,
.pile-consumption-content span,
.pile-consumption-content small { display: block; }
.pile-consumption-content strong { font-size: .92rem; }
.pile-consumption-content span { color: #3a3a3c; font-size: .78rem; margin-top: .1rem; }
.pile-consumption-content small { color: #8e8e93; font-size: .69rem; margin-top: .15rem; }
.availability-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34c759;
}
.empty-inline-state {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-top: 1rem;
    padding: .85rem;
    border-radius: 16px;
    color: #6e6e73;
    background: #f7f7f9;
    font-size: .78rem;
}

/* Admin */
.admin-page {
    max-width: 960px;
    margin: 0 auto;
}
.admin-welcome {
    padding: .3rem 0 1.2rem;
}
.admin-welcome h1 {
    font-size: 1.7rem;
}
.admin-welcome p {
    margin: .3rem 0 0;
    color: #6e6e73;
    font-size: .85rem;
}
.ios-link-button,
.ios-primary-small {
    border: 0;
    border-radius: 14px;
    font-weight: 700;
}
.ios-link-button {
    color: #007aff;
    background: #fff;
}
.ios-primary-small {
    min-height: 42px;
    padding: .55rem .8rem;
    color: #fff;
    background: #007aff;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1.4rem;
}
.admin-kpi-card {
    min-height: 112px;
    padding: 1rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ios-shadow);
    display: flex;
    align-items: center;
    gap: .8rem;
}
.admin-kpi-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
}
.admin-kpi-icon.blue,.menu-icon.blue { color:#007aff;background:#edf5ff; }
.admin-kpi-icon.green,.menu-icon.green { color:#248a3d;background:#ebf8ef; }
.admin-kpi-icon.purple,.menu-icon.purple { color:#af52de;background:#f7edfc; }
.admin-kpi-icon.orange,.menu-icon.orange { color:#ff9500;background:#fff5e5; }
.menu-icon.gray { color:#8e8e93;background:#f2f2f7; }
.admin-kpi-card small,
.admin-kpi-card strong { display:block; }
.admin-kpi-card small { color:#6e6e73;font-size:.7rem; }
.admin-kpi-card strong { font-size:1.7rem;line-height:1.1;margin-top:.15rem; }
.admin-menu-section { margin-top: 1.1rem; }
.admin-section-title {
    padding: 0 .8rem .45rem;
    color: #8e8e93;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.admin-menu-card,
.admin-list-card,
.availability-product-card {
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ios-shadow);
}
.admin-menu-item {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem 1rem;
    color: #1c1c1e;
    text-decoration: none;
    border-bottom: 1px solid #ededf0;
}
.admin-menu-item:last-child { border-bottom:0; }
.admin-menu-item > span:nth-child(2) { flex:1; }
.admin-menu-item strong,
.admin-menu-item small { display:block; }
.admin-menu-item strong { font-size:.88rem; }
.admin-menu-item small { color:#8e8e93;font-size:.68rem;margin-top:.08rem; }
.menu-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items:center;
}
.disabled-row { opacity:.7; }
.small-badge {
    padding:.3rem .45rem;
    border-radius:999px;
    color:#8e8e93;
    background:#f2f2f7;
    font-size:.61rem !important;
}

/* page lists */
.page-header-simple {
    margin-bottom: 1rem;
}
.page-header-simple > div:nth-child(2) {
    flex:1;
}
.round-back-button {
    width: 40px;
    height: 40px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#007aff;
    background:#fff;
    text-decoration:none;
}
.user-row,
.pile-admin-row,
.availability-row {
    min-height: 76px;
    padding: .75rem;
    display:flex;
    align-items:center;
    gap:.75rem;
    border-bottom:1px solid #ededf0;
}
.user-row:last-child,
.pile-admin-row:last-child,
.availability-row:last-child { border-bottom:0; }
.list-avatar,
.pile-code-icon {
    width: 44px;
    height: 44px;
    flex:0 0 auto;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-weight:800;
}
.list-avatar { background:#e9f3ff;color:#007aff; }
.pile-code-icon { background:#ebf8ef;color:#248a3d; }
.row-main { min-width:0;flex:1; }
.row-main strong,.row-main span,.row-main small { display:block; }
.row-main strong { font-size:.86rem; }
.row-main span { color:#6e6e73;font-size:.7rem;margin-top:.08rem; }
.row-main small { color:#8e8e93;font-size:.65rem;margin-top:.08rem; }
.row-actions {
    display:flex;
    align-items:center;
    gap:.4rem;
}
.status-mini {
    padding:.28rem .45rem;
    border-radius:999px;
    font-size:.61rem;
    font-weight:700;
}
.status-mini.active { color:#248a3d;background:#ebf8ef; }
.status-mini.inactive { color:#8e8e93;background:#f2f2f7; }
.icon-action {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:12px;
    color:#007aff;
    background:#f2f2f7;
}
.icon-action.danger-lite { color:#ff3b30;background:#fff0ef; }

/* Forms */
.ios-form-group {
    margin-bottom: .85rem;
}
.ios-form-group label {
    display:block;
    margin: 0 0 .35rem .2rem;
    color:#3a3a3c;
    font-size:.72rem;
    font-weight:700;
}
.ios-form-group label span {
    color:#8e8e93;
    font-weight:500;
}
.ios-form-group input,
.ios-form-group select,
.ios-form-group textarea {
    width:100%;
    min-height:52px;
    padding:.72rem .8rem;
    border:1px solid #e5e5ea;
    border-radius:15px;
    outline:0;
    color:#1c1c1e;
    background:#f7f7f9;
}
.ios-form-group textarea { resize:vertical; }
.ios-form-group input:focus,
.ios-form-group select:focus,
.ios-form-group textarea:focus {
    border-color:rgba(0,122,255,.35);
    background:#fff;
    box-shadow:0 0 0 3px rgba(0,122,255,.08);
}
.ios-form-group > small {
    display:block;
    color:#8e8e93;
    font-size:.65rem;
    margin:.3rem .2rem 0;
}
.ios-switch-row {
    min-height:58px;
    padding:.65rem .2rem;
    display:flex;
    align-items:center;
    gap:.8rem;
    cursor:pointer;
}
.ios-switch-row > span:first-child { flex:1; }
.ios-switch-row strong,.ios-switch-row small { display:block; }
.ios-switch-row strong { font-size:.8rem; }
.ios-switch-row small { color:#8e8e93;font-size:.65rem; }
.ios-switch-row input { display:none; }
.ios-switch {
    width:51px;
    height:31px;
    border-radius:999px;
    background:#e5e5ea;
    position:relative;
    transition:.18s ease;
}
.ios-switch::after {
    content:"";
    position:absolute;
    top:2px;left:2px;
    width:27px;height:27px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
    transition:.18s ease;
}
.ios-switch-row input:checked + .ios-switch { background:#34c759; }
.ios-switch-row input:checked + .ios-switch::after { transform:translateX(20px); }

.ios-segmented {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    padding:3px;
    border-radius:12px;
    background:#e9e9ee;
}
.ios-segmented input { display:none; }
.ios-segmented label {
    min-height:38px;
    margin:0;
    border-radius:10px;
    display:grid;
    place-items:center;
    color:#636366;
    font-size:.72rem;
    font-weight:700;
    cursor:pointer;
}
.ios-segmented input:checked + label {
    color:#1c1c1e;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
}

/* Availability */
.availability-groups { display:grid;gap:1rem; }
.availability-product-header {
    min-height:64px;
    padding:.8rem;
    display:flex;
    align-items:center;
    gap:.65rem;
    background:#f9f9fb;
    border-bottom:1px solid #ededf0;
}
.availability-product-header > span {
    width:38px;height:38px;border-radius:12px;
    display:grid;place-items:center;
    color:#248a3d;background:#ebf8ef;
}
.availability-product-header small,.availability-product-header strong { display:block; }
.availability-product-header small { color:#8e8e93;font-size:.61rem;font-weight:700; }
.availability-product-header strong { font-size:.86rem;margin-top:.05rem; }
.admin-empty-card {
    min-height:220px;
    padding:2rem 1rem;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#fff;
    box-shadow:var(--ios-shadow);
}
.admin-empty-card i { font-size:2rem;color:#8e8e93; }
.admin-empty-card strong { margin-top:.7rem; }
.admin-empty-card span { margin-top:.3rem;color:#8e8e93;font-size:.75rem;max-width:320px; }

@media (min-width:768px) {
    .admin-kpi-grid { grid-template-columns:repeat(4,1fr); }
    .consumption-card { padding:1.15rem; }
}


/* ============================================================
   HOME LAYOUT V2 — CAMBIO ESTRUCTURAL
   ============================================================ */

.top-nav-actions { margin-left:auto; }
.top-nav-link {
    min-height: 38px;
    padding: .45rem .7rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #636366;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 700;
    transition: .15s ease;
}
.top-nav-link:hover { background:#eeeef2; color:#1c1c1e; }
.top-nav-link.admin-link { color:#007aff; background:#eef6ff; }

.home-shell { max-width: 1040px; margin: 0 auto; }
.home-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    padding:.45rem .15rem 1.1rem;
}
.home-kicker {
    color:#8e8e93;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.12em;
}
.home-heading h1 {
    margin:.15rem 0 .2rem;
    font-size:clamp(1.65rem,4vw,2.35rem);
    font-weight:800;
    letter-spacing:-.045em;
}
.home-heading p { margin:0; color:#6e6e73; font-size:.82rem; }
.home-date {
    align-items:center;
    gap:.45rem;
    padding:.55rem .7rem;
    border-radius:13px;
    color:#6e6e73;
    background:#fff;
    border:1px solid #e5e5ea;
    font-size:.72rem;
}

.home-grid { display:grid; gap:.9rem; }
.shift-start-card {
    min-height: 330px;
    padding:1.1rem;
    border-radius:26px;
    background:#fff;
    box-shadow:0 8px 28px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
}
.shift-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.7rem;
}
.shift-status-icon {
    width:50px;height:50px;
    border-radius:16px;
    display:grid;place-items:center;
    color:#007aff;
    background:#edf5ff;
    font-size:1.25rem;
}
.shift-status-pill {
    padding:.42rem .65rem;
    border-radius:999px;
    color:#8e8e93;
    background:#f2f2f7;
    font-size:.66rem;
    font-weight:700;
}
.shift-card-content {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:.8rem 0 1rem;
}
.shift-card-content h2 {
    margin:.25rem 0 .4rem;
    font-size:clamp(1.8rem,6vw,2.8rem);
    font-weight:820;
    letter-spacing:-.05em;
}
.shift-card-content p { max-width:430px; margin:0; color:#6e6e73; font-size:.87rem; }
.shift-start-button {
    min-height:64px;
    width:100%;
    padding:.65rem .75rem;
    border:0;
    border-radius:18px;
    display:flex;
    align-items:center;
    gap:.7rem;
    color:#fff;
    background:#007aff;
    font-size:.83rem;
    font-weight:800;
    text-align:left;
}
.shift-start-button:hover { color:#fff; background:#006ee6; }
.shift-button-icon {
    width:42px;height:42px;
    border-radius:13px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.17);
    font-size:1rem;
}

.home-side-stack { display:grid; gap:.75rem; }
.home-info-card,
.home-help-card,
.admin-quick-card {
    padding:.9rem;
    border-radius:20px;
    background:#fff;
    box-shadow:0 6px 22px rgba(0,0,0,.045);
}
.home-info-card,
.admin-quick-card {
    display:flex;
    align-items:center;
    gap:.75rem;
}
.home-info-card > div:nth-child(2),
.admin-quick-card > div:nth-child(2) { min-width:0; flex:1; }
.home-info-card small,.home-info-card strong,.home-info-card span,
.admin-quick-card small,.admin-quick-card strong,.admin-quick-card span { display:block; }
.home-info-card small,.admin-quick-card small { color:#8e8e93; font-size:.62rem; }
.home-info-card strong,.admin-quick-card strong { font-size:.82rem; margin-top:.08rem; }
.home-info-card span,.admin-quick-card span { color:#6e6e73; font-size:.67rem; margin-top:.05rem; }
.home-info-icon {
    width:42px;height:42px;
    flex:0 0 auto;
    border-radius:13px;
    display:grid;place-items:center;
}
.home-info-icon.blue { color:#007aff;background:#edf5ff; }
.home-info-icon.green { color:#248a3d;background:#ebf8ef; }
.home-info-icon.purple { color:#af52de;background:#f7edfc; }
.home-help-title { display:flex;align-items:center;gap:.7rem; }
.home-help-title small,.home-help-title strong { display:block; }
.home-help-title small { color:#8e8e93;font-size:.62rem; }
.home-help-title strong { font-size:.82rem; }
.home-check-list {
    display:grid;
    gap:.5rem;
    margin-top:.8rem;
    padding-top:.75rem;
    border-top:1px solid #ededf0;
}
.home-check-list span {
    display:flex;
    align-items:center;
    gap:.5rem;
    color:#636366;
    font-size:.7rem;
}
.home-check-list i { color:#007aff; }
.admin-quick-card { color:#1c1c1e;text-decoration:none; }
.admin-quick-card:hover { color:#1c1c1e;background:#fbfbfd; }

@media (min-width: 768px) {
    .home-grid { grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); }
    .shift-start-card { min-height:420px; padding:1.4rem; }
    .home-side-stack { align-content:start; }
}

@media (max-width: 767.98px) {
    .home-heading { padding-top:.2rem; }
    .home-heading p { max-width:320px; }
    .shift-start-card { min-height:300px; }
}


/* ============================================================
   ACCIONES PRINCIPALES SOBRE EL PLIEGUE
   Detención / Reanudar y Finalizar quedan bajo el cronómetro
   para minimizar scroll en teléfono y tablet.
   ============================================================ */

.operation-dashboard > .main-actions {
    order: 2;
    margin-top: 0;
    margin-bottom: 0;
}

.operation-dashboard > .info-grid {
    order: 3;
}

.operation-dashboard > .metrics-strip {
    order: 4;
}

.operation-dashboard > .consumption-card {
    order: 5;
}

.main-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
}

.danger-action-btn,
.success-action-btn {
    min-height: 68px !important;
}

.finish-action-btn {
    min-height: 58px !important;
}

@media (min-width: 768px) {
    .main-actions {
        grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
        align-items: stretch;
    }

    .danger-action-btn,
    .success-action-btn,
    .finish-action-btn {
        height: 100%;
    }
}

/* En pantallas pequeñas se reduce un poco el espacio del bloque principal
   para mantener las acciones críticas a la vista. */
@media (max-width: 575.98px) {
    .status-card {
        padding: .95rem !important;
    }

    .hero-timer-block {
        padding: 1.05rem .4rem .75rem !important;
    }

    .hero-timer {
        font-size: clamp(2.85rem, 14vw, 4.6rem) !important;
    }

    .operation-dashboard {
        gap: .75rem !important;
    }

    .danger-action-btn,
    .success-action-btn {
        min-height: 66px !important;
    }

    .finish-action-btn {
        min-height: 54px !important;
    }
}

/* ============================================================
   HISTORIAL + DETALLE DE TURNOS
   ============================================================ */

.history-shell,
.turn-detail-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.history-heading,
.turn-detail-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}

.history-heading h1,
.turn-detail-heading h1 {
    margin:.15rem 0 .2rem;
    font-size:clamp(1.75rem,4vw,2.45rem);
    font-weight:850;
    letter-spacing:-.045em;
}

.history-heading p,
.turn-detail-heading p {
    margin:0;
    color:#6e6e73;
    font-size:.82rem;
}

.history-back-btn {
    border:1px solid #e5e5ea;
    background:#fff;
    color:#3a3a3c;
    font-size:.76rem;
    font-weight:700;
}

.history-table-card,
.detail-panel,
.detail-kpi-card {
    background:#fff;
    border:1px solid #ececf0;
    box-shadow:0 8px 28px rgba(0,0,0,.055);
}

.history-table-card {
    border-radius:24px;
    overflow:hidden;
}

.history-table thead th {
    padding:.85rem .8rem;
    color:#8e8e93;
    background:#fafafd;
    border-bottom:1px solid #ececf0;
    font-size:.64rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    white-space:nowrap;
}

.history-table tbody td {
    padding:.85rem .8rem;
    border-color:#f0f0f3;
    font-size:.75rem;
    vertical-align:middle;
}

.history-cell-sub {
    display:block;
    margin-top:.16rem;
    color:#8e8e93;
    font-size:.62rem;
    white-space:nowrap;
}

.history-availability {
    display:inline-flex;
    min-width:54px;
    justify-content:center;
    padding:.35rem .48rem;
    border-radius:999px;
    font-size:.68rem;
    font-weight:800;
}
.history-availability.good { color:#1e7b42; background:#eaf7ef; }
.history-availability.warn { color:#9a6700; background:#fff7df; }
.history-availability.bad { color:#b42318; background:#fff0ef; }

.history-detentions-chip {
    min-width:30px;
    height:30px;
    padding:0 .45rem;
    display:inline-grid;
    place-items:center;
    border-radius:10px;
    color:#636366;
    background:#f2f2f7;
    font-size:.7rem;
    font-weight:800;
}

.history-action-btn {
    min-height:34px;
    padding:.35rem .5rem;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.3rem;
    color:#636366;
    background:#f2f2f7;
    text-decoration:none;
    font-size:.68rem;
    font-weight:750;
    transition:.15s ease;
}
.history-action-btn:hover { color:#1c1c1e; background:#e8e8ed; }
.history-action-btn.primary { color:#0066cc; background:#edf5ff; }
.history-action-btn.primary:hover { background:#e2efff; }

.detail-back-link {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:#636366;
    text-decoration:none;
    font-size:.72rem;
    font-weight:700;
}
.detail-back-link:hover { color:#007aff; }

.detail-state-pill {
    display:inline-flex;
    align-items:center;
    padding:.38rem .58rem;
    border-radius:999px;
    font-size:.62rem;
    font-weight:850;
    letter-spacing:.035em;
}
.detail-state-pill.open { color:#1e7b42; background:#eaf7ef; }
.detail-state-pill.closed { color:#636366; background:#f2f2f7; }

.detail-download-btn {
    min-height:44px;
    padding:.62rem .85rem;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    border-radius:14px;
    color:#fff;
    background:#007aff;
    font-size:.74rem;
    font-weight:800;
}
.detail-download-btn:hover { color:#fff; background:#006ee6; }

.detail-kpi-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.7rem;
}

.detail-kpi-card {
    position:relative;
    min-height:116px;
    padding:.85rem;
    border-radius:20px;
    overflow:hidden;
}

.detail-kpi-card small,
.detail-kpi-card strong { display:block; }
.detail-kpi-card small { margin-top:.75rem; color:#8e8e93; font-size:.62rem; }
.detail-kpi-card strong { margin-top:.12rem; color:#1c1c1e; font-size:1.22rem; letter-spacing:-.03em; }

.detail-kpi-icon {
    width:36px;
    height:36px;
    border-radius:11px;
    display:grid;
    place-items:center;
    font-size:.9rem;
}
.detail-kpi-icon.blue { color:#007aff;background:#edf5ff; }
.detail-kpi-icon.green { color:#248a3d;background:#ebf8ef; }
.detail-kpi-icon.red { color:#d70015;background:#fff0ef; }
.detail-kpi-icon.purple { color:#af52de;background:#f7edfc; }
.detail-kpi-icon.gray { color:#636366;background:#f2f2f7; }

.availability-mini {
    position:absolute;
    right:.85rem;
    top:.85rem;
    width:9px;
    height:9px;
    border-radius:50%;
}
.availability-mini.good { background:#34c759; }
.availability-mini.warn { background:#ff9f0a; }
.availability-mini.bad { background:#ff3b30; }

.detail-two-column {
    display:grid;
    gap:.8rem;
}

.detail-panel {
    padding:1rem;
    border-radius:22px;
}

.detail-panel-title {
    display:flex;
    align-items:center;
    gap:.7rem;
    margin-bottom:.95rem;
}
.detail-panel-title > span:first-child {
    width:40px;
    height:40px;
    flex:0 0 auto;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#007aff;
    background:#edf5ff;
}
.detail-panel-title small,
.detail-panel-title h2 { display:block; }
.detail-panel-title small { color:#8e8e93; font-size:.58rem; font-weight:800; letter-spacing:.09em; }
.detail-panel-title h2 { margin:.08rem 0 0; font-size:1rem; font-weight:800; letter-spacing:-.025em; }
.detail-panel-title-row { align-items:center; }

.detail-info-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
}
.detail-info-item {
    min-width:0;
    padding:.72rem;
    border-radius:15px;
    background:#f8f8fb;
}
.detail-info-item small,
.detail-info-item strong { display:block; }
.detail-info-item small { color:#8e8e93; font-size:.6rem; }
.detail-info-item strong { margin-top:.15rem; color:#1c1c1e; font-size:.76rem; word-break:break-word; }

.detail-turn-note {
    margin-top:.75rem;
    padding:.75rem;
    border-radius:15px;
    background:#fff9e8;
    border:1px solid #f8e7ac;
}
.detail-turn-note small { color:#9a6700; font-size:.6rem; font-weight:800; }
.detail-turn-note p { margin:.2rem 0 0; color:#594800; font-size:.72rem; }

.downtime-summary-list { display:grid; gap:.75rem; }
.downtime-summary-item { padding:.1rem .05rem; }
.downtime-summary-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:.75rem;
}
.downtime-summary-head strong,
.downtime-summary-head small { display:block; }
.downtime-summary-head strong { font-size:.75rem; }
.downtime-summary-head small { margin-top:.08rem; color:#8e8e93; font-size:.6rem; }
.downtime-summary-head b { font-size:.72rem; white-space:nowrap; }
.downtime-progress {
    height:7px;
    margin-top:.45rem;
    overflow:hidden;
    border-radius:999px;
    background:#f0f0f3;
}
.downtime-progress span {
    display:block;
    height:100%;
    min-width:2px;
    border-radius:999px;
    background:#ff453a;
}

.detention-count-chip {
    width:auto !important;
    height:auto !important;
    padding:.38rem .55rem !important;
    border-radius:999px !important;
    color:#636366 !important;
    background:#f2f2f7 !important;
    font-size:.62rem;
    font-weight:750;
    white-space:nowrap;
}

.detail-table-wrap {
    margin:0 -1rem -1rem;
    border-top:1px solid #efeff3;
}
.detail-table thead th {
    padding:.75rem .8rem;
    color:#8e8e93;
    background:#fafafd;
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    white-space:nowrap;
}
.detail-table tbody td {
    padding:.75rem .8rem;
    border-color:#f0f0f3;
    font-size:.72rem;
}
.detail-observation-cell { min-width:220px; max-width:420px; color:#636366 !important; }
.detention-number {
    width:28px;
    height:28px;
    display:inline-grid;
    place-items:center;
    border-radius:9px;
    color:#007aff;
    background:#edf5ff;
    font-size:.66rem;
    font-weight:850;
}
.active-downtime-pill {
    display:inline-flex;
    margin-left:.35rem;
    padding:.25rem .42rem;
    border-radius:999px;
    color:#b42318;
    background:#fff0ef;
    font-size:.56rem;
    font-weight:800;
}

.detention-mobile-list { display:grid; gap:.6rem; }
.detention-mobile-card {
    padding:.75rem;
    border-radius:16px;
    background:#f8f8fb;
    border:1px solid #efeff3;
}
.detention-mobile-top { display:flex; align-items:center; gap:.6rem; }
.detention-mobile-top strong,
.detention-mobile-top small { display:block; }
.detention-mobile-top strong { font-size:.72rem; }
.detention-mobile-top small { margin-top:.08rem; color:#8e8e93; font-size:.58rem; }
.detention-mobile-top b { font-size:.68rem; white-space:nowrap; }
.detention-mobile-card p { margin:.55rem 0 0; color:#636366; font-size:.66rem; }

.detail-empty-state {
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#8e8e93;
}
.detail-empty-state.compact { min-height:150px; }
.detail-empty-state i { color:#34c759; font-size:1.8rem; }
.detail-empty-state strong { margin-top:.5rem; color:#3a3a3c; font-size:.78rem; }
.detail-empty-state span { margin-top:.18rem; font-size:.64rem; }

@media (min-width: 768px) {
    .detail-kpi-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .detail-two-column { grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); }
    .detail-info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
    .history-heading,
    .turn-detail-heading {
        align-items:flex-start;
        flex-direction:column;
    }
    .turn-detail-heading .detail-download-btn { width:100%; justify-content:center; }
    .history-table-card { border-radius:18px; }
    .history-table tbody td,
    .history-table thead th { padding:.72rem .65rem; }
    .detail-kpi-card { min-height:106px; }
    .detail-info-grid { grid-template-columns:1fr 1fr; }
    .detail-panel { padding:.85rem; border-radius:18px; }
    .detail-panel-title { margin-bottom:.75rem; }
}

@media (max-width: 420px) {
    .detail-kpi-grid { grid-template-columns:1fr 1fr; }
    .detail-kpi-card:last-child { grid-column:span 2; }
    .detail-info-grid { grid-template-columns:1fr; }
}

/* =========================================================
   REPORTES / EXPORTACIÓN CONSOLIDADA v2
   ========================================================= */
.history-heading-actions {
    display:flex;
    align-items:center;
    gap:.55rem;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.report-export-btn {
    min-height:42px;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.55rem .82rem;
    border:0;
    border-radius:999px;
    color:#fff;
    background:#007aff;
    box-shadow:0 8px 22px rgba(0,122,255,.18);
    font-size:.74rem;
    font-weight:800;
}
.report-export-btn:hover { color:#fff; background:#006ee6; transform:translateY(-1px); }

.history-report-hint {
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:.85rem;
    padding:.72rem .85rem;
    border:1px solid #e7e7ec;
    border-radius:17px;
    background:rgba(255,255,255,.76);
    box-shadow:0 5px 18px rgba(0,0,0,.035);
}
.history-report-hint-icon {
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#007aff;
    background:#edf5ff;
}
.history-report-hint strong,
.history-report-hint small { display:block; }
.history-report-hint strong { color:#1c1c1e; font-size:.75rem; }
.history-report-hint small { margin-top:.08rem; color:#8e8e93; font-size:.64rem; line-height:1.35; }

.history-action-btn.pdf { color:#c62828; background:#fff0ef; }
.history-action-btn.pdf:hover { color:#9f1f1f; background:#ffe6e4; }
.history-action-btn.csv { color:#248a3d; background:#ebf8ef; }
.history-action-btn.csv:hover { color:#1e7434; background:#dff3e5; }

.report-modal .modal-dialog { max-width:540px; }
.report-modal-copy {
    margin:0 0 .95rem;
    color:#6e6e73;
    font-size:.78rem;
    line-height:1.45;
}
.report-date-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem;
}
.report-field { display:block; }
.report-field > span {
    display:block;
    margin:0 0 .35rem .12rem;
    color:#6e6e73;
    font-size:.63rem;
    font-weight:800;
    letter-spacing:.025em;
}
.report-field input,
.report-field select {
    width:100%;
    min-height:50px;
    padding:.65rem .75rem;
    border:1px solid #dedee4;
    border-radius:14px;
    outline:0;
    color:#1c1c1e;
    background:#f8f8fb;
    font-size:.78rem;
    font-weight:650;
    transition:.15s ease;
}
.report-field input:focus,
.report-field select:focus {
    border-color:rgba(0,122,255,.48);
    background:#fff;
    box-shadow:0 0 0 4px rgba(0,122,255,.08);
}
.report-format-note {
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    margin-top:1rem;
    padding:.7rem .75rem;
    border-radius:13px;
    color:#5e5e63;
    background:#f2f2f7;
    font-size:.64rem;
    line-height:1.4;
}
.report-format-note i { color:#007aff; margin-top:.05rem; }
.report-modal-footer { gap:.45rem; }
.report-modal-footer .btn { min-height:44px; border-radius:13px; font-size:.72rem; font-weight:800; }
.report-csv-btn { color:#1e7434; background:#ebf8ef; border:1px solid #d8efdf; }
.report-csv-btn:hover { color:#155d29; background:#dff3e5; }
.report-pdf-btn { color:#fff; background:#d8392e; border:1px solid #d8392e; }
.report-pdf-btn:hover { color:#fff; background:#bd2f26; }

.detail-export-actions {
    display:flex;
    align-items:center;
    gap:.45rem;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.detail-download-btn.secondary {
    color:#248a3d;
    background:#ebf8ef;
    border:1px solid #d8efdf;
}
.detail-download-btn.secondary:hover { color:#1e7434; background:#dff3e5; }

@media (max-width: 767.98px) {
    .history-heading-actions { width:100%; justify-content:flex-start; }
    .report-export-btn { flex:1; justify-content:center; }
    .history-report-hint { align-items:flex-start; }
    .report-date-grid { grid-template-columns:1fr; }
    .detail-export-actions { width:100%; }
    .detail-export-actions .detail-download-btn { flex:1; justify-content:center; }
}