/* =============================================================
   SUTUDEG — Sistema de Registro
   Hoja de estilos unificada · Diseño Institucional UdeG
   ============================================================= */

/* ── 1. Variables ─────────────────────────────────────────── */
:root {
    /* Paleta institucional UdeG */
    --blue:         #003399;
    --blue-dark:    #001F5B;
    --blue-mid:     #0044BB;
    --blue-light:   #3366CC;
    --gold:         #C9A227;
    --gold-light:   #E4B832;
    --gold-pale:    #FEF9E7;
    --gold-border:  rgba(201, 162, 39, .30);

    /* Neutros */
    --white:        #FFFFFF;
    --bg:           #EDF1FA;
    --surface:      #F4F7FD;
    --text:         #0D1A40;
    --text-mid:     #2B4480;
    --text-soft:    #6B82B0;
    --text-faint:   #A8B8D8;

    /* Bordes y sombras */
    --border:       rgba(0, 51, 153, .12);
    --shadow:       0 4px 24px rgba(0, 51, 153, .10);
    --shadow-lg:    0 16px 56px rgba(0, 51, 153, .15);

    /* Estado */
    --green:        #1B7A47;
    --green-bg:     rgba(27, 122, 71, .08);
    --green-border: rgba(27, 122, 71, .20);
    --amber:        #B5650A;
    --amber-bg:     rgba(181, 101, 10, .08);
    --amber-border: rgba(181, 101, 10, .20);
    --red:          #CC1A2A;
    --red-bg:       rgba(204, 26, 42, .08);
    --red-border:   rgba(204, 26, 42, .20);
    --info:         #0044BB;
    --info-bg:      rgba(0, 68, 187, .07);
    --info-border:  rgba(0, 68, 187, .18);
}

/* ── 2. Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, button { font-size: inherit; }

/* ── 3. Base ──────────────────────────────────────────────── */
body {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 70% 50% at 5% 5%,   rgba(0, 51, 153, .06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 95% 95%, rgba(201, 162, 39, .05) 0%, transparent 50%);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── 4. Layout de página (form / ticket) ──────────────────── */
.page-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    gap: 1.5rem;
}

.page-footer {
    font-size: .75rem;
    color: var(--text-faint);
    text-align: center;
    letter-spacing: .03em;
}

/* ── 5. Card ──────────────────────────────────────────────── */
.card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    width: 100%;
    max-width: 460px;
    animation: fadeSlideUp .55s ease forwards;
}

/* Franja bicolor en la cima */
.card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg,
        var(--blue-dark) 0%,
        var(--blue)      45%,
        var(--gold)      65%,
        var(--gold-light) 100%);
}

.card-body {
    padding: 1.75rem 2rem;
}

/* ── 6. Encabezado institucional (formulario) ─────────────── */
.inst-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem 1.25rem 1.75rem;
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
}

.inst-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.908);
    padding: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.inst-text { flex: 1; }

.inst-org {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .60);
    line-height: 1;
}

.inst-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    margin-top: 5px;
}

.inst-sub {
    display: block;
    font-size: .70rem;
    color: rgba(255, 255, 255, .50);
    margin-top: 3px;
}

/* ── 7. Preámbulo del formulario ──────────────────────────── */
.preamble {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .9rem 1rem;
    margin-bottom: 1.5rem;
}

.preamble-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0,51,153,.12), rgba(0,68,187,.07));
    border: 1px solid var(--border);
    color: var(--blue);
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.preamble-text {
    font-size: .84rem;
    color: var(--text-mid);
    line-height: 1.55;
}

.preamble-text strong { color: var(--blue); font-weight: 700; }

/* ── 8. Alertas ───────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .84rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    line-height: 1.45;
}

.alert i { margin-top: 1px; flex-shrink: 0; }

.alert-error  { background: var(--red-bg);   border: 1px solid var(--red-border);   color: var(--red); }
.alert-info   { background: var(--info-bg);  border: 1px solid var(--info-border);  color: var(--info); }
.alert-success{ background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); }
.alert-warning{ background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }

/* ── 9. Campos del formulario ─────────────────────────────── */
.reg-form { display: flex; flex-direction: column; gap: 1rem; }

.field-group { display: flex; flex-direction: column; gap: .3rem; }

.field-label {
    font-size: .70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--blue-mid);
}

.field-wrap { position: relative; }

.field-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: .875rem;
    pointer-events: none;
    transition: color .2s;
}

.icon-wa     { color: rgba(37, 163, 80, .55) !important; }
.icon-wa-dim { color: rgba(37, 163, 80, .38) !important; }

.field-input {
    width: 100%;
    padding: .75rem 1rem .75rem 2.6rem;
    background: var(--surface);
    border: 1.5px solid rgba(0, 51, 153, .18);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.field-input::placeholder { color: var(--text-faint); }

.field-input:focus {
    background: var(--white);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .15);
}

.field-input:focus + .field-icon,
.field-wrap:focus-within .field-icon {
    color: var(--blue);
}

.field-input.is-error {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px var(--red-bg) !important;
}

.field-input.mono { font-family: 'DM Mono', monospace; }

