/* ═══════════════════════════════════════════════
   KIDS ZONE · DESIGN SYSTEM
   Modern · Clean · Corporate · Mobile-First
═══════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
    --primary: #4F46E5;
    /* Indigo */
    --primary-dark: #3730A3;
    --primary-light: #818CF8;
    --secondary: #06B6D4;
    /* Cyan */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-2: #F1F5F9;
    --border: #E2E8F0;
    --border-dark: #CBD5E1;

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .10), 0 4px 8px rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, .12);

    --transition: all .2s cubic-bezier(.4, 0, .2, 1);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --sidebar-width: 240px;
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── UTILITY ── */
.hidden {
    display: none !important;
}

.full-width {
    width: 100%;
}

.mt-2 {
    margin-top: .75rem;
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

.text-danger {
    color: var(--danger);
}

.text-muted {
    color: var(--text-muted);
}

/* ══════════════════════════════════
   LANDING / LOGIN PAGE
══════════════════════════════════ */
.landing-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    padding: 1rem;
}

.landing-container {
    width: 100%;
    max-width: 440px;
}

.landing-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-xl);
    animation: slideUp .4s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Brand Header */
.brand-header {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: var(--radius-lg);
    color: white;
    font-size: 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(79, 70, 229, .35);
}

.brand-logo-img {
    height: 75px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 1.25rem;
    display: block;
}

.sidebar-logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    margin-right: 10px;
    vertical-align: middle;
}

.topbar-logo-img {
    height: 24px;
    width: auto;
    object-fit: contain;
    margin-right: 8px;
    vertical-align: middle;
}

.brand-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    background: var(--success);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    border: 2px solid white;
}

.brand-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1px;
}

.brand-title span {
    color: var(--primary);
}

.brand-subtitle {
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

/* Tab Selector */
.tab-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    background: var(--surface-2);
    padding: .35rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.75rem;
}

.tab-btn {
    padding: .6rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.tab-btn.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Parent Options */
.parent-options {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.option-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    width: 100%;
}

.option-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .08);
    transform: translateY(-1px);
}

.option-card.primary-card {
    border-color: var(--primary);
    background: rgba(79, 70, 229, .03);
}

.option-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-md);
    background: rgba(79, 70, 229, .1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.option-icon.accent {
    background: rgba(6, 182, 212, .1);
    color: var(--secondary);
}

.option-icon.ghost {
    background: var(--surface-2);
    color: var(--text-secondary);
}

.option-text {
    flex: 1;
}

.option-text h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.option-text p {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

.option-arrow {
    color: var(--text-muted);
    font-size: .85rem;
}

/* ══════════════════════════════════
   FORMS
══════════════════════════════════ */
.auth-form,
.register-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.form-input {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: .95rem;
    color: var(--text-primary);
    background: var(--surface);
    transition: var(--transition);
    outline: none;
    appearance: none;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.form-input.compact {
    padding: .5rem .75rem;
    font-size: .875rem;
}

.form-input.large-input {
    font-size: 1.1rem;
    padding: .9rem 1rem;
}

.input-wrapper {
    position: relative;
}

.input-wrapper .form-input {
    padding-right: 3rem;
}

.toggle-pwd,
.input-btn {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .95rem;
    padding: .25rem;
    transition: var(--transition);
}

.input-btn {
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: .5rem;
}

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

/* Photo Upload */
.photo-upload {
    border: 2px dashed var(--border-dark);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.photo-upload:hover {
    border-color: var(--primary);
    background: rgba(79, 70, 229, .03);
}

.photo-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .875rem;
}

.photo-preview i {
    font-size: 2rem;
    color: var(--primary-light);
}

.photo-preview img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* Error */
.error-msg {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .2);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .875rem;
    font-weight: 500;
}

/* Form Footer */
.form-footer {
    text-align: center;
    font-size: .875rem;
    color: var(--text-muted);
}

.form-footer a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79, 70, 229, .3);
}

.btn-secondary {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1.5px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, .3);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #DC2626;
}

.btn-warning {
    background: var(--warning);
    color: white;
}

.btn-warning:hover {
    background: #D97706;
}

.btn-primary:disabled {
    background: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.5);
}

.validation-summary {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--warning);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.validation-summary.hidden {
    display: none;
}

.validation-summary p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-primary:disabled {
    background: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.5);
}

.validation-summary {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--warning);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.validation-summary.hidden {
    display: none;
}

.validation-summary p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-sm {
    padding: .4rem .85rem;
    font-size: .8rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-weight: 500;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.btn-sm:hover {
    background: var(--primary);
    color: white;
}

.btn-add-child {
    width: 100%;
    padding: .9rem;
    border: 2px dashed var(--primary-light);
    border-radius: var(--radius-md);
    background: rgba(79, 70, 229, .04);
    color: var(--primary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font);
    margin: 1rem 0;
}

.btn-add-child:hover {
    background: rgba(79, 70, 229, .1);
}

.icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    transition: var(--transition);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, .25);
}

/* ══════════════════════════════════
   TOPBAR (App Pages)
══════════════════════════════════ */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(79, 70, 229, .3);
}

.topbar-brand {
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.topbar-brand span {
    color: var(--secondary);
}

.topbar-back {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .15);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: .95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.topbar-back:hover {
    background: rgba(255, 255, 255, .25);
}

.topbar-right {
    width: 36px;
}

/* Staff Topbar */
.staff-topbar {
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.topbar-actions {
    display: flex;
    gap: .5rem;
}

.role-badge {
    padding: .2rem .6rem;
    border-radius: var(--radius-full);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.role-badge.staff {
    background: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
}

.role-badge.admin {
    background: var(--warning);
    color: white;
}

/* ══════════════════════════════════
   APP BODY + PAGE CONTAINERS
══════════════════════════════════ */
.app-body {
    padding-top: 60px;
    min-height: 100vh;
}

.page-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ══════════════════════════════════
   STEPS INDICATOR
══════════════════════════════════ */
.steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1.25rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition);
}

.step span {
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.step.active .step-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .15);
}

