/* =====================================================================
   ESTILO.CSS — Sistema de diseño base
   Concepto: "Plano de construcción" — la interfaz toma prestado el
   lenguaje visual de los planos arquitectónicos: cuadrícula de trazo,
   marcas de corte, anotaciones técnicas en monoespaciada, y el azul de
   papel ferroprusiato como color de identidad, contrastado con el
   ámbar de seguridad de obra como acento de acción.
   ===================================================================== */

:root {
    /* Color */
    --navy-deep: #0B1F2E;      /* fondo estructural oscuro */
    --navy-panel: #14324A;     /* paneles sobre fondo oscuro */
    --blueprint-line: #2C5578; /* líneas de cuadrícula sobre oscuro */
    --paper: #FFFFFF;          /* "papel" del plano — tarjetas, formularios */
    --paper-line: #DCE3E8;     /* líneas de cuadrícula sobre papel */
    --ink: #10222E;            /* texto principal sobre papel */
    --muted: #5D7891;          /* texto secundario */
    --amber: #F2A93B;          /* acento de acción — ámbar de seguridad */
    --amber-ink: #4A2E00;      /* texto sobre botones ámbar */
    --alerta: #D64545;
    --exito: #1E9E64;

    /* Fondos de página/hover (separados de --paper para poder invertirlos
       en modo oscuro sin tocar las tarjetas, que siguen usando --paper) */
    --bg-pagina: #F6F7F5;
    --bg-sutil: #FAFBF9;

    /* Tipografía */
    --font-display: 'Barlow Condensed', 'Big Shoulders Display', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

    /* Layout */
    --radio: 3px;
    --sombra-tarjeta: 0 20px 60px -20px rgba(11, 31, 46, 0.35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    /* Contención global: si un solo elemento en cualquier pantalla se
       pasa de ancho (una tabla sin envolver, un elemento con un ancho
       fijo mal calculado, etc.), esto evita que arrastre a TODA la
       página a un scroll horizontal general — el elemento problemático
       queda contenido/cortado en su lugar en vez de correr el layout
       entero. Es una defensa adicional; el arreglo real siempre es
       encontrar y corregir el elemento que se desborda. */
    overflow-x: hidden;
}

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.05;
    margin: 0 0 0.5em;
}

.mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

a { color: inherit; }

/* Cuadrícula tipo plano, como fondo de secciones oscuras */
.fondo-plano {
    background-color: var(--navy-deep);
    background-image:
        linear-gradient(var(--blueprint-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
}

/* Marcas de corte estilo hoja de plano, en las esquinas de una tarjeta */
.marcas-corte { position: relative; }
.marcas-corte::before,
.marcas-corte::after,
.marcas-corte > .corte-tl,
.marcas-corte > .corte-br { display: none; } /* placeholder de extensión futura */

/* Tarjeta base — usada en admin Y portal cliente. Antes vivía solo en el
   <style> inline del admin (includes/plantilla_admin.php), así que
   cualquier "tarjeta" del portal cliente (dashboard, estado de cuenta,
   comentarios…) se renderizaba sin fondo, sombra ni bordes redondeados:
   texto plano flotando sobre el fondo de la página, sin ninguna caja
   visible. Centralizada aquí para que ambos la compartan. */
.tarjeta { background: var(--paper); border-radius: var(--radio); box-shadow: var(--sombra-tarjeta); padding: 2rem; }
@media (max-width: 640px) { .tarjeta { padding: 1.4rem; } }

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    padding: 0.85em 1.6em;
    border-radius: var(--radio);
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primario {
    background: var(--amber);
    color: var(--amber-ink);
}
.btn-primario:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(242, 169, 59, 0.6); }
.btn-primario:active { transform: translateY(0); }

.btn-secundario {
    background: transparent;
    color: var(--navy-deep);
    border: 1.5px solid var(--navy-deep);
}
.btn-secundario:hover { background: var(--navy-deep); color: var(--paper); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Formularios */
.campo { margin-bottom: 1.25rem; }

.campo label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.4em;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.75em 0.9em;
    border: 1.5px solid var(--paper-line);
    border-radius: var(--radio);
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.15s ease;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.25);
}

.campo-error {
    border-color: var(--alerta) !important;
}
.mensaje-error {
    color: var(--alerta);
    font-size: 0.85rem;
    margin-top: 0.35em;
}

.alerta {
    padding: 0.9em 1.1em;
    border-radius: var(--radio);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    border-left: 3px solid;
}
.alerta-error { background: #FCEDED; border-color: var(--alerta); color: #7A1E1E; }
.alerta-exito { background: #E9F8F0; border-color: var(--exito); color: #0F5C39; }

/* Etiquetas de estatus (proyectos/etapas), color viene del catálogo en BD */
.pastilla {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    background: rgba(0,0,0,0.05);
}
.pastilla .punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Utilidades */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}