/* ============================================================
   GESTIÓN DE INCIDENTES — ORT Uruguay
   Dark Terminal — Cómodo para uso prolongado
   site.css  —  reemplazar wwwroot/css/site.css
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
    --bg-page: #0e1117;
    --bg-surface: #141920;
    --bg-surface-2: #1a2030;
    --bg-hover: #1e2535;
    --border: #2a3548;
    --border-hi: #4a7a6a;
    /* Acento: verde salvia / teal — visible sin quemar la vista */
    --accent: #5dbea3;
    --accent-dim: rgba(93, 190, 163, 0.10);
    --accent-glow: rgba(93, 190, 163, 0.20);
    --accent-mid: #3d9e84;
    --danger: #e06c75;
    --danger-dim: rgba(224, 108, 117, 0.12);
    --warning: #d19a66;
    --success: #98c379;
    /* Texto: blanco cálido, nunca puro #fff */
    --text-primary: #ced6e0;
    --text-muted: #6b7d95;
    --text-dim: #3a4a5e;
    --text-code: #7ec8b0;
    --radius: 5px;
    --radius-lg: 8px;
    --font-mono: 'Courier New', 'Lucida Console', monospace;
    --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── RESET BOOTSTRAP ─────────────────────────────────────── */
.bg-white {
    background-color: var(--bg-surface) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.border-bottom {
    border-color: var(--border) !important;
}

.box-shadow {
    box-shadow: none !important;
}

/* ── BASE ────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    min-height: 100vh;
}

    /* ── SCANLINE — muy sutil, casi imperceptible ────────────── */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px );
        animation: scanline 12s linear infinite;
    }

@keyframes scanline {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100vh;
    }
}

/* Vignette suave */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient( ellipse at center, transparent 65%, rgba(0, 0, 0, 0.30) 100% );
}

/* ── NAVBAR ──────────────────────────────────────────────── */
.navbar {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-hi) !important;
    box-shadow: 0 1px 12px rgba(93, 190, 163, 0.08) !important;
    padding: 0.65rem 1.25rem;
}

.navbar-brand {
    color: var(--accent) !important;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    /* Cursor parpadeante al final del brand */
    .navbar-brand::after {
        content: '_';
        color: var(--accent);
        animation: blink-cursor 1.2s step-end infinite;
        opacity: 0.7;
    }

@keyframes blink-cursor {
    0%, 100% {
        opacity: 0.7;
    }

    50% {
        opacity: 0;
    }
}

.nav-link,
.nav-link.text-dark {
    color: var(--text-muted) !important;
    font-size: 0.88rem;
    padding: 0.4rem 0.8rem !important;
    border-radius: var(--radius);
    transition: color 0.18s, background 0.18s;
}

    .nav-link:hover,
    .nav-link:focus {
        color: var(--accent) !important;
        background: var(--accent-dim);
    }

.navbar-toggler {
    border-color: var(--border) !important;
}

.navbar-toggler-icon {
    filter: invert(0.6);
}

/* ── CONTENEDOR ──────────────────────────────────────────── */
.container {
    max-width: 1100px;
    padding-top: 2.25rem;
    padding-bottom: 2.5rem;
}

/* ── TIPOGRAFÍA ──────────────────────────────────────────── */
h1, h2, h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

h2 {
    font-size: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.01em;
}

    /* Prefijo de terminal discreto */
    h2::before {
        content: '$ ';
        color: var(--accent-mid);
        font-family: var(--font-mono);
        font-size: 0.9em;
        font-weight: 400;
    }

    /* Glitch suave al hacer hover — no agresivo */
    h2:hover {
        animation: glitch-soft 0.35s steps(3) 1;
    }

@keyframes glitch-soft {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(-2px, 0);
        color: var(--accent);
    }

    50% {
        transform: translate(2px, 0);
        color: var(--text-primary);
    }

    75% {
        transform: translate(-1px, 0);
    }

    100% {
        transform: translate(0);
    }
}

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

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s, opacity 0.15s;
}

    a:hover {
        color: var(--accent-mid);
        text-decoration: underline;
        opacity: 1;
    }