.step.active span {
    color: var(--primary);
    font-weight: 700;
}

.step.completed .step-circle {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 .75rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}

.step-line.active {
    background: var(--primary);
}

/* ══════════════════════════════════
   SECTION HEADERS
══════════════════════════════════ */
.section-header {
    margin-bottom: 1.5rem;
}

.section-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.section-header h2 i {
    color: var(--primary);
}

.section-header p {
    font-size: .875rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

/* ══════════════════════════════════
   STEP SECTIONS
══════════════════════════════════ */
.step-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    animation: fadeIn .3s ease;
}

.step-section.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.step-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
}

.step-actions .btn-secondary,
.step-actions .btn-primary {
    flex: 1;
}

/* ══════════════════════════════════
   CHILDREN FORMS
══════════════════════════════════ */
.children-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.child-form-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    position: relative;
    animation: fadeIn .25s ease;
}

.child-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.child-form-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.child-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, .1);
    color: var(--danger);
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.child-remove-btn:hover {
    background: var(--danger);
    color: white;
}

/* Room Badge */
.room-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .7rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
}

.room-0 {
    background: #FEE2E2;
    color: #B91C1C;
}

.room-1 {
    background: #FEF3C7;
    color: #92400E;
}

.room-2 {
    background: #D1FAE5;
    color: #065F46;
}

.room-3 {
    background: #DBEAFE;
    color: #1E40AF;
}

.room-4 {
    background: #EDE9FE;
    color: #4C1D95;
}

.room-5 {
    background: #FCE7F3;
    color: #9D174D;
}

.room-big {
    background: #F0FDF4;
    color: #14532D;
}

/* ══════════════════════════════════
   QR DISPLAY
══════════════════════════════════ */
.qr-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.qr-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    text-align: left;
}

.qr-card-header strong {
    display: block;
    font-size: .95rem;
    color: var(--text-primary);
}

.qr-card-header small {
    display: block;
    font-size: .8rem;
    color: var(--text-muted);
}

.parent-avatar-small {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.qr-wrapper {
    display: inline-flex;
    padding: 1rem;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.qr-wrapper canvas,
.qr-wrapper img {
    display: block;
}

.qr-instruction {
    font-size: .8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.qr-instruction i {
    color: var(--primary);
}

.qr-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
}

.qr-actions button {
    flex: 1;
}

/* Success Header */
.success-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.success-icon {
    width: 64px;
    height: 64px;
    background: rgba(16, 185, 129, .12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--success);
    margin: 0 auto 1rem;
}

.success-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
}

.success-header p {
    font-size: .875rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

/* ══════════════════════════════════
   STAFF CHECK-IN PAGE
══════════════════════════════════ */
.staff-body {
    background: #F1F5F9;
}

.stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: white;
    border-bottom: 1px solid var(--border);
    padding: .75rem 1rem;
}

.stat-item {
    flex: 1;
    text-align: center;
}

.stat-item strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.stat-item small {
    font-size: .75rem;
    color: var(--text-muted);
}

.stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
    margin: 0 .5rem;
}

.staff-main {
    max-width: 680px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

/* Scanner Section */
.scanner-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.scanner-tabs {
    display: flex;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.scan-tab {
    flex: 1;
    padding: .75rem;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.scan-tab.active {
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    border-bottom: 2px solid var(--primary);
}

.scan-panel {
    padding: 1.25rem;
}

/* Scanner Frame */
.scanner-frame-wrapper {
    text-align: center;
}

.scanner-frame {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 0 auto 1rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
}

.scanner-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Corners */
.scanner-corners {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: white;
    border-style: solid;
}

.corner.tl {
    top: 12px;
    left: 12px;
    border-width: 3px 0 0 3px;
    border-radius: 4px 0 0 0;
}

.corner.tr {
    top: 12px;
    right: 12px;
    border-width: 3px 3px 0 0;
    border-radius: 0 4px 0 0;
}

.corner.bl {
    bottom: 12px;
    left: 12px;
    border-width: 0 0 3px 3px;
    border-radius: 0 0 0 4px;
}

.corner.br {
    bottom: 12px;
    right: 12px;
    border-width: 0 3px 3px 0;
    border-radius: 0 0 4px 0;
}

/* Scanner Line Animation */
.scanner-line {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
    animation: scan 2s linear infinite;
    z-index: 11;
    border-radius: 2px;
}

@keyframes scan {
    0% {
        top: 12px;
    }

    100% {
        top: calc(100% - 12px);
    }
}

.scanner-hint {
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: .75rem;
}

/* Manual Scan Form */
.manual-scan-form {
    max-width: 420px;
    margin: 0 auto;
}

/* Result Panel */
.result-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--primary-light);
    margin-bottom: 1rem;
    animation: fadeIn .3s ease;
}

.parent-result-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.parent-result-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    overflow: hidden;
}

.parent-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parent-result-info {
    flex: 1;
}

.parent-result-info h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

.parent-result-info p {
    font-size: .8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
}

.parent-status {
    padding: .3rem .75rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
}

/* Children Check-in List */
.children-checkin-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}

.child-checkin-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
}

.child-checkin-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.child-checkin-info {
    flex: 1;
}

.child-checkin-info strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
}

.child-checkin-info small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

/* Tarjeta niño que ya está en salón */
.child-already-in {
    border-color: rgba(16, 185, 129, .35);
    background: rgba(16, 185, 129, .04);
}

