:root {
    --fondo: #05070a;
    --panel: rgba(12, 16, 24, 0.88);
    --panel-oscuro: rgba(8, 12, 20, 0.92);
    --texto: #f8fafc;
    --texto-suave: #94a3b8;
    --azul: #2563eb;
    --azul-claro: #38bdf8;
    --cyan: #00b4d8;
    --borde: rgba(148, 163, 184, 0.2);
}

* {
    box-sizing: border-box;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1) brightness(2.4);
    opacity: .95;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) brightness(3);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(to bottom, black, transparent 72%);
    opacity:.55;
    z-index:-1;
}

.card,
.tarjeta,
.seccion,
.contenido,
.sidebar,
.contenedor{
    animation:cognicionFadeUp .55s ease both;
}

.card:hover,
.tarjeta:hover,
.seccion:hover{
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

@keyframes cognicionFadeUp{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =====================================
   COMPONENTES GLOBALES
===================================== */

/* Barra superior */

.topbar{
    position:fixed;
    top:24px;
    left:320px;
    display:flex;
    gap:12px;
    z-index:1000;
}

/* Botón secundario */

.btn-secundario{

    padding:10px 18px;

    border-radius:999px;

    border:1px solid var(--borde);

    background:rgba(15,23,42,.90);

    color:white;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

.btn-secundario:hover{

    background:rgba(56,189,248,.15);

    border-color:var(--azul-claro);

}

/* Botón principal */

.btn-primario{

    padding:12px 22px;

    border:none;

    border-radius:999px;

    background:linear-gradient(135deg,var(--azul),var(--cyan));

    color:white;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

.btn-primario:hover{

    transform:translateY(-2px);

    box-shadow:0 0 18px rgba(37,99,235,.35);

}

/* Botón peligro */

.btn-peligro{

    padding:12px 22px;

    border:none;

    border-radius:999px;

    background:#b91c1c;

    color:white;

    cursor:pointer;

    font-weight:700;

}

.btn-peligro:hover{

    background:#dc2626;

}