/*
 * Escénica360 — capa fina sobre Bootstrap 5 (que llega por CDN).
 * Un único juego de variables para la web pública, el acceso y el panel, de modo
 * que el sitio y la herramienta interna se reconozcan como la misma casa.
 */
:root {
    --e-tinta: #14141a;
    --e-tinta-2: #1e1e27;
    --e-tinta-3: #2b2b37;
    --e-papel: #f7f5f2;
    --e-papel-2: #ffffff;
    --e-ambar: #d4762f;
    --e-ambar-claro: #e8a05e;
    --e-verde: #2f7d5d;
    --e-texto: #22222b;
    --e-texto-suave: #6b6b78;
    --e-borde: #e4e0d9;
    --e-radio: .75rem;
    --e-sombra: 0 1px 2px rgba(20, 20, 26, .04), 0 8px 24px rgba(20, 20, 26, .06);

    --bs-primary: var(--e-tinta);
    --bs-primary-rgb: 20, 20, 26;
    --bs-link-color: var(--e-tinta);
    --bs-link-hover-color: var(--e-ambar);
    --bs-body-color: var(--e-texto);
    --bs-border-radius: var(--e-radio);
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--e-texto);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .e-display {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -.015em;
}

.e-marca {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* ---------- Botones y elementos comunes ---------- */
.btn { border-radius: .55rem; font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--e-tinta); --bs-btn-border-color: var(--e-tinta); --bs-btn-hover-bg: var(--e-tinta-3); --bs-btn-hover-border-color: var(--e-tinta-3); --bs-btn-active-bg: #000; }
.btn-ambar { --bs-btn-bg: var(--e-ambar); --bs-btn-color: #fff; --bs-btn-border-color: var(--e-ambar); --bs-btn-hover-bg: #bf6526; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #bf6526; }
.btn-outline-tinta { --bs-btn-color: var(--e-tinta); --bs-btn-border-color: rgba(20,20,26,.25); --bs-btn-hover-bg: var(--e-tinta); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--e-tinta); }

.card { border-color: var(--e-borde); border-radius: var(--e-radio); }
.e-card { background: var(--e-papel-2); border: 1px solid var(--e-borde); border-radius: var(--e-radio); box-shadow: var(--e-sombra); }
.form-control, .form-select { border-radius: .55rem; border-color: var(--e-borde); padding-block: .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--e-ambar); box-shadow: 0 0 0 .2rem rgba(212, 118, 47, .15); }
.e-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 600; color: var(--e-ambar); }

/* ---------- Web pública ---------- */
.e-publico { background: var(--e-papel); }
.e-nav-publica { background: rgba(247, 245, 242, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--e-borde); }
.e-hero { background: var(--e-tinta); color: #fff; position: relative; overflow: hidden; }
.e-hero::after {
    content: ""; position: absolute; inset: auto -20% -60% auto; width: 40rem; height: 40rem; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(212, 118, 47, .45), transparent 62%);
}
.e-hero > * { position: relative; z-index: 1; }
.e-hero h1 { font-size: clamp(2.1rem, 6vw, 3.9rem); line-height: 1.05; }
.e-hero p.lead { color: rgba(255, 255, 255, .78); max-width: 42rem; }
.e-linea { border-top: 3px solid var(--e-ambar); padding-top: 1.25rem; height: 100%; }
.e-paso { display: flex; gap: 1rem; }
.e-paso-num { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; color: var(--e-ambar); line-height: 1; min-width: 2rem; }
.e-pie { background: var(--e-tinta); color: rgba(255, 255, 255, .75); }
.e-pie a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.e-pie a:hover { color: #fff; text-decoration: underline; }

/* ---------- Acceso (login, registro, cambio de contraseña) ---------- */
.e-acceso { min-height: 100vh; background: var(--e-papel); }
.e-acceso-marca { background: var(--e-tinta); color: #fff; }
.e-acceso-caja { max-width: 27rem; width: 100%; }

/* ---------- Panel y hub ---------- */
.e-app { background: var(--e-papel); min-height: 100vh; }
.e-sidebar { background: var(--e-tinta); color: #fff; width: 264px; }
.e-sidebar .nav-link { color: rgba(255, 255, 255, .72); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .1rem; font-size: .93rem; }
.e-sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.e-sidebar .nav-link.active { color: #fff; background: rgba(212, 118, 47, .22); box-shadow: inset 2px 0 0 var(--e-ambar); }
.e-sidebar .nav-header { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin: 1.1rem 0 .3rem .75rem; }
@media (min-width: 992px) {
    .e-sidebar-fija { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.e-topbar { background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--e-borde); }
.e-kpi, .kpi { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.e-tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--e-texto-suave); border-bottom-color: var(--e-borde); font-weight: 600; }
.kanban-column { min-height: 200px; }
.kanban-item { cursor: move; }

/* En pantallas estrechas las tablas del panel se leen como fichas apiladas. */
@media (max-width: 575.98px) {
    .e-tabla-fichas thead { display: none; }
    .e-tabla-fichas tbody tr { display: block; border: 1px solid var(--e-borde); border-radius: var(--e-radio); margin-bottom: .75rem; padding: .25rem .5rem; background: var(--e-papel-2); }
    .e-tabla-fichas tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .45rem .25rem; text-align: right; }
    .e-tabla-fichas tbody td::before { content: attr(data-etiqueta); font-weight: 600; color: var(--e-texto-suave); text-align: left; }
}