/* Bloque estado check-in */
.child-ticket-status {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.child-in-room {
    color: var(--success);
    font-weight: 700;
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticket-printed-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ticket-printed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(245, 158, 11, .12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.btn-reprint-panel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(99, 102, 241, .1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, .35);
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-reprint-panel:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}

.btn-reprint-panel:active {
    transform: translateY(0);
}

.child-select-check {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    accent-color: var(--primary);
}

.result-actions {
    display: flex;
    gap: .75rem;
}

.result-actions button {
    flex: 1;
}

/* ══════════════════════════════════
   TODAY LIST
══════════════════════════════════ */
.today-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-title-row h3 {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.search-mini {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .4rem .75rem;
}

.search-mini i {
    color: var(--text-muted);
    font-size: .8rem;
}

.search-mini input {
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: .85rem;
    width: 130px;
    outline: none;
    color: var(--text-primary);
}

/* Filter Chips */
.filter-chips {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.chip {
    padding: .35rem .85rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font);
}

.chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Today List Items */
.today-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.today-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: var(--transition);
}

.today-item:hover {
    border-color: var(--primary-light);
    background: rgba(79, 70, 229, .02);
}

.today-item-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .85rem;
    font-weight: 700;
}

.today-item-info {
    flex: 1;
    min-width: 0;
}

.today-item-info strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-item-info small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

.today-item-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.in {
    background: var(--success);
}

.status-dot.out {
    background: var(--text-muted);
}

.checkout-btn {
    padding: .3rem .65rem;
    background: rgba(245, 158, 11, .1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: var(--transition);
}

.checkout-btn:hover {
    background: var(--warning);
    color: white;
}

.reprint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: rgba(99, 102, 241, .1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.reprint-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.08);
}

.reprint-btn:active {
    transform: scale(0.95);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: .75rem;
    opacity: .4;
    display: block;
}

.empty-state p {
    font-size: .9rem;
}

/* ══════════════════════════════════
   STICKERS PRINT
══════════════════════════════════ */
/* ══════════════════════════════════
   STICKERS PRINT (80mm Optimized)
   Diseño de alta visibilidad para impresión térmica
   ══════════════════════════════════ */
.sticker-modal {
    max-width: 500px !important;
}

.stickers-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
}

/* Base Sticker */
.sticker {
    width: 320px; /* Visual preview size */
    background: white;
    border: 1px solid #e2e8f0;
    padding: 12px;
    font-family: 'Inter', sans-serif;
    color: #000;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative; /* Para que el QR absolutizado se mantenga dentro */
}

.sticker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 10pt;
    font-weight: 600;
}

/* Bloque Negro para el Código */
.sticker-code-block {
    background: #000;
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 28pt;
    font-weight: 800;
    letter-spacing: 4px;
    margin: 5px 0;
    text-transform: uppercase;
}

.sticker-footer-text {
    text-align: center;
    font-size: 8pt;
    font-weight: 500;
    margin-top: 5px;
}

/* Sticker Niño Detalle */
.sticker-child-name {
    font-size: 18pt;
    font-weight: 800;
    margin-bottom: 2px;
}

.sticker-child-meta {
    border-bottom: 1.5px solid #000;
    padding-bottom: 4px;
    margin-bottom: 8px;
    font-size: 9pt;
    display: flex;
    justify-content: space-between;
}

.sticker-secondary-info {
    font-size: 9pt;
    margin-bottom: 8px;
}

.sticker-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #eee;
    padding: 2px 0;
}

.sticker-logo-placeholder {
    width: 45px;
    height: 45px;
    border: 2px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 8pt;
    text-align: center;
    line-height: 1;
}

@media print {
    @page {
        size: 80mm auto;
        margin: 0;
        orientation: portrait;
    }

    /* Ocultar TODO con visibility (permite que hijos sobreescriban, a diferencia de display:none) */
    body * {
        visibility: hidden !important;
    }

    /* Mostrar solo el clon de impresión que se inyecta en el body */
    #stickers-print-clone,
    #stickers-print-clone * {
        visibility: visible !important;
    }

    #stickers-print-clone {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        z-index: 99999 !important;
    }

    /* Forzar que el preview sea lo único visible y ocupe el ancho real */
    #stickers-preview {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        background: white !important;
    }

    #stickers-preview * {
        visibility: visible !important;
    }

    .sticker {
        width: 74mm;
        margin: 0 auto;
        padding: 4mm;
        page-break-after: always;
        break-after: page;
        display: block !important;
        border: none !important;
    }

    .sticker-code-block {
        background-color: #000 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        font-size: 32pt !important;
        height: 60px !important;
        line-height: 60px !important;
    }
}

/* ══════════════════════════════════
   MODALS
══════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 500;
    padding: 1rem;
    animation: fadeIn .2s ease;
}

@media (min-width: 640px) {
    .modal-overlay {
        align-items: center;
    }
}

.modal-card {
    background: var(--surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.75rem 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp .3s ease;
    box-shadow: var(--shadow-xl);
}

@media (min-width: 640px) {
    .modal-card {
        border-radius: var(--radius-xl);
    }
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--danger);
    color: white;
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.modal-title i {
    color: var(--primary);
}

.modal-desc {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.modal-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
}

.modal-actions button {
    flex: 1;
}

.qr-display-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
    gap: .75rem;
}

/* ══════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════ */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--text-primary);
    color: white;
    padding: .75rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    z-index: 9999;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}

.toast i {
    color: var(--success);
}

.toast.error i {
    color: var(--danger);
}

/* ══════════════════════════════════
   CHECK-IN RESULT PANEL
   Muestra hijos al buscar tutor
   ══════════════════════════════════ */
.children-checkin-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.child-checkin-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.child-checkin-item.child-already-in {
    background: rgba(16, 185, 129, 0.03);
    border-color: rgba(16, 185, 129, 0.2);
}

.child-checkin-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.child-checkin-info {
    flex: 1;
    min-width: 0;
}

.child-checkin-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 700;
}

.child-checkin-info small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.child-ticket-status {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.child-in-room {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--success);
    font-weight: 700;
    font-size: 0.75rem;
}

.ticket-printed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.ticket-printed-badge {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.btn-reprint-panel {
    padding: 4px 10px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
    font-family: var(--font);
}

.btn-reprint-panel:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

.child-select-check {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* ══════════════════════════════════
   ADMIN PANEL
══════════════════════════════════ */
.admin-body {
    background: var(--surface-2);
    padding-top: 0;
}

/* Sidebar */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--text-primary);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: transform .3s ease;
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
}