.field-error {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: var(--red);
    font-weight: 600;
}

.field-hint {
    font-size: .72rem;
    color: var(--text-faint);
}

/* ── 10. Botones ──────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .65rem 1.25rem;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 60%, var(--blue-mid) 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 51, 153, .25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--blue-dark);
    box-shadow: 0 6px 24px rgba(201, 162, 39, .30);
    transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-primary:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.btn-full { width: 100%; margin-top: .5rem; padding: .85rem 1.25rem; }

.btn-outline {
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.btn-outline:hover { background: var(--surface); border-color: var(--blue); }

.btn-ghost {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--border);
}

.btn-ghost:hover { background: var(--surface); color: var(--red); border-color: var(--red-border); }

.btn-danger {
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    color: var(--red);
}

.btn-danger:hover { background: rgba(204, 26, 42, .14); }

.btn-sm { padding: .5rem .9rem; font-size: .78rem; }

.btn-link {
    display: block;
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    padding: .5rem;
    transition: color .2s;
}

.btn-link:hover { color: var(--blue); }

/* ── 11. Nota de privacidad ───────────────────────────────── */
.privacy-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.25rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .75rem;
    color: var(--text-faint);
    line-height: 1.5;
}

.privacy-note i { color: var(--blue-light); margin-top: 1px; flex-shrink: 0; }

/* ══════════════════ TICKET ══════════════════════════════════ */

.ticket-card { max-width: 480px; }

/* Encabezado azul del pase */
.ticket-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
    position: relative;
    overflow: hidden;
}

/* Marca de agua sutil */
.ticket-header::after {
    content: 'SUTUDEG';
    position: absolute;
    right: -10px;
    bottom: -18px;
    font-size: 4.5rem;
    font-weight: 900;
    color: rgba(255,255,255,.04);
    letter-spacing: .05em;
    pointer-events: none;
    user-select: none;
}

.ticket-logo {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    padding: 5px;
    object-fit: contain;
    flex-shrink: 0;
}

.ticket-header-text { flex: 1; }

.ticket-org {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.ticket-title {
    font-family: 'DM Mono', monospace;
    font-size: .88rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: .12em;
    margin-top: 5px;
}

.ticket-event {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: .82rem;
    color: rgba(255, 255, 255, .75);
    margin-top: 2px;
}

/* ── QR ───────────────────────────────────────────────────── */
.qr-section {
    display: flex;
    justify-content: center;
    padding: 1.25rem 0 .75rem;
}

.qr-frame {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(0, 51, 153, .12);
    box-shadow: 0 4px 24px rgba(0, 51, 153, .12), 0 0 48px rgba(0, 51, 153, .05);
    animation: qrGlow 3.5s ease-in-out infinite alternate;
}

@keyframes qrGlow {
    from { box-shadow: 0 4px 16px rgba(0,51,153,.10), 0 0 30px rgba(0,51,153,.04); }
    to   { box-shadow: 0 8px 36px rgba(0,51,153,.18), 0 0 60px rgba(0,51,153,.08); }
}

.qr-img { border-radius: 8px; display: block; }

.scan-line {
    position: absolute;
    left: 14%; right: 14%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,51,153,.65), transparent);
    box-shadow: 0 0 10px rgba(0,51,153,.4), 0 0 24px rgba(0,51,153,.15);
    animation: scanMove 2.8s ease-in-out infinite;
    border-radius: 2px;
    z-index: 2;
}

@keyframes scanMove {
    0%, 100% { top: 12%; opacity: .2; }
    50%       { top: 84%; opacity: 1; }
}

.viewfinder {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: var(--gold);
    border-style: solid;
    z-index: 2;
}

.vf-tl { top: 6px;    left: 6px;    border-width: 2.5px 0 0 2.5px; border-radius: 6px 0 0 0; }
.vf-tr { top: 6px;    right: 6px;   border-width: 2.5px 2.5px 0 0; border-radius: 0 6px 0 0; }
.vf-bl { bottom: 6px; left: 6px;    border-width: 0 0 2.5px 2.5px; border-radius: 0 0 0 6px; }
.vf-br { bottom: 6px; right: 6px;   border-width: 0 2.5px 2.5px 0; border-radius: 0 0 6px 0; }

/* ── Datos del portador ───────────────────────────────────── */
.ticket-info {
    text-align: center;
    padding: .75rem 1rem .5rem;
}

.holder-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: .6rem;
}

.holder-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.holder-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--blue-mid);
}

.holder-badge.holder-phone {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: var(--green);
}

/* ── Línea de corte ───────────────────────────────────────── */
.tear-divider {
    position: relative;
    margin: 1.25rem 1.5rem;
    border-top: 2px dashed rgba(201, 162, 39, .35);
}

.tear-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    padding: 0 .6rem;
    color: var(--gold);
    font-size: .8rem;
}

/* ── ID del pase ──────────────────────────────────────────── */
.ticket-id-block {
    text-align: center;
    padding: .25rem 0 1rem;
}

.ticket-id-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .20em;
    color: var(--text-faint);
    margin-bottom: .35rem;
}

