/* Base común de DirecLink: colores, letras y piezas que usan todas las pantallas. */

:root {
    --fondo: #f5f6fa;
    --tarjeta: #ffffff;
    --texto: #1d2230;
    --suave: #5d6578;
    --borde: #dfe3ec;
    --marca: #3b5bdb;
    --marca-texto: #ffffff;
    --bien: #2b8a3e;
    --mal: #c92a2a;
    --radio: 10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #12151c;
        --tarjeta: #1b2029;
        --texto: #e9ecf2;
        --suave: #a2aabb;
        --borde: #2c3341;
        --marca: #748ffc;
        --marca-texto: #10131a;
        --bien: #69db7c;
        --mal: #ff8787;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a {
    color: var(--marca);
}

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px;
}

label {
    display: block;
    font-weight: 600;
    margin: 12px 0 4px;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    color: var(--texto);
    font: inherit;
}

/* Casilla con su texto al lado (no ocupa todo el ancho como los demás campos) */
.casilla {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-weight: 400;
}

.casilla input {
    width: auto;
    margin-top: 4px;
}

button,
.boton {
    display: inline-block;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--marca);
    color: var(--marca-texto);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

button.secundario {
    background: transparent;
    color: var(--texto);
    border: 1px solid var(--borde);
}

.aviso {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--borde);
    margin: 12px 0;
}

.aviso.error {
    color: var(--mal);
    border-color: var(--mal);
}

.oculto {
    display: none;
}

.suave {
    color: var(--suave);
    font-size: 14px;
}