.sidebar-brand i {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.sidebar-brand span {
    color: var(--secondary);
}

.sidebar-brand strong {
    display: block;
    font-size: .9rem;
}

.sidebar-brand small {
    display: block;
    font-size: .7rem;
    color: rgba(255, 255, 255, .4);
}

.sidebar-nav {
    flex: 1;
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Badge counter on sidebar items (e.g. pending verifications) */
.nav-badge {
    margin-left: auto;
    background: var(--danger, #ef4444);
    color: white;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}


.nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: var(--font);
    width: 100%;
    text-align: left;
}

.nav-item i {
    width: 18px;
    text-align: center;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(255, 255, 255, .08);
    color: white;
}

.nav-item.active {
    color: var(--secondary);
    font-weight: 700;
}

.nav-item.active i {
    color: var(--secondary);
}

.sidebar-footer {
    padding: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.logout-btn {
    color: rgba(239, 68, 68, .8) !important;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, .1) !important;
    color: var(--danger) !important;
}

/* Hamburger */
.hamburger {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 40px;
    height: 40px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    z-index: 300;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
}

/* Admin Main */
.admin-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .admin-main {
        margin-left: 0;
    }
}

/* Admin Header */
.admin-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .admin-header {
        padding: 1.25rem 1rem 1.25rem 3.5rem;
    }
}

.admin-header h1 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.admin-subtitle {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.date-chip {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: .4rem .9rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.admin-avatar {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

/* Admin Pages */
.admin-page {
    display: none;
    padding: 1.75rem 2rem;
}

.admin-page.active {
    display: block;
}

@media (max-width: 768px) {
    .admin-page {
        padding: 1rem;
    }
}

/* KPI Cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.kpi-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.kpi-card.blue::before {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.kpi-card.green::before {
    background: linear-gradient(90deg, var(--success), #34D399);
}

.kpi-card.purple::before {
    background: linear-gradient(90deg, #7C3AED, #A78BFA);
}

.kpi-card.orange::before {
    background: linear-gradient(90deg, var(--warning), #FCD34D);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kpi-card.blue .kpi-icon {
    background: rgba(79, 70, 229, .12);
    color: var(--primary);
}

.kpi-card.green .kpi-icon {
    background: rgba(16, 185, 129, .12);
    color: var(--success);
}

.kpi-card.purple .kpi-icon {
    background: rgba(124, 58, 237, .12);
    color: #7C3AED;
}

.kpi-card.orange .kpi-icon {
    background: rgba(245, 158, 11, .12);
    color: var(--warning);
}

.kpi-info {
    flex: 1;
}

.kpi-info strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.kpi-info span {
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 500;
}

.kpi-trend {
    font-size: .75rem;
}

.kpi-trend.up {
    color: var(--success);
}

.kpi-trend.down {
    color: var(--danger);
}

.kpi-trend.stable {
    color: var(--text-muted);
}

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }
}

.chart-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.chart-card.full-width {
    grid-column: 1 / -1;
}

.chart-card h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.chart-card h3 i {
    color: var(--primary);
}

.age-distribution {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.age-legend {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.age-legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--text-secondary);
}

.age-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Admin Card */
.admin-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.card-header-row h3 {
    font-size: .95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.activity-item:hover {
    background: var(--surface-2);
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-text {
    flex: 1;
    font-size: .85rem;
}

.activity-time {
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Admin Filters */
.admin-filters {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}

.search-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: .5rem .85rem;
    flex: 1;
    min-width: 200px;
}

.search-box i {
    color: var(--text-muted);
}

.search-box input {
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: .875rem;
    outline: none;
    color: var(--text-primary);
    width: 100%;
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.admin-table th {
    padding: .75rem 1rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

.admin-table td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: rgba(79, 70, 229, .02);
}

/* Overflow scroll for tables on mobile */
#attendance-table-container {
    overflow-x: auto;
}

/* Children Admin Grid */
.children-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.child-admin-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
}

.child-admin-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Rooms Grid */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.room-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition);
    border-top: 4px solid;
}

.room-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.room-card .room-emoji {
    font-size: 2rem;
    margin-bottom: .5rem;
}

.room-card h3 {
    font-size: 1rem;
    font-weight: 700;
}

.room-card .room-age {
    font-size: .8rem;
    color: var(--text-muted);
    margin: .25rem 0;
}

.room-card .room-count {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
}

.room-card .room-label {
    font-size: .75rem;
    color: var(--text-muted);
}

/* Reports */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.report-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.report-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.report-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin: 0 auto .75rem;
}

.report-icon.blue {
    background: rgba(79, 70, 229, .12);
    color: var(--primary);
}

.report-icon.green {
    background: rgba(16, 185, 129, .12);
    color: var(--success);
}

.report-icon.purple {
    background: rgba(124, 58, 237, .12);
    color: #7C3AED;
}

.report-icon.orange {
    background: rgba(245, 158, 11, .12);
    color: var(--warning);
}

.report-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.report-card p {
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.report-output {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
}

.badge.in {
    background: rgba(16, 185, 129, .12);
    color: var(--success);
}

.badge.out {
    background: var(--surface-2);
    color: var(--text-muted);
}

.badge.active {
    background: rgba(16, 185, 129, .12);
    color: var(--success);
}

.badge.inactive {
    background: var(--surface-2);
    color: var(--text-muted);
}

.badge.admin {
    background: rgba(79, 70, 229, .12);
    color: var(--primary);
}

.badge.staff {
    background: rgba(6, 182, 212, .12);
    color: var(--secondary);
}

.badge.parent {
    background: rgba(245, 158, 11, .12);
    color: var(--warning);
}

/* ══════════════════════════════════
   RESPONSIVE TWEAKS
══════════════════════════════════ */
@media (max-width: 480px) {
    .landing-card {
        padding: 2rem 1.25rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-section {
        padding: 1.25rem 1rem;
    }

    .stats-strip {
        padding: .5rem;
    }

    .stat-item strong {
        font-size: 1.1rem;
    }

    .scanner-frame {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 360px) {
    .tab-btn {
        font-size: .75rem;
        padding: .5rem .3rem;
    }

    .brand-title {
        font-size: 1.6rem;
    }
}

/* ══════════════════════════════════
   PARENT DASHBOARD
══════════════════════════════════ */

.parent-dash-body {
    background: #F1F5F9;
    padding-top: 60px;
}

/* ── Parent Topbar ── */
.parent-topbar {
    background: linear-gradient(90deg, #4F46E5, #06B6D4);
}

/* ── Hero Card ── */
.parent-hero {
    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    padding: 1.5rem 1rem 2.5rem;
    position: relative;
}

.parent-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 32px;
    background: #F1F5F9;
    border-radius: 32px 32px 0 0;
}

.parent-hero-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Profile Row */
.parent-profile-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.parent-big-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 3px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.parent-big-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parent-profile-info {
    flex: 1;
    min-width: 0;
}

.parent-profile-info h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parent-profile-info p {
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: .2rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.parent-role-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-full);
    padding: .2rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    margin-top: .35rem;
}

/* QR Button */
.btn-show-qr {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: .9rem 1.1rem;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    text-align: left;
    color: white;
}

.btn-show-qr:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.btn-show-qr-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary);
}

.btn-show-qr-text {
    flex: 1;
}

.btn-show-qr-text strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
}

