:root {
    /* Paleta de marca: dorado y negro, inspirada en planos de construcción */
    --color-oscuro: #0a0a0a;
    --color-panel: #161412;
    --color-acero: #2b2b2b;
    --color-acento: #c9962b;
    --color-acento-brillante: #f0c75e;
    --color-hueso: #ece6d6;
    --color-gris-texto: #9a9284;
    --color-exito: #4caf6a;
    --color-error: #e05c5c;

    --fuente-titulo: 'Bebas Neue', 'Segoe UI', sans-serif;
    --fuente: 'Work Sans', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente);
    background-color: var(--color-oscuro);
    color: var(--color-hueso);
}

h1 {
    font-family: var(--fuente-titulo);
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 1.8rem;
    margin: 16px;
}

button {
    cursor: pointer;
    border: none;
    border-radius: 2px;
    padding: 12px 18px;
    background-color: var(--color-acento);
    color: var(--color-oscuro);
    font-family: var(--fuente);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
    min-height: 44px;
}
button:hover { background-color: var(--color-acento-brillante); }
button:focus-visible { outline: 3px solid var(--color-acento-brillante); outline-offset: 2px; }

input, select, textarea {
    font-family: var(--fuente);
    padding: 10px;
    border: 1px solid var(--color-acero);
    border-radius: 2px;
    background-color: var(--color-panel);
    color: var(--color-hueso);
    font-size: 1rem;
    width: 100%;
    min-height: 44px;
}
textarea { min-height: 80px; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(201,150,43,0.25);
}

.mensaje { margin: 0 16px 16px; font-weight: 600; }
.mensaje.exito { color: var(--color-exito); }

/* Fondo de cuadrícula tipo plano arquitectónico, reutilizable en cualquier vista */
.blueprint-bg {
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(201,150,43,0.05) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, rgba(201,150,43,0.05) 0 1px, transparent 1px 48px);
    pointer-events: none;
    z-index: 0;
}

/* Franja tipo cinta de precaución de obra, reinterpretada en dorado/negro */
.hazard-stripe {
    height: 6px;
    background: repeating-linear-gradient(135deg, var(--color-acento) 0 14px, var(--color-oscuro) 14px 28px);
}

/* Marcas de registro de plano — firma visual de la marca, usada en tarjetas clave */
.marca-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-acento);
    pointer-events: none;
}
.marca-corner-tl { top: -7px; left: -7px; border-right: none; border-bottom: none; }
.marca-corner-tr { top: -7px; right: -7px; border-left: none; border-bottom: none; }
.marca-corner-bl { bottom: -7px; left: -7px; border-right: none; border-top: none; }
.marca-corner-br { bottom: -7px; right: -7px; border-left: none; border-top: none; }

@media (min-width: 768px) {
    h1 { font-size: 2.2rem; margin: 24px; }
    .mensaje { margin: 0 24px 16px; }
}