/* ── TABLAS ──────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

    table[border] {
        border: 1px solid var(--border) !important;
    }

th {
    background: #0e1117;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--border-hi);
    white-space: nowrap;
}

td {
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
    font-size: 0.92rem;
}

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

/* Aparición escalonada de filas */
tbody tr {
    opacity: 0;
    animation: row-appear 0.22s ease forwards;
}

    tbody tr:nth-child(1) {
        animation-delay: 0.04s;
    }

    tbody tr:nth-child(2) {
        animation-delay: 0.08s;
    }

    tbody tr:nth-child(3) {
        animation-delay: 0.12s;
    }

    tbody tr:nth-child(4) {
        animation-delay: 0.16s;
    }

    tbody tr:nth-child(5) {
        animation-delay: 0.20s;
    }

    tbody tr:nth-child(6) {
        animation-delay: 0.23s;
    }

    tbody tr:nth-child(7) {
        animation-delay: 0.26s;
    }

    tbody tr:nth-child(8) {
        animation-delay: 0.29s;
    }

    tbody tr:nth-child(9) {
        animation-delay: 0.32s;
    }

    tbody tr:nth-child(10) {
        animation-delay: 0.35s;
    }

    tbody tr:nth-child(n+11) {
        animation-delay: 0.38s;
    }

@keyframes row-appear {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

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

/* Hover con borde izquierdo de acento */
tbody tr:hover {
    background: var(--bg-hover);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Primera celda: código / ID */
td:first-child {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-code);
}

/* Links dentro de tablas como botones outline */
td a {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

    td a:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-dim);
        text-decoration: none;
        opacity: 1;
    }

/* ── FORMULARIOS ─────────────────────────────────────────── */
form {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    max-width: 480px;
    margin-bottom: 1.75rem;
    position: relative;
}

    /* Línea de acento superior */
    form::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), transparent 70%);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    margin-top: 1rem;
}

    label:first-of-type {
        margin-top: 0;
    }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    background: var(--bg-page);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    display: block;
    transition: border-color 0.15s, box-shadow 0.15s;
    caret-color: var(--accent);
}

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-glow);
    }

::placeholder {
    color: var(--text-dim);
    opacity: 1;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7d95'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.2rem;
    background-color: var(--bg-page);
}

    select option {
        background: var(--bg-surface);
        color: var(--text-primary);
    }

input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    margin-right: 0.4rem;
    cursor: pointer;
}

form br {
    display: none;
}

/* ── BOTONES ─────────────────────────────────────────────── */
button[type="submit"],
input[type="submit"] {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.6rem 1.6rem;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent-mid);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    animation: pulse-soft 4s ease-in-out infinite;
}

@keyframes pulse-soft {
    0%, 100% {
        box-shadow: 0 0 5px var(--accent-dim);
    }

    50% {
        box-shadow: 0 0 14px var(--accent-glow);
    }
}

/* Barrido de luz al hover */
button[type="submit"]::after,
input[type="submit"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(93,190,163,0.14), transparent);
    transition: left 0.38s ease;
}

button[type="submit"]:hover::after,
input[type="submit"]:hover::after {
    left: 150%;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
    animation: none;
}

/* ── MENSAJES DE ERROR ───────────────────────────────────── */
form p,
.error {
    background: var(--danger-dim);
    color: var(--danger);
    border: 1px solid rgba(224, 108, 117, 0.3);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    margin-top: 0.8rem;
}

    form p::before,
    .error::before {
        content: '⚠ ';
    }

form ~ p,
.login-msg {
    color: var(--danger);
    font-size: 0.88rem;
    margin-top: 0.5rem;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 0.82rem;
    padding: 1rem 0;
    margin-top: 2rem;
}

/* ── LINKS SUELTOS ───────────────────────────────────────── */
main a:not(td a):not(.navbar-brand):not(.nav-link) {
    color: var(--text-muted);
    font-size: 0.88rem;
    display: inline-block;
    margin-top: 0.75rem;
    transition: color 0.15s;
}

    main a:not(td a):not(.navbar-brand):not(.nav-link):hover {
        color: var(--accent);
        text-decoration: none;
    }

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-mid);
    }

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}