.btn-show-qr-text small {
    display: block;
    font-size: .78rem;
    opacity: .8;
    margin-top: .1rem;
}

/* ── Main Container ── */
.parent-main {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Quick Stats ── */
.parent-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

.parent-stat-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: .9rem .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid;
    transition: var(--transition);
}

.parent-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.parent-stat-card.blue {
    border-color: var(--primary);
}

.parent-stat-card.green {
    border-color: var(--success);
}

.parent-stat-card.purple {
    border-color: #8B5CF6;
}

.pstat-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.parent-stat-card.blue .pstat-icon {
    background: rgba(79, 70, 229, .1);
    color: var(--primary);
}

.parent-stat-card.green .pstat-icon {
    background: rgba(16, 185, 129, .1);
    color: var(--success);
}

.parent-stat-card.purple .pstat-icon {
    background: rgba(139, 92, 246, .1);
    color: #8B5CF6;
}

.pstat-info {
    min-width: 0;
}

.pstat-info strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.pstat-info small {
    display: block;
    font-size: .68rem;
    color: var(--text-muted);
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sections ── */
.dash-section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-section-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dash-section-header h3 i {
    color: var(--primary);
}

/* ── Mis Niños List ── */
.mis-ninos-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.nino-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.nino-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
    border-radius: 4px 0 0 4px;
}

.nino-card:hover {
    border-color: var(--primary-light);
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

.nino-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: white;
}

.nino-info {
    flex: 1;
    min-width: 0;
}

.nino-info strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.nino-info small {
    display: block;
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

.nino-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
}

.nino-card-arrow {
    color: var(--text-muted);
    font-size: .85rem;
    flex-shrink: 0;
}


/* ── Botón editar niño (lápiz) ── */
.nino-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: var(--primary);
    font-size: .82rem;
    cursor: pointer;
    transition: background .18s, border-color .18s, box-shadow .18s, transform .15s;
    margin-left: .25rem;
}
.nino-edit-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(79,70,229,.3);
    transform: scale(1.1);
}
.nino-edit-btn:active {
    transform: scale(.95);
}
.nino-today-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    border: 2px solid var(--surface);
}

/* Empty niños */
.ninos-empty {
    text-align: center;
    padding: 1.5rem;
}

.ninos-empty i {
    font-size: 2.5rem;
    color: var(--primary-light);
    margin-bottom: .5rem;
    display: block;
}

.ninos-empty p {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* ── Hoy Status ── */
.today-chip {
    background: rgba(79, 70, 229, .1);
    color: var(--primary);
    padding: .2rem .7rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 600;
}

.hoy-status-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.hoy-status-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.hoy-status-item.in {
    border-color: rgba(16, 185, 129, .3);
    background: rgba(16, 185, 129, .04);
}

.hoy-status-item.out {
    border-color: var(--border);
    background: var(--surface-2);
}

.hoy-status-item.none {
    border-color: var(--border);
    background: var(--surface-2);
}

.hoy-status-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: white;
}

.hoy-status-info {
    flex: 1;
}

.hoy-status-info strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
}

.hoy-status-info small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

.hoy-status-badge {
    padding: .3rem .7rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.hoy-status-badge.in {
    background: rgba(16, 185, 129, .12);
    color: var(--success);
}

.hoy-status-badge.out {
    background: var(--surface-2);
    color: var(--text-muted);
}

.hoy-status-badge.none {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* ── Historial ── */
.historial-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.historial-group-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    padding: .5rem 0 .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .25rem;
}

.historial-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .75rem;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.historial-item:hover {
    background: var(--surface-2);
}

.historial-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: var(--success);
}

.historial-info {
    flex: 1;
    min-width: 0;
}

.historial-info strong {
    display: block;
    font-size: .85rem;
    font-weight: 700;
}

.historial-info small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

.historial-time {
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.historial-code {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: .15rem .4rem;
    border-radius: var(--radius-sm);
}

/* ── QR Modal ── */
.qr-modal-card {
    text-align: center;
}

.qr-modal-header {
    margin-bottom: 1.5rem;
}

.qr-modal-icon {
    width: 56px;
    height: 56px;
    background: rgba(79, 70, 229, .1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin: 0 auto .75rem;
}

.qr-modal-header h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: .35rem;
}

.qr-modal-header p {
    font-size: .82rem;
    color: var(--text-muted);
    max-width: 280px;
    margin: 0 auto;
}

.qr-big-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.qr-big-frame {
    padding: 1.25rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border);
    display: inline-block;
}

.qr-scan-hint {
    font-size: .78rem;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}

.qr-owner-info {
    margin-bottom: .75rem;
}

.qr-owner-info strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.qr-owner-info small {
    font-size: .75rem;
    color: var(--text-muted);
    font-family: monospace;
    letter-spacing: 1px;
}

.qr-children-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.qr-child-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 600;
    background: rgba(79, 70, 229, .08);
    color: var(--primary);
    border: 1px solid rgba(79, 70, 229, .15);
}