.ticket-id-value {
    font-family: 'DM Mono', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .20em;
}

/* ── Estado ───────────────────────────────────────────────── */
.ticket-status-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: .85rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
}

.status-success { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); }
.status-warning { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }
.status-info    { background: var(--info-bg);  border: 1px solid var(--info-border);  color: var(--info); }

/* ── Instrucción ──────────────────────────────────────────── */
.ticket-instruction {
    text-align: center;
    font-size: .76rem;
    color: var(--text-faint);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/* ── Acciones del ticket ──────────────────────────────────── */
.ticket-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ══════════════════ ADMIN ═══════════════════════════════════ */

/* Login */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.login-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    animation: fadeSlideUp .55s ease forwards;
}

.login-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg,
        var(--blue-dark) 0%,
        var(--blue)      45%,
        var(--gold)      65%,
        var(--gold-light) 100%);
}

.login-header {
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
    padding: 2rem 2rem 1.5rem;
    text-align: center;
}

.login-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    padding: 7px;
    object-fit: contain;
    margin: 0 auto 1rem;
}

.login-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
}

.login-sub {
    font-size: .75rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.50);
    margin-top: 4px;
    display: block;
}

.login-body { padding: 1.75rem 2rem 2rem; }

/* Nav admin */
.admin-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .90);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(0, 51, 153, .06);
}

/* Franja superior en nav */
.admin-nav::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        var(--blue-dark) 0%,
        var(--blue)      45%,
        var(--gold)      65%,
        var(--gold-light) 100%);
}

.admin-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    height: 66px;
    padding: 0 1.5rem;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.admin-logo {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: contain;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.admin-brand-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--blue-dark);
    line-height: 1.2;
}

.admin-brand-sub {
    font-size: .68rem;
    color: var(--text-soft);
    margin-top: 1px;
}

.admin-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Stats */
.admin-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

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

.stat-total::before { background: linear-gradient(90deg, var(--blue-dark), var(--blue)); }
.stat-sent::before  { background: linear-gradient(90deg, #1B7A47, #2AA15C); }
.stat-fail::before  { background: linear-gradient(90deg, #B5650A, #D4871A); }

.stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .25rem;
}

.stat-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-soft);
}

.stat-icon {
    font-size: 2.4rem;
    opacity: .08;
}

.stat-total .stat-value { color: var(--blue); }
.stat-sent  .stat-value { color: var(--green); }
.stat-fail  .stat-value { color: var(--amber); }

/* Tabla admin */
.table-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.table-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: .75rem;
}

.table-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue-dark);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.table-title i { color: var(--blue); }

.table-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.search-wrap { position: relative; }

.search-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: .85rem;
    pointer-events: none;
}

.search-input {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 9px;
    padding: .55rem 1rem .55rem 2.4rem;
    font-size: .84rem;
    width: 230px;
    outline: none;
    transition: all .2s;
    font-family: inherit;
}

.search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,162,39,.12);
    background: var(--white);
}

.filter-tag {
    font-size: .78rem;
    color: var(--text-soft);
    font-style: italic;
}

/* Table */
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .84rem; }

thead th {
    padding: .85rem 1.25rem;
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
}

tbody tr {
    border-bottom: 1px solid rgba(0,51,153,.05);
    transition: background .15s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(0,51,153,.02); }

td {
    padding: .9rem 1.25rem;
    vertical-align: middle;
    white-space: nowrap;
}

.td-index  { color: var(--text-faint); font-weight: 700; font-size: .8rem; }
.td-date   { font-size: .78rem; color: var(--text-soft); }
.td-name   { font-weight: 700; color: var(--blue-dark); }
.td-mono   { font-family: 'DM Mono', monospace; font-size: .80rem; color: var(--blue-mid); }
.td-ticket { font-family: 'DM Mono', monospace; font-size: .80rem; font-weight: 700; letter-spacing: .08em; color: var(--gold); }
.td-phone  { font-family: 'DM Mono', monospace; font-size: .80rem; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .7rem;
    border-radius: 100px;
    font-size: .73rem;
    font-weight: 700;
}

.badge-ok   { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); }
.badge-fail { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }

/* Tabla vacía */
.table-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-faint);
}

.table-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
    opacity: .35;
}

/* Admin footer */
.admin-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: .73rem;
    color: var(--text-faint);
    font-weight: 600;
    letter-spacing: .03em;
}

/* ── 16. Animaciones ──────────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ticket-reveal { animation: fadeSlideUp .55s ease forwards; }

/* ── 17. Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr; }
    .table-top  { flex-direction: column; align-items: stretch; }
    .table-controls { flex-direction: column; }
    .search-input { width: 100%; }
    .admin-nav-inner { padding: 0 1rem; }
    .admin-brand-sub { display: none; }
}

@media (max-width: 420px) {
    .card-body { padding: 1.25rem 1.25rem; }
    .inst-header { padding: 1rem 1.25rem; }
    .inst-title { font-size: 1rem; }
    .ticket-header { padding: 1rem 1.25rem; }
    .holder-name { font-size: 1.1rem; }
    .ticket-id-value { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}