.qr-modal-actions {
    display: flex;
    gap: .75rem;
}

.qr-modal-actions button {
    flex: 1;
}

/* ── Child Detail Modal ── */
.child-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.child-detail-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
}

.child-detail-header h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.child-detail-header p {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .25rem;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.detail-info-item {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.detail-label {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.detail-label i {
    color: var(--primary);
}

.detail-value {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.detail-history h4 {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
}

.detail-history-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 220px;
    overflow-y: auto;
}

.detail-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .75rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: .8rem;
}

.detail-history-item span {
    color: var(--text-secondary);
}

.detail-history-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Room Preview Box ── */
.room-preview-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(79, 70, 229, .06);
    border: 1px solid rgba(79, 70, 229, .15);
    border-radius: var(--radius-md);
    padding: .65rem 1rem;
    font-size: .875rem;
    color: var(--primary);
}

.room-preview-box i {
    color: var(--primary);
}

.room-preview-box strong {
    color: var(--text-primary);
}

/* ── Filter Select Mini ── */
.filter-select-mini select {
    padding: .35rem .65rem;
    font-size: .8rem;
    border-radius: var(--radius-sm);
}

/* ══════════════════════════════════
   DOCUMENTO DE IDENTIDAD - GRUPOS
══════════════════════════════════ */

.doc-group {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Versión opcional (niños) con borde punteado */
.doc-group--optional {
    border-style: dashed;
    background: rgba(79, 70, 229, .02);
}

.doc-group-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.doc-group-label i {
    color: var(--primary);
}

.doc-optional-badge {
    margin-left: auto;
    padding: .15rem .55rem;
    background: rgba(148, 163, 184, .15);
    color: var(--text-muted);
    border-radius: var(--radius-full);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Grid interno tipo + número */
.doc-group-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: .75rem;
    align-items: end;
}

@media (max-width: 400px) {
    .doc-group-inner {
        grid-template-columns: 1fr;
    }
}

/* Hint de formato */
.doc-hint {
    font-size: .75rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .5rem;
    background: rgba(79, 70, 229, .06);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.doc-hint::before {
    content: '\f05a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .7rem;
}

/* Columnas del form-group dentro del doc-group */
.doc-tipo {
    min-width: 0;
}

.doc-numero {
    min-width: 0;
}

/* ══════════════════════════════════
   ADMIN DASHBOARD ADDITIONS
══════════════════════════════════ */

.children-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.child-admin-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border);
}

.child-admin-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-light);
}

.room-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-top: 5px solid var(--primary);
    transition: var(--transition);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.room-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.room-actions {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    gap: 0.4rem;
    opacity: 0;
    transition: var(--transition);
}

.room-card:hover .room-actions {
    opacity: 1;
}

.room-actions button {
    background: var(--surface-2);
    border: 1px solid var(--border);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.room-actions button:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.room-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.room-age {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.room-count {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin: 0.5rem 0;
}

.room-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 1rem;
}

.room-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
}

.room-badge.room-1 { background: #EF4444; }
.room-badge.room-2 { background: #F59E0B; }
.room-badge.room-3 { background: #10B981; }
.room-badge.room-4 { background: #3B82F6; }
.room-badge.room-5 { background: #8B5CF6; }
.room-badge.room-big { background: #10B981; }

.badge.staff { background: #64748b; color: white; }
.badge.active { background: #10b981; color: white; }
.badge.in { background: rgba(16, 185, 129, 0.1); color: var(--success); border: 1px solid var(--success); }
.badge.out { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }

.sticker-code-mini {
    font-family: 'Courier New', Courier, monospace;
    background: #0F172A;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Design Selector for Stickers */
.design-card-label input:checked + .design-card {
    border-color: var(--primary) !important;
    background: #eff6ff !important;
    color: var(--primary);
}

/* ══════════════════════════════════════════
   MULTI-SEDE — Staff Panel
══════════════════════════════════════════ */

/* Topbar center for sede indicator */
.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.sede-indicator-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(99, 102, 241, .1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
}

.sede-indicator-btn:hover {
    background: var(--primary);
    color: white;
}

/* Sede Picker Modal */
.sede-picker-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
}

.sede-pick-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font);
    transition: var(--transition);
    text-align: left;
    width: 100%;
}

.sede-pick-btn:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, .05);
}

.sede-pick-btn .fas.fa-location-dot {
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sede-pick-btn div {
    flex: 1;
}

.sede-pick-btn strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
}

.sede-pick-btn small {
    display: block;
    font-size: .78rem;
    color: var(--text-muted);
}

.sede-pick-btn .fa-chevron-right {
    color: var(--text-muted);
    font-size: .75rem;
}

/* Pending check-ins section */
.pending-section {
    background: linear-gradient(135deg, rgba(245, 158, 11, .06), rgba(245, 158, 11, .02));
    border: 1.5px solid rgba(245, 158, 11, .25);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.pending-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: var(--warning);
    color: white;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 700;
    padding: 0 5px;
    margin-left: 6px;
}

.pending-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .75rem;
}

.pending-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid rgba(245, 158, 11, .2);
}

.pending-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .85rem;
    font-weight: 700;
}

.pending-info {
    flex: 1;
    min-width: 0;
}

.pending-info strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pending-info small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

.btn-confirm-pending {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .4rem .85rem;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-confirm-pending:hover {
    background: #059669;
    transform: translateY(-1px);
}

.btn-confirm-pending:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* Auto-room chip en result panel */
.auto-room-row {
    margin-top: 6px;
}

.auto-room-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(79, 70, 229, .08);
    color: var(--primary);
    border: 1px solid rgba(79, 70, 229, .2);
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 700;
}

.auto-room-chip.warn {
    background: rgba(245, 158, 11, .08);
    color: var(--warning);
    border-color: rgba(245, 158, 11, .2);
}

/* ══════════════════════════════════════════
   MULTI-SEDE — Parent Dashboard
══════════════════════════════════════════ */

/* CTA Registrar entrada */
.checkin-cta-section {
    padding: 0 !important;
    overflow: hidden;
}

.checkin-cta-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(167, 139, 250, .06));
    border: 1.5px solid rgba(99, 102, 241, .25);
    border-radius: var(--radius-lg);
}

.checkin-cta-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.checkin-cta-text {
    flex: 1;
}

.checkin-cta-text strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
}

.checkin-cta-text small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

.btn-checkin-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .5rem 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: .82rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-checkin-cta:hover {
    background: var(--primary-dark, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
}

.checkin-sent-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(16, 185, 129, .07);
    border: 1.5px solid rgba(16, 185, 129, .3);
    border-radius: var(--radius-lg);
    color: var(--success);
}

.checkin-sent-banner i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.checkin-sent-banner strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
}

.checkin-sent-banner small {
    display: block;
    font-size: .75rem;
    opacity: .8;
}

/* Wizard Modal */
.wizard-step-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
}

.wizard-sede-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.wizard-sede-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font);
    transition: var(--transition);
    text-align: left;
    width: 100%;
}

.wizard-sede-btn:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, .05);
    transform: translateX(4px);
}

.wizard-sede-btn .fa-location-dot {
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wizard-sede-btn div {
    flex: 1;
}

.wizard-sede-btn strong,
.wizard-sede-btn small {
    display: block;
}

.wizard-sede-btn small {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.wizard-sede-btn .fa-chevron-right {
    color: var(--text-muted);
    font-size: .75rem;
}

.wizard-children-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: .5rem;
}

.wizard-child-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

.wizard-child-row:not(.disabled):hover {
    border-color: var(--primary-light);
    background: rgba(99, 102, 241, .03);
}

.wizard-child-row.disabled {
    opacity: .6;
    cursor: default;
}

.wizard-child-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 9px;
    background: rgba(99, 102, 241, .08);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
}

.wizard-already-in {
    display: block;
    font-size: .72rem;
    color: var(--success);
    font-weight: 600;
    margin-top: 3px;
}

.checkin-cta-text strong {
    font-size: .9rem;
    font-weight: 700;
}

.checkin-cta-text small {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
}

.btn-checkin-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .5rem 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: .82rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-checkin-cta:hover {
    background: var(--primary-dark, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
}

.checkin-sent-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(16, 185, 129, .07);
    border: 1.5px solid rgba(16, 185, 129, .3);
    border-radius: var(--radius-lg);
    color: var(--success);
}

.checkin-sent-banner i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.checkin-sent-banner strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
}

.checkin-sent-banner small {
    display: block;
    font-size: .75rem;
    opacity: .8;
}

/* Wizard Modal */
.wizard-step-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
}

.wizard-sede-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.wizard-sede-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font);
    transition: var(--transition);
    text-align: left;
    width: 100%;
}

.wizard-sede-btn:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, .05);
    transform: translateX(4px);
}

.wizard-sede-btn .fa-location-dot {
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wizard-sede-btn div {
    flex: 1;
}

.wizard-sede-btn strong,
.wizard-sede-btn small {
    display: block;
}

.wizard-sede-btn small {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.wizard-sede-btn .fa-chevron-right {
    color: var(--text-muted);
    font-size: .75rem;
}

.wizard-children-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: .5rem;
}

.wizard-child-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

.wizard-child-row:not(.disabled):hover {
    border-color: var(--primary-light);
    background: rgba(99, 102, 241, .03);
}

.wizard-child-row.disabled {
    opacity: .6;
    cursor: default;
}

.btn-back-wizard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: .8rem;
    font-family: var(--font);
    cursor: pointer;
    margin-bottom: .75rem;
    transition: color .2s;
}

.btn-back-wizard:hover {
    color: var(--primary);
}

.wizard-child-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .88rem;
    font-weight: 700;
}

.wizard-child-info {
    flex: 1;
    min-width: 0;
}

.wizard-child-info strong,
.wizard-child-info small {
    display: block;
}

.wizard-child-info strong {
    font-size: .9rem;
    font-weight: 700;
}

.wizard-child-info small {
    font-size: .75rem;
    color: var(--text-muted);
}

.wizard-room-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 9px;
    background: rgba(99, 102, 241, .08);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
}


/* Búsqueda de Padres en Staff */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-result-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-bottom: 1px solid var(--surface-2);
    transition: var(--transition);
}

.search-result-item:last-child { border-bottom: none; }

.search-result-item:hover {
    background: var(--surface-2);
}

.search-result-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.search-result-item small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-result-item i {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* STICKER PREVIEW */
#stickers-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: #f1f5f9;
}

.sticker {
    background: white;
    width: 80mm;
    min-height: 40mm;
    padding: 10mm 6mm;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: black;
    font-family: 'Arial', sans-serif;
    position: relative;
    box-sizing: border-box;
}

.sticker.zebra-4x2 {
    width: 101.6mm;
    height: 50.8mm;
    padding: 5mm 8mm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sticker-header {
    display: flex;
    justify-content: space-between;
    font-size: 8pt;
    margin-bottom: 4mm;
}

.sticker-child-name {
    font-size: 20pt;
    font-weight: 900;
}

.zebra-4x2 .sticker-child-name {
    font-size: 24pt;
}

.sticker-child-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11pt;
    margin: 2mm 0;
}

.sticker-code-block {
    background: black;
    color: white;
    font-size: 36pt;
    text-align: center;
    padding: 2mm 0;
}

.sticker-code-block.zebra {
    font-size: 42pt;
}

.sticker-footer-text {
    font-size: 7pt;
    text-align: center;
}
}

/* ── Emoji Picker ── */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    z-index: 1000;
    width: 260px;
}
.emoji-picker.hidden { display: none !important; }
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.emoji-grid span {
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    user-select: none;
}
.emoji-grid span:hover {
    background: var(--surface-2);
}

/* ----------------------------------
   UNIFIED LOGIN TABS
---------------------------------- */
.segmented-control {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 20px;
    gap: 4px;
}
.segmented-control .tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.segmented-control .tab-btn:hover {
    color: #334155;
}
.segmented-control .tab-btn.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════
   SEDE-GROUPED ROOMS (Admin)
══════════════════════════════════ */
.sede-rooms-group {
    margin-bottom: 2rem;
}

.sede-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(6,182,212,0.04));
    border: 1px solid rgba(79,70,229,0.15);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.sede-group-header i {
    color: var(--primary);
    font-size: 1.1rem;
}

.sede-group-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.sede-rooms-count {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
}

/* ══════════════════════════════════
   OVERVIEW FILTERS BAR
══════════════════════════════════ */
.overview-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.ov-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ov-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ov-filter-group label i {
    color: var(--primary);
    font-size: 0.7rem;
}

/* Segmented date mode buttons */
.ov-date-modes {
    display: flex;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
}

.ov-mode-btn {
    padding: 0.35rem 0.85rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.ov-mode-btn.active {
    background: var(--primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(79,70,229,.25);
}

.ov-mode-btn:hover:not(.active) {
    background: var(--border);
    color: var(--text-primary);
}

/* Period label strip */
.overview-period-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(79,70,229,.06);
    border: 1px solid rgba(79,70,229,.15);
    border-radius: var(--radius-full);
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}

.overview-period-label i {
    color: var(--primary);
    font-size: 0.75rem;
}

@media (max-width: 600px) {
    .overview-filters { flex-direction: column; }
    .ov-date-modes { flex-wrap: wrap; }
}

/* ══════════════════════════════════
   PRINT OPTIMIZATION FOR ZEBRA LABELS
   ══════════════════════════════════ */
@media print {
    /* Hide everything on the page */
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    
    body > *:not(#stickers-print-clone) {
        display: none !important;
    }
    
    /* Make print clone container the only visible element */
    #stickers-print-clone {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 80mm !important; /* Default 80mm ESC/POS */
        height: auto !important;
        box-shadow: none !important;
        border: none !important;
        background: white !important;
    }

    /* Adjust container size when printing Zebra 4x2 labels */
    #stickers-print-clone:has(.zebra-4x2) {
        width: 101.6mm !important;
        height: 50.8mm !important;
    }
    
    #stickers-print-clone .sticker {
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        break-after: always !important;
    }

    #stickers-print-clone .sticker.zebra-4x2 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 101.6mm !important; /* Zebra 4x2" size */
        height: 50.8mm !important;
        min-height: 50.8mm !important;
        padding: 5mm 8mm !important;
        box-sizing: border-box !important;
    }
    
    @page {
        margin: 0 !important;
    }
}

/* ══════════════════════════════════
   SWITCH TOGGLE & SETTINGS STYLES
   ══════════════════════════════════ */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary);
}

input:checked + .slider.zebra-slider {
    background-color: #ca8a04;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.options-section {
    transition: opacity 0.3s ease;
}

.options-section.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── SMALL SWITCH TOGGLE ── */
.switch-sm {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
}
.switch-sm input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-sm .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 20px;
}
.switch-sm .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
.switch-sm input:checked + .slider {
    background-color: #10b981;
}
.switch-sm input:checked + .slider:before {
    transform: translateX(16px);
}

/* ── EMAIL COMPOSER (User + Domain selector) ── */
.email-composer-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.email-user-input {
    flex: 1 1 52%;
    min-width: 0;
}

.email-domain-select {
    flex: 1 1 48%;
    min-width: 0;
    cursor: pointer;
    background-color: var(--surface-2);
    font-weight: 500;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: .75rem .6rem;
    color: var(--text-primary);
}

.email-domain-select:focus {
    border-color: var(--primary);
    background-color: var(--surface);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.email-custom-wrap {
    margin-top: 0.5rem;
    animation: fadeIn 0.2s ease-in-out;
}

.email-custom-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.email-at-addon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 1.05rem;
    pointer-events: none;
    z-index: 1;
}

.email-custom-input {
    padding-left: 2.2rem !important;
}

.email-preview-container {
    margin-top: 0.5rem;
    animation: fadeIn 0.15s ease-in-out;
}

.email-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4338ca;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.4;
    word-break: break-all;
}

.email-preview-badge strong {
    color: #312e81;
    font-weight: 700;
}

@media (max-width: 480px) {
    .email-composer-row {
        gap: 0.4rem;
    }
    .email-user-input {
        flex: 1 1 50%;
    }
    .email-domain-select {
        flex: 1 1 50%;
        padding: .75rem .4rem;
        font-size: 0.88rem;
    }
}

/* ── ESTILOS Y SOMBREADOS PARA VERIFICACIONES ── */
.admin-table tbody tr.verif-row-registro td,
.verif-row-registro td {
    background-color: #f4f7ff !important;
    transition: background-color 0.15s ease;
}
.admin-table tbody tr.verif-row-registro:hover td,
.verif-row-registro:hover td {
    background-color: #e6edff !important;
}
.admin-table tbody tr.verif-row-registro td:first-child,
.verif-row-registro td:first-child {
    border-left: 5px solid #4f46e5 !important;
}

.admin-table tbody tr.verif-row-recuperacion td,
.verif-row-recuperacion td {
    background-color: #fffbf0 !important;
    transition: background-color 0.15s ease;
}
.admin-table tbody tr.verif-row-recuperacion:hover td,
.verif-row-recuperacion:hover td {
    background-color: #fef2d2 !important;
}
.admin-table tbody tr.verif-row-recuperacion td:first-child,
.verif-row-recuperacion td:first-child {
    border-left: 5px solid #f59e0b !important;
}

.verif-avatar-registro {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    box-shadow: 0 2px 5px rgba(79, 70, 229, 0.3);
}

.verif-avatar-recuperacion {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3);
}

/* ── BOTÓN EN COOLDOWN Y ADVERTENCIA DE SPAM ── */
.btn-cooldown {
    background: #475569 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}
.btn-cooldown:hover {
    background: #334155 !important;
    border-color: #1e293b !important;
}

.toast.warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1.5px solid #fde68a !important;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2);
}
.toast.warning i {
    color: #d97706 !important;
}