/* ============================================================================================
   Control de Gastos — capa de estilo personalizada (front-estilo-personalizado-onemind)
   Sistema "Cabecera grafito" de la familia Amable: control-gastos-docs/arte/web/definitiva/.
   Los colores viven SOLO en :root; el resto de la hoja usa var(--…). Para cambiar la paleta se
   toca este bloque y nada más.
   ============================================================================================ */

:root {
    /* Marca: el oro de los rellenos y botones primarios, con el grafito como texto encima. */
    --marca: #F5B21E;
    --marca-oscura: #E3A00D;
    --marca-rgb: 245, 178, 30;
    --sobre-marca: #2A2725;
    --oro-claro: #FBC032;
    --oro-texto: #8A5D00;
    --oro-fondo: #FFF3D3;

    /* Texto y superficies. */
    --texto: #2A2725;
    --texto-atenuado: #6E685D;
    --borde: #E4DCCD;
    --linea: #F0EAE0;
    --fondo: #F8F4EC;
    --fondo-2: #F1EBDF;
    --fondo-panel: #FFFFFF;
    --barra: #ECE4D6;

    /* Grafito: barra de menú, cabeceras y tarjetas que destacan el dato que manda. */
    --grafito: #2E2D2F;
    --grafito-claro: #383837;
    --grafito-oscuro: #222123;
    --grafito-fondo: #1E1D1F;
    --sobre-grafito: #F7F3EA;
    --sobre-grafito-suave: #BDB7AB;
    --sobre-grafito-menu: #CFC9BD;
    --sobre-grafito-tenue: #9C968A;

    /* Semánticos: los mismos tonos que las acciones de éxito y destructiva (AA sobre su fondo). */
    --exito: #1B7A49;
    --exito-oscuro: #146039;
    --exito-fondo: #E3F3E9;
    --peligro: #B4412D;
    --peligro-oscuro: #943322;
    --peligro-fondo: #F7E3DF;
    --advertencia: #8A5D00;
    --advertencia-fondo: #FFF0C7;
    --info: #2D5F86;
    --info-fondo: #E4EEF6;

    /* Canales RGB para los usos con transparencia. */
    --blanco-rgb: 255, 255, 255;
    --grafito-rgb: 34, 33, 35;
    --sombra-rgb: 60, 45, 20;

    --foco: 0 0 0 2px var(--fondo-panel), 0 0 0 4.5px var(--marca-oscura);
    --radio: 24px;
    --radio-chico: 18px;
    --radio-campo: 14px;
    --radio-boton: 14px;
    --sombra: 0 8px 22px rgba(var(--sombra-rgb), .07);
    --sombra-alta: 0 24px 60px rgba(var(--sombra-rgb), .25);
    --velo: rgba(var(--grafito-rgb), .32);
    --degradado-grafito: linear-gradient(180deg, var(--grafito-claro), var(--grafito-oscuro));
    --degradado-grafito-diagonal: linear-gradient(160deg, var(--grafito-claro), var(--grafito-fondo));

    /* Paleta de gráficos, declarada una sola vez; la primera es la marca. */
    --serie-1: #F5B21E;
    --serie-2: #2E2D2F;
    --serie-3: #1B7A49;
    --serie-4: #B4412D;
    --serie-5: #2D5F86;
    --serie-6: #A8A196;

    --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulos: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--fuente);
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); font-weight: 700; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--foco); }
::selection { background: rgba(var(--marca-rgb), .35); }

/* ── Utilidades ───────────────────────────────────────────────────────────────────────────── */
.text-end { text-align: right; }
.text-muted { color: var(--texto-atenuado); }
.texto-chico { font-size: 12.5px; }
.texto-peligro { color: var(--peligro); }
.texto-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.fw-bold { font-weight: 700; }
.d-inline { display: inline; }
.enlace { color: var(--oro-texto); font-weight: 650; }
.enlace:hover { text-decoration: underline; }
.saldo-positivo { color: var(--exito); font-weight: 700; }
.saldo-negativo { color: var(--peligro); font-weight: 700; }
.saldo-cero { color: var(--texto-atenuado); font-weight: 700; }
.texto-intro { color: var(--texto-atenuado); font-size: 13.5px; max-width: 75ch; }
.filtros-card { padding: 14px 16px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtros > .form-input, .filtros > .form-group { flex: 1 1 180px; max-width: 320px; }
.filtros > .filtro-principal { flex: 2 1 260px; max-width: none; }
.filtros > .form-group { margin: 0; }
.filtros-acciones { display: flex; gap: 8px; align-items: center; padding-bottom: 5px; }
.monto-destacado { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: var(--oro-texto); }

/* ── Botones: una clase por tipo de acción, el tamaño por modificador ─────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; padding: 0 16px;
    border: 1.5px solid transparent; border-radius: var(--radio-boton);
    font-weight: 650; font-size: 14px; line-height: 1; white-space: nowrap;
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:focus-visible { box-shadow: var(--foco); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
a.btn.disabled { pointer-events: none; }

/* Acción primaria: Guardar, Ingresar, Sí, continuar. */
.btn-primary { background: var(--marca); color: var(--sobre-marca); box-shadow: 0 6px 16px rgba(var(--marca-rgb), .28); }
.btn-primary:hover:not(:disabled), .btn-primary.demo-hover { background: var(--marca-oscura); }
/* Acción secundaria: apoyo, incluido "＋ Agregar X". */
.btn-ghost { background: var(--oro-fondo); color: var(--oro-texto); }
.btn-ghost:hover:not(:disabled), .btn-ghost.demo-hover { background: var(--advertencia-fondo); border-color: rgba(var(--marca-rgb), .45); }
/* Acción neutra: Cancelar, Volver. */
.btn-secondary { background: var(--fondo-panel); color: var(--texto); border-color: var(--borde); }
.btn-secondary:hover:not(:disabled), .btn-secondary.demo-hover { background: var(--fondo); border-color: var(--texto-atenuado); }
/* Acción destructiva: Eliminar, Anular, Suspender, el ✕ de las filas dinámicas. */
.btn-danger-ghost { background: var(--fondo-panel); color: var(--peligro); border-color: var(--peligro-fondo); }
.btn-danger-ghost:hover:not(:disabled), .btn-danger-ghost.demo-hover { background: var(--peligro-fondo); border-color: var(--peligro); }
/* Acción de éxito: cerrar o concluir. */
.btn-success { background: var(--exito); color: var(--fondo-panel); }
.btn-success:hover:not(:disabled), .btn-success.demo-hover { background: var(--exito-oscuro); }

.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 11px; gap: 5px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 16px; border-radius: var(--radio-boton); }

/* Sobre grafito (barra pública, cabecera del Inicio, portada) la acción neutra se vuelve translúcida. */
.landing-nav .btn-secondary, .inicio-hero .btn-secondary, .portada .btn-secondary, .cta-inner .btn-secondary, .demo-access-card .btn-secondary {
    background: rgba(var(--blanco-rgb), .10); color: var(--sobre-grafito); border-color: rgba(var(--blanco-rgb), .2);
}
.landing-nav .btn-secondary:hover, .inicio-hero .btn-secondary:hover, .portada .btn-secondary:hover, .cta-inner .btn-secondary:hover, .demo-access-card .btn-secondary:hover {
    background: rgba(var(--blanco-rgb), .16); border-color: rgba(var(--blanco-rgb), .3);
}

/* En las tablas las acciones de fila se leen como enlaces (la primaria sigue siendo botón). */
.row-actions { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; justify-content: flex-end; }
.row-actions form { display: inline; margin: 0; }
.data-table td .btn:not(.btn-primary):not(.btn-success) { background: transparent; border-color: transparent; box-shadow: none; padding: 0 8px; }
.data-table td .btn-secondary, .data-table td .btn-ghost { color: var(--oro-texto); }
.data-table td .btn-secondary:hover, .data-table td .btn-ghost:hover { background: var(--oro-fondo); }
.data-table td .btn-danger-ghost:hover { background: var(--peligro-fondo); }

/* ── Campos y formularios ─────────────────────────────────────────────────────────────────── */
.form-card { padding: 20px 22px; max-width: 980px; }
.entity-form { display: flex; flex-direction: column; gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-span-2 { grid-column: span 2; }
.form-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-vertical .form-group, form > .form-group, .panel-flotante-cuerpo > .form-group { margin-bottom: 14px; }
.entity-form > .form-group { margin-bottom: 0; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--texto-atenuado); }
.marca-obligatorio { color: var(--advertencia); margin-left: 3px; font-weight: 700; }
.form-input {
    width: 100%; min-height: 40px; padding: 8px 12px;
    border: 1.5px solid var(--borde); border-radius: var(--radio-campo);
    background: var(--fondo); color: var(--texto); font-size: 14px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.form-input:hover { border-color: var(--texto-atenuado); }
.form-input:focus { outline: none; background: var(--fondo-panel); border-color: var(--oro-texto); box-shadow: var(--foco); }
.form-input:disabled, .form-input[readonly] { background: var(--fondo-2); color: var(--texto-atenuado); border-color: var(--linea); cursor: not-allowed; }
.form-input.input-validation-error { border-color: var(--peligro); }
select.form-input {
    appearance: none; padding-right: 36px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-atenuado) 50%), linear-gradient(135deg, var(--texto-atenuado) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
/* Monto con su moneda (doc 15 §5): el selector o el simbolo fijo pegados al campo. */
.campo-monto { display: flex; align-items: stretch; }
.campo-monto > .form-input:not(.campo-monto-moneda) { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.campo-monto-moneda.form-input { width: auto; flex: 0 0 auto; min-width: 84px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; font-weight: 650; }
.campo-monto-prefijo {
    display: inline-flex; align-items: center; padding: 0 12px; border: 1.5px solid var(--borde); border-right: 0;
    border-radius: var(--radio-campo) 0 0 var(--radio-campo); background: var(--fondo-2); color: var(--texto-atenuado); font-weight: 650; font-size: 14px;
}
.monto-otras-monedas { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-atenuado); }
.form-textarea, textarea.form-input { min-height: 84px; resize: vertical; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); width: 16px; height: 16px; }
.form-hint { font-size: 12px; color: var(--texto-atenuado); }
.form-error, .field-validation-error { display: block; font-size: 12px; color: var(--peligro); }
.field-validation-valid { display: none; }
.form-section-title {
    font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-texto);
    border-top: 1px solid var(--linea); padding-top: 12px;
}
.form-section-title:first-child { border-top: none; padding-top: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linea); }
.cg-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cg-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--texto); cursor: pointer; }
.form-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.form-inline .form-group { margin: 0; }

/* ── Paneles ──────────────────────────────────────────────────────────────────────────────── */
.card { background: var(--fondo-panel); border-radius: var(--radio); box-shadow: var(--sombra); min-width: 0; }
.card-header { font-family: var(--fuente-titulos); font-weight: 700; font-size: 15.5px; color: var(--texto); padding: 18px 22px 12px; }
.card-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 22px 12px; }
.card-header-row .card-header { padding: 0; }
.card-header .fa-solid, .card-header-row .card-header .fa-solid { color: var(--oro-texto); margin-right: 8px; }
.card-cuerpo { padding: 0 22px 20px; }
.card-header-flex { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.form-card > .card-header { padding: 0 0 12px; }
.form-card .card-cuerpo { padding: 0; }
.card .card { background: var(--fondo); box-shadow: none; border-radius: var(--radio-chico); }
.tabla-separada { margin-top: 12px; }
.panel-intro { margin-bottom: 12px; }
.filtros-en-tarjeta { padding: 16px 22px; }
.card-header + .filtros-en-tarjeta { padding-top: 0; }
.capitalizar { text-transform: capitalize; }
.fila-leyenda { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0 6px; }
.fila-leyenda .form-section-title { border-top: none; padding-top: 0; }
.buscar-participante-campo { flex: 1; min-width: 220px; }
.card-oscura { background: var(--degradado-grafito-diagonal); color: var(--sobre-grafito); }
.card-oscura .card-header, .card-oscura .kpi-label, .card-oscura .kpi-sub { color: var(--sobre-grafito-suave); }
.card-oscura .kpi-value, .card-oscura .monto-destacado { color: var(--oro-claro); }
.empty-state { text-align: center; color: var(--texto-atenuado); font-size: 14px; padding: 40px 24px; }
.empty-state a { color: var(--oro-texto); font-weight: 650; }

.charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.charts-grid > * { min-width: 0; }

/* Indicadores: el rótulo arriba, la cifra grande y la nota chica abajo, en el orden del marcado. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi-grid > * { min-width: 0; }
.kpi-card { display: flex; flex-direction: column; background: var(--fondo-panel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; }
.kpi-label { order: -1; font-size: 12.5px; font-weight: 550; color: var(--texto-atenuado); }
.kpi-value { font-family: var(--fuente-titulos); font-size: 25px; font-weight: 750; letter-spacing: -0.5px; line-height: 1.25; margin: 2px 0; overflow-wrap: anywhere; }
.kpi-sub { font-size: 12.5px; color: var(--texto-atenuado); }
.kpi-card.kpi-oscuro { background: var(--degradado-grafito-diagonal); color: var(--sobre-grafito); }
.kpi-oscuro .kpi-label, .kpi-oscuro .kpi-sub { color: var(--sobre-grafito-suave); }
.kpi-oscuro .kpi-value { color: var(--oro-claro); }
.card .kpi-card { background: var(--fondo); box-shadow: none; border-radius: var(--radio-chico); padding: 12px 14px; }
.card .kpi-card .kpi-value { font-size: 19px; }

/* Barras horizontales (reportes) y verticales (gastos por mes). */
.barras-h { display: flex; flex-direction: column; gap: 4px; padding: 0 22px 20px; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 160px) 1fr minmax(90px, auto); align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.barra-h-pista { height: 12px; border-radius: 6px; background: var(--fondo-2); overflow: hidden; }
.barra-h-relleno { display: block; height: 100%; border-radius: 6px; background: var(--serie-1); width: var(--valor, 0%); }
.barra-h b { text-align: right; }
.barras-v { display: flex; align-items: flex-end; gap: 12px; height: 170px; padding: 8px 22px 34px; }
.barra-v { flex: 1; position: relative; height: var(--valor, 0%); min-height: 4px; border-radius: 10px 10px 4px 4px; background: var(--barra); }
.barra-v:last-child { background: var(--serie-1); }
.barra-v span { font-style: normal; position: absolute; bottom: -24px; left: -6px; right: -6px; text-align: center; font-size: 11.5px; color: var(--texto-atenuado); white-space: nowrap; }
.progreso { height: 8px; border-radius: 4px; background: var(--fondo-2); overflow: hidden; margin: 10px 0 6px; }
.progreso-relleno { display: block; height: 100%; border-radius: 4px; background: var(--marca); width: var(--valor, 0%); }
.progreso-relleno.excedido { background: var(--peligro); }

/* ── Tablas ───────────────────────────────────────────────────────────────────────────────── */
.table-card { overflow-x: auto; padding: 6px 14px; }
.card > .data-table { margin: 0 8px 8px; width: calc(100% - 16px); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
    text-align: left; font-size: 12px; font-weight: 650; color: var(--texto-atenuado);
    padding: 11px 10px; border-bottom: 1.5px solid var(--linea); white-space: nowrap;
}
.data-table th.text-end { text-align: right; }
.data-table td { padding: 11px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(var(--marca-rgb), .05); }
.data-table .cg-totales td { font-weight: 750; border-top: 1.5px solid var(--borde); border-bottom: none; }
.data-table .cg-totales tr:hover td { background: transparent; }
.td-main { font-weight: 600; color: var(--texto); }
.td-main a { color: var(--oro-texto); }
.td-secondary { color: var(--texto-atenuado); }
.tabla-compacta td { padding: 7px 10px; }
.card > .tabla-compacta { margin-bottom: 14px; }
.empty-row { text-align: center; color: var(--texto-atenuado); padding: 32px !important; }
/* Fila atenuada (registro anulado o suspendido) y fila destacada (con novedad). */
.fila-atenuada td { opacity: .55; }
.fila-anulada td { opacity: .55; text-decoration: line-through; }
.fila-anulada td:last-child { text-decoration: none; }
.fila-destacada td { background: var(--oro-fondo); }

/* Filtro de cliente que site.js agrega sobre cada tabla con dos o más filas. */
.table-filter-wrap { display: flex; justify-content: flex-end; margin-bottom: -6px; position: relative; }
.table-filter-input {
    width: 280px; max-width: 100%; height: 40px; padding: 0 14px 0 38px;
    border: 1.5px solid var(--borde); border-radius: 999px; background: var(--fondo-panel); font-size: 14px;
}
.table-filter-input:focus { outline: none; border-color: var(--oro-texto); box-shadow: var(--foco); }
.table-filter-wrap::before {
    content: ""; position: absolute; right: 252px; top: 12px; width: 16px; height: 16px; pointer-events: none;
    background: var(--texto-atenuado);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.table-filter-empty td { text-align: center; color: var(--texto-atenuado); padding: 18px; }

/* ── Insignias ────────────────────────────────────────────────────────────────────────────── */
.cg-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--fondo-2); color: var(--texto-atenuado);
}
.cg-badge-muted { background: var(--fondo-2); color: var(--texto-atenuado); }
.cg-badge-ok { background: var(--exito-fondo); color: var(--exito); }
.cg-badge-warn { background: var(--advertencia-fondo); color: var(--advertencia); }
.cg-badge-danger { background: var(--peligro-fondo); color: var(--peligro); }
.cg-badge-info { background: var(--info-fondo); color: var(--info); }
.cg-badge-clara { background: var(--fondo-panel); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--borde); }
.cg-badge-marca { background: var(--marca); color: var(--sobre-marca); }

/* ── Avisos y validación ──────────────────────────────────────────────────────────────────── */
.alert-error, .alert-ok, .alert-warn, .alert-info {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
    border-radius: var(--radio-campo); font-size: 13.5px; line-height: 1.45;
}
.alert-error > .fa-solid, .alert-ok > .fa-solid, .alert-warn > .fa-solid, .alert-info > .fa-solid { margin-top: 2px; }
.alert-error { background: var(--peligro-fondo); color: var(--peligro); }
.alert-ok { background: var(--exito-fondo); color: var(--exito); }
.alert-warn { background: var(--advertencia-fondo); color: var(--advertencia); }
.alert-info { background: var(--info-fondo); color: var(--info); }
.alerta-accion { margin-left: auto; font-weight: 650; color: inherit; text-decoration: underline; white-space: nowrap; }
.validation-summary-valid { display: none !important; }
.validation-summary-errors { background: var(--peligro-fondo); color: var(--peligro); border-radius: var(--radio-campo); padding: 10px 14px; font-size: 13px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.alert-error .validation-summary-errors { background: none; padding: 0; color: inherit; font-size: inherit; }
.alert-error ul { margin: 0; padding-left: 16px; }

/* ── Pestañas ─────────────────────────────────────────────────────────────────────────────── */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; }
.pestanas a, .pestanas button { padding: 8px 16px; border-radius: 999px; border: none; background: transparent; font-weight: 600; font-size: 14px; color: var(--texto-atenuado); cursor: pointer; }
.pestanas a:hover, .pestanas button:hover { background: var(--fondo-2); color: var(--texto); }
.pestanas .activo, .pestanas .activo:hover { background: var(--grafito); color: var(--oro-claro); }
/* Subpestañas dentro de una pantalla (site.js: .tab-btn con data-tab y su .tab-panel). */
.tabs-header { display: flex; gap: 18px; flex-wrap: wrap; border-bottom: 1.5px solid var(--linea); margin-bottom: 14px; }
.tab-btn { padding: 0 2px 8px; border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--texto-atenuado); border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; }
.tab-btn:hover { color: var(--texto); }
.tab-btn.active { color: var(--texto); border-bottom-color: var(--marca); }

/* ── Panel flotante (data-panel-abrir / data-panel-cerrar) ────────────────────────────────── */
.panel-velo { position: fixed; inset: 0; background: var(--velo); z-index: 90; }
.panel-flotante {
    position: fixed; top: 16px; right: 16px; bottom: 16px; width: min(480px, calc(100vw - 32px)); z-index: 100;
    display: flex; flex-direction: column; background: var(--fondo-panel); border-radius: 26px; box-shadow: var(--sombra-alta);
    animation: panel-entra .18s ease-out;
}
.panel-flotante.ancho { width: min(760px, calc(100vw - 32px)); }
.panel-flotante-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 8px; }
.panel-flotante-cabeza h2, .panel-flotante-cabeza h3 { font-size: 21px; line-height: 1.25; }
.panel-cerrar {
    flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    display: grid; place-items: center; background: var(--fondo); color: var(--texto); font-size: 15px;
}
.panel-cerrar:hover { background: var(--fondo-2); }
.panel-flotante-cuerpo { flex: 1; overflow-y: auto; padding: 8px 24px 16px; }
.panel-flotante-pie { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px 20px; border-top: 1px solid var(--linea); }
.panel-flotante .form-card { padding: 0; max-width: none; box-shadow: none; }
.panel-flotante:not(.ancho) .form-grid { grid-template-columns: minmax(0, 1fr); }
.panel-flotante:not(.ancho) .form-span-2 { grid-column: span 1; }
.panel-flotante-cuerpo .lista-resultados { padding: 0; }
.panel-flotante > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.panel-secciones { display: flex; flex-direction: column; gap: 22px; }
.panel-secciones .form-section-title { border-top: none; padding-top: 0; margin-bottom: 8px; }
.panel-flotante iframe { width: 100%; height: 100%; border: 0; }
.panel-iframe .panel-flotante-cuerpo { padding: 0; overflow: hidden; }
/* La pagina de alta dentro del panel: sin menu, sin titulo y sin la tarjeta (el panel ya es la tarjeta). */
.cuerpo-flotante { background: var(--fondo-panel); }
.contenido-flotante { padding: 4px 24px 24px; max-width: none; }
.cuerpo-flotante .form-card { box-shadow: none; padding: 0; max-width: none; border-radius: 0; }
.cuerpo-flotante .form-card > .card-header { display: none; }
body.con-panel { overflow: hidden; }
@keyframes panel-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Buscador unificado: caja, lista de resultados y sus estados ──────────────────────────── */
.buscador-caja { display: flex; gap: 8px; align-items: stretch; }
.buscador-caja .form-input { flex: 1; }
.lista-resultados { display: flex; flex-direction: column; gap: 4px; padding: 4px 14px 14px; }
.resultado-item { display: block; padding: 10px 12px; border-radius: var(--radio-campo); }
.resultado-item:hover, .resultado-item:focus-visible { background: var(--oro-fondo); }
.resultado-identidad { font-weight: 650; }
.resultado-codigo { color: var(--texto-atenuado); font-weight: 400; }
.resultado-senas { font-size: 12px; color: var(--texto-atenuado); }
.estado-busqueda { padding: 8px 12px; color: var(--texto-atenuado); }
.estado-busqueda-error { color: var(--peligro); }

/* ── Zona de arrastre ─────────────────────────────────────────────────────────────────────── */
.dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: pointer;
    padding: 22px 16px; border: 2px dashed var(--borde); border-radius: var(--radio-chico); background: var(--fondo);
    transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--texto-atenuado); }
.dropzone.is-dragging { border-color: var(--marca); background: rgba(var(--marca-rgb), .08); }
.dropzone-texto { font-weight: 650; }
.dropzone-ayuda { font-size: 12px; color: var(--texto-atenuado); }
.previews { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.preview { position: relative; width: 120px; border-radius: var(--radio-campo); overflow: hidden; background: var(--fondo); display: flex; flex-direction: column; }
.preview img { width: 100%; height: 84px; object-fit: cover; }
.preview .tipo { height: 84px; display: grid; place-items: center; font-weight: 700; color: var(--texto-atenuado); background: var(--fondo-2); }
.preview .nombre { font-size: 11px; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview .quitar {
    position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
    display: grid; place-items: center; background: rgba(var(--grafito-rgb), .7); color: var(--sobre-grafito); font-size: 13px; line-height: 1;
}

/* ── SweetAlert2: botones del sistema y foco del tema ─────────────────────────────────────── */
.swal2-popup { border-radius: var(--radio) !important; font-family: var(--fuente) !important; color: var(--texto) !important; }
.swal2-title { font-family: var(--fuente-titulos) !important; color: var(--texto) !important; }
.swal2-html-container { color: var(--texto-atenuado) !important; }
.swal2-actions { gap: 10px; }
.swal2-actions .btn:focus-visible { box-shadow: var(--foco); }
.swal2-popup.swal2-toast { border-radius: var(--radio-chico) !important; box-shadow: var(--sombra-alta) !important; }
.swal2-timer-progress-bar { background: rgba(var(--marca-rgb), .55) !important; }
/* Los iconos de la libreria traen su propia paleta: se llevan a los semanticos del tema. */
.swal2-icon.swal2-warning { border-color: var(--marca) !important; color: var(--oro-texto) !important; }
.swal2-icon.swal2-info { border-color: var(--info) !important; color: var(--info) !important; }
.swal2-icon.swal2-question { border-color: var(--texto-atenuado) !important; color: var(--texto-atenuado) !important; }
.swal2-icon.swal2-error { border-color: var(--peligro) !important; color: var(--peligro) !important; }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--peligro) !important; }
.swal2-icon.swal2-success { border-color: var(--exito) !important; color: var(--exito) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(var(--blanco-rgb), 0) !important; box-shadow: inset 0 0 0 4px var(--exito-fondo); }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--exito) !important; }

/* ── Área de la cuenta y Super: barra grafito con el menú ─────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.barra-sup {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 18px; padding: 12px 28px;
    background: var(--grafito-oscuro); color: var(--sobre-grafito);
}
.marca { display: flex; align-items: center; gap: 11px; flex: none; }
.marca img { width: 38px; height: 38px; border-radius: 11px; }
.marca b { display: block; font-size: 15px; line-height: 1.2; }
.marca small { display: block; font-size: 12px; color: var(--sobre-grafito-suave); }
.insignia-super { padding: 4px 10px; border-radius: 999px; background: var(--oro-claro); color: var(--sobre-marca); font-weight: 750; font-size: 12px; margin-left: -6px; }
.nav-sup { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-sup > a, .menu-boton {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
    border: none; background: transparent; cursor: pointer; font-size: 14px; color: var(--sobre-grafito-menu); white-space: nowrap;
}
.nav-sup > a:hover, .menu-boton:hover, .menu-boton[aria-expanded="true"] { background: rgba(var(--blanco-rgb), .10); color: var(--sobre-grafito); }
.nav-sup > a.activo, .menu.activo > .menu-boton { background: var(--marca); color: var(--sobre-marca); font-weight: 650; }
.menu-boton .fa-chevron-down { font-size: 10px; transition: transform .15s; }
.menu-boton[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.menu { position: relative; }
.desplegable {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; z-index: 60;
    display: flex; flex-direction: column; padding: 8px; border-radius: var(--radio-chico);
    background: var(--fondo-panel); box-shadow: 0 18px 40px rgba(var(--grafito-rgb), .25);
}
.menu-derecha .desplegable { left: auto; right: 0; }
.desplegable a, .desplegable button {
    white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: none; background: none;
    color: var(--texto); font-size: 14px; text-align: left; cursor: pointer; width: 100%;
}
.desplegable a .fa-solid, .desplegable button .fa-solid { width: 16px; text-align: center; color: var(--texto-atenuado); }
.desplegable a:hover, .desplegable button:hover { background: var(--fondo); }
.desplegable a.activo { background: var(--oro-fondo); color: var(--oro-texto); font-weight: 650; }
.desplegable a.activo .fa-solid { color: var(--oro-texto); }
.desplegable-grupo { padding: 8px 12px 4px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-atenuado); }
.desplegable-separador { height: 1px; background: var(--linea); margin: 6px 4px; }
.desplegable form { margin: 0; }
.usuario-boton { height: auto; padding: 4px 10px 4px 4px; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px; background: var(--marca); color: var(--sobre-marca); }
.usuario-datos { text-align: left; line-height: 1.2; }
.usuario-datos b { display: block; font-size: 13.5px; color: var(--sobre-grafito); }
.usuario-datos small { display: block; font-size: 12px; color: var(--sobre-grafito-suave); }
.menu-movil { display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; background: rgba(var(--blanco-rgb), .10); color: var(--sobre-grafito); font-size: 17px; }

.contenido { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 26px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
.contenido > * { min-width: 0; }
/* Los envoltorios sin estilo propio (p. ej. la zona exenta del modo lectura) reparten igual que el contenido. */
.contenido > div[data-permitir-lectura]:not(.card) { display: flex; flex-direction: column; gap: 16px; }
.cab-vista { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.cab-vista h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.4px; }
.miga { font-size: 13px; color: var(--texto-atenuado); }
.miga a:hover { color: var(--oro-texto); }
.cab-subtitulo { color: var(--texto-atenuado); margin-top: 2px; }
.cab-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Inicio: cabecera grafito a todo el ancho con los indicadores montados ────────────────── */
.inicio-hero { background: var(--degradado-grafito); color: var(--sobre-grafito); }
.inicio-hero-interior {
    max-width: 1440px; margin: 0 auto; padding: 26px 48px 76px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px) auto; gap: 40px; align-items: center;
}
.inicio-hero .miga, .inicio-hero .hero-etiqueta, .inicio-hero .hero-nota { color: var(--sobre-grafito-suave); }
.inicio-hero h1 { font-size: 26px; margin: 2px 0 12px; }
.hero-etiqueta { font-size: 12.5px; font-weight: 550; }
.hero-cifra { font-family: var(--fuente-titulos); font-size: 50px; line-height: 1.05; font-weight: 800; letter-spacing: -1.5px; color: var(--oro-claro); margin: 2px 0 4px; overflow-wrap: anywhere; }
.hero-nota { font-size: 12.5px; }
.inicio-hero .barras-v { height: 140px; padding: 8px 0 24px; }
.inicio-hero .barra-v { background: rgba(var(--blanco-rgb), .14); }
.inicio-hero .barra-v:last-child { background: var(--serie-1); }
.inicio-hero .barra-v span { color: var(--sobre-grafito-suave); }
.hero-acciones { display: flex; flex-direction: column; gap: 10px; }
.montado { margin-top: -72px; position: relative; z-index: 1; }
.montado .kpi-card { box-shadow: 0 12px 30px rgba(var(--sombra-rgb), .12); }
.kpi-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla-propiedades { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.tarjeta-propiedad { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.tarjeta-propiedad-cabeza { display: flex; align-items: center; gap: 12px; }
.tarjeta-propiedad-cabeza > div { flex: 1; min-width: 0; }
.tarjeta-propiedad-nombre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.tarjeta-propiedad-nombre:hover { color: var(--oro-texto); }
.icono-redondo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--oro-fondo); color: var(--oro-texto); }
.porcentaje { font-weight: 700; color: var(--oro-texto); }
.tarjeta-propiedad-enlaces { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 8px; font-size: 13px; }
.tarjeta-propiedad-enlaces a { color: var(--oro-texto); font-weight: 600; }
.tarjeta-propiedad-enlaces a:hover { text-decoration: underline; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ── Encabezado de la propiedad y sus pestañas ────────────────────────────────────────────── */
.prop-encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.prop-encabezado h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.4px; margin: 2px 0 4px; }
.prop-datos { color: var(--texto-atenuado); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop-indicadores { display: flex; gap: 10px; flex-wrap: wrap; }
.prop-indicadores > div { background: var(--fondo-panel); border-radius: var(--radio-chico); padding: 10px 16px; box-shadow: var(--sombra); min-width: 130px; }
.prop-indicadores span { display: block; font-size: 12.5px; color: var(--texto-atenuado); }
.prop-indicadores b { font-size: 17px; }
.prop-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Ingreso y pantallas de cuenta: marca en grafito, formulario en crema ─────────────────── */
.ingreso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.ing-marca {
    display: flex; flex-direction: column; gap: 18px; padding: 64px 72px;
    color: var(--sobre-grafito);
    background: radial-gradient(80% 50% at 60% 40%, rgba(var(--marca-rgb), .18), transparent 70%), var(--degradado-grafito-diagonal);
}
.ing-marca img { width: 72px; height: 72px; border-radius: 20px; }
.ing-marca h2 { font-size: 38px; letter-spacing: -1px; line-height: 1.1; }
.ing-marca > p { font-size: 18px; color: var(--sobre-grafito-menu); max-width: 460px; line-height: 1.5; }
.ing-rasgos { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.ing-rasgo { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--radio-chico); background: rgba(var(--blanco-rgb), .06); border: 1px solid rgba(var(--blanco-rgb), .12); }
.ing-rasgo .fa-solid { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--marca-rgb), .16); color: var(--oro-claro); flex: none; }
.ing-rasgo b { display: block; }
.ing-rasgo small { color: var(--sobre-grafito-suave); font-size: 13px; }
.ing-marca .ing-pie { margin-top: auto; color: var(--sobre-grafito-tenue); font-size: 14px; }
.ing-form { display: grid; place-items: center; padding: 32px 20px; background: var(--fondo); }
.login-container { width: 100%; max-width: 460px; }
.login-card { background: var(--fondo-panel); border-radius: 30px; box-shadow: var(--sombra); padding: 36px 36px 30px; }
.login-logo { display: none; }
.login-title { font-family: var(--fuente-titulos); font-size: 32px; font-weight: 800; letter-spacing: -0.6px; margin-bottom: 4px; }
.login-subtitle { color: var(--texto-atenuado); margin-bottom: 20px; }
.login-card .form-input { min-height: 48px; font-size: 16px; }
.btn-login { width: 100%; margin-top: 4px; }
.login-enlaces { text-align: center; margin-top: 16px; font-size: 14px; color: var(--texto-atenuado); display: flex; flex-direction: column; gap: 8px; }
.login-enlaces a { color: var(--oro-texto); font-weight: 650; }
.login-card .alert-error, .login-card .alert-ok, .login-card .alert-warn { margin-bottom: 16px; }

/* ── Portal público ───────────────────────────────────────────────────────────────────────── */
.landing-body { background: var(--fondo); }
.landing-nav { background: var(--grafito-oscuro); color: var(--sobre-grafito); }
.portada .landing-nav { background: transparent; }
.landing-nav-inner { max-width: 1240px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.landing-logo { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 16px; }
.landing-logo img { width: 38px; height: 38px; border-radius: 11px; }
.landing-nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.landing-nav-link { padding: 8px 14px; border-radius: 999px; color: var(--sobre-grafito-menu); font-weight: 550; }
.landing-nav-link:hover { background: rgba(var(--blanco-rgb), .10); color: var(--sobre-grafito); }
.portada { background: var(--degradado-grafito); color: var(--sobre-grafito); }
.por-hero { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px 32px 72px; }
.por-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(var(--marca-rgb), .16); color: var(--oro-claro); font-weight: 650; font-size: 13.5px; margin-bottom: 18px; }
.por-titulo { font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -2px; margin-bottom: 18px; }
.por-titulo em { font-style: normal; color: var(--oro-claro); }
.por-sub { font-size: 19px; line-height: 1.5; color: var(--sobre-grafito-menu); margin-bottom: 28px; max-width: 560px; }
.por-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.por-nota { font-size: 13px; color: var(--sobre-grafito-suave); }
.por-visual { position: relative; min-height: 420px; }
.pv-total { position: absolute; left: 30px; top: 0; right: 30px; padding: 26px 30px; border-radius: 32px; background: rgba(var(--blanco-rgb), .06); border: 1px solid rgba(var(--blanco-rgb), .12); }
.pv-total .hero-etiqueta { color: var(--sobre-grafito-suave); }
.pv-total .barras-v { height: 150px; padding: 12px 0 24px; }
.pv-total .barra-v { background: rgba(var(--blanco-rgb), .14); }
.pv-total .barra-v:last-child { background: var(--serie-1); }
.pv-total .barra-v span { color: var(--sobre-grafito-suave); }
.pv-tarjeta { position: absolute; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radio); background: var(--fondo-panel); color: var(--texto); box-shadow: var(--sombra-alta); }
.pv-tarjeta > div { flex: 1; min-width: 0; }
.pv-tarjeta small { color: var(--texto-atenuado); font-size: 12.5px; }
.pv-prop { left: 0; top: 300px; width: 300px; }
.pv-gasto { right: 0; top: 372px; width: 290px; }
.pv-mas { position: absolute; right: 12px; top: 236px; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: var(--sobre-marca); font-size: 26px; box-shadow: 0 16px 30px rgba(var(--marca-rgb), .45); }
.features { padding: 64px 32px; }
.features-inner { max-width: 1240px; margin: 0 auto; }
.features-header { text-align: center; margin-bottom: 32px; }
.features-title { font-size: 34px; letter-spacing: -0.8px; margin-bottom: 8px; }
.features-sub { color: var(--texto-atenuado); font-size: 17px; }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat-card { background: var(--fondo-panel); border-radius: 22px; padding: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.feat-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--oro-fondo); color: var(--oro-texto); font-size: 17px; }
.feat-title { font-weight: 700; font-size: 16px; }
.feat-desc { color: var(--texto-atenuado); font-size: 14px; line-height: 1.5; }
.cta-section { padding: 0 32px 64px; }
.cta-inner { max-width: 1240px; margin: 0 auto; padding: 44px 32px; border-radius: 32px; text-align: center; background: var(--degradado-grafito-diagonal); color: var(--sobre-grafito); }
.cta-title { font-size: 30px; letter-spacing: -0.6px; margin-bottom: 8px; }
.cta-sub { color: var(--sobre-grafito-menu); margin: 0 auto 22px; max-width: 620px; font-size: 16px; }
.pagina-publica { max-width: 1080px; margin: 0 auto; padding: 44px 32px 64px; }
.pagina-publica h1 { font-size: 36px; letter-spacing: -0.8px; margin-bottom: 8px; }
.pagina-publica .lead { color: var(--texto-atenuado); font-size: 17px; margin-bottom: 26px; }
/* Paginas legales (/privacidad, /terminos, /eliminar-cuenta): texto largo, legible, sin menu del portal. */
.documento-legal { max-width: 760px; margin: 0 auto; padding: 44px 32px 64px; line-height: 1.65; }
.documento-legal h1 { font-size: 34px; letter-spacing: -0.8px; margin-bottom: 6px; }
.documento-legal h2 { font-size: 19px; margin: 30px 0 8px; }
.documento-legal p, .documento-legal li { color: var(--texto); font-size: 15.5px; }
.documento-legal p { margin: 0 0 12px; }
.documento-legal ul, .documento-legal ol { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.documento-legal a:not(.btn) { color: var(--oro-texto); font-weight: 600; text-decoration: underline; }
.documento-legal-meta { color: var(--texto-atenuado); font-size: 14px; }
.documento-legal-resumen { margin: 20px 0 8px; padding: 14px 18px; border-left: 4px solid var(--marca); border-radius: var(--radio-chico); background: var(--oro-fondo); }
.documento-legal-resumen p:last-child { margin-bottom: 0; }
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.plan-card.destacado { box-shadow: 0 0 0 2px var(--marca), var(--sombra); }
.plan-precio { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.plan-lista { list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--texto-atenuado); font-size: 14px; }
.plan-accion { margin-top: auto; }
.pagina-nota { text-align: center; margin-top: 26px; font-size: 14px; }
.pagina-bloque { margin-top: 32px; }
.plan-lista li::before { content: "✓"; color: var(--exito); font-weight: 700; margin-right: 8px; }
.demo-access-card { background: var(--degradado-grafito-diagonal); color: var(--sobre-grafito); border-radius: var(--radio); padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.demo-eyebrow { color: var(--oro-claro); font-weight: 650; font-size: 13px; }
.demo-title { font-size: 20px; font-weight: 750; margin: 2px 0 4px; }
.demo-copy { color: var(--sobre-grafito-menu); max-width: 620px; }
.landing-footer { background: var(--grafito-oscuro); color: var(--sobre-grafito-suave); }
.landing-footer-inner { max-width: 1240px; margin: 0 auto; padding: 26px 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.landing-footer .landing-logo { color: var(--sobre-grafito); font-size: 14px; }
.landing-footer .landing-logo img { width: 28px; height: 28px; border-radius: 8px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-link:hover { color: var(--sobre-grafito); }

/* ── Piezas propias de pantallas ──────────────────────────────────────────────────────────── */
.prestamos-sub { list-style: none; margin: 4px 0 0; font-size: 12.5px; color: var(--texto-atenuado); }
.prestamos-sub li { padding: 2px 0; }
.prestamos-sub li::before { content: "·"; margin-right: 6px; }
.prestamos-sub strong { font-weight: 600; color: var(--texto); }
.filas-dinamicas .form-input { width: 100%; }
.fila-persona-nombre { font-weight: 600; }
.fila-persona-usuario { font-size: 12px; color: var(--texto-atenuado); }
.propuesta-aviso { font-size: 12.5px; color: var(--texto-atenuado); margin-top: 6px; }
.buscar-participante { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.buscar-participante .form-group { margin: 0; }
.resultado-participante { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: var(--radio-campo); background: var(--fondo); }
.resultado-participante.error { background: var(--peligro-fondo); color: var(--peligro); }
.banner-suscripcion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.estado-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--texto-atenuado); }
.estado-punto.ok { background: var(--exito); }
.estado-punto.aviso { background: var(--marca); }
.estado-punto.caido { background: var(--peligro); }

.bloque-separado { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linea); }
.total-pie { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 10px 10px; border-top: 1px solid var(--linea); }
.fila-peligro td { background: var(--peligro-fondo); }
.texto-cortable { word-break: break-all; }
.titulo-seccion { font-size: 19px; margin: 8px 0 0; }
.btn-ancho { width: 100%; }
.tarjeta-resultado { padding: 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tarjeta-resultado-icono { font-size: 44px; }
.tarjeta-resultado-icono.exito { color: var(--exito); }
.tarjeta-resultado-icono.advertencia { color: var(--advertencia); }
.plan-actual { padding: 20px 22px; }
.plan-actual-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plan-actual-nombre { font-family: var(--fuente-titulos); font-size: 22px; font-weight: 750; }
.plan-actual-vence { margin-left: auto; text-align: right; }
.plan-actual-datos { display: flex; gap: 26px; margin-top: 14px; flex-wrap: wrap; }
.plan-card-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adjuntos { display: flex; flex-wrap: wrap; gap: 12px; }
.adjunto { width: 150px; border-radius: var(--radio-campo); overflow: hidden; background: var(--fondo); }
.adjunto img { display: block; width: 100%; height: 100px; object-fit: cover; background: var(--fondo-2); }
.adjunto-tipo { height: 100px; display: grid; place-items: center; background: var(--fondo-2); color: var(--texto-atenuado); font-weight: 700; }
.adjunto-enlaces { display: flex; gap: 10px; padding: 7px 10px; font-size: 12px; }
.adjunto-enlaces a { color: var(--oro-texto); font-weight: 650; }

.conversacion { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mensaje { display: flex; justify-content: flex-end; }
.mensaje.de-plataforma { justify-content: flex-start; }
.mensaje-burbuja { max-width: 78%; padding: 10px 14px; border-radius: var(--radio-chico); font-size: 13.5px; background: var(--oro-fondo); }
.de-plataforma .mensaje-burbuja { background: var(--fondo-2); }
.mensaje-cabeza { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12.5px; }
.mensaje-eliminar { margin-left: auto; }
.mensaje-cuerpo { white-space: pre-wrap; }
.mensaje-adjuntos { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.mensaje-adjuntos a { color: var(--oro-texto); font-weight: 600; }
.mensaje-envio { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.mensaje-envio .form-input { flex: 1; min-width: 220px; }

/* ── Página de catálogo del sistema de diseño (Areas/Admin/Views/Estilo) ──────────────────── */
.catalogo-muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 22px 20px; }
.muestra { border-radius: var(--radio-campo); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); font-size: 12px; }
.muestra-color { height: 54px; background: var(--muestra); }
.muestra-nombre { padding: 6px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.catalogo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 22px 16px; }
.catalogo-fila .etiqueta { width: 200px; flex: none; color: var(--texto-atenuado); font-size: 12.5px; }
.tabla-catalogo { width: auto; flex: 1; }
.demo-foco { box-shadow: var(--foco) !important; }

/* ── Pantallas medianas y chicas ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .inicio-hero-interior { grid-template-columns: minmax(0, 1fr) auto; }
    .inicio-hero-interior .barras-v { display: none; }
}
@media (max-width: 1080px) {
    .barra-sup { flex-wrap: wrap; padding: 12px 18px; }
    .menu-movil { display: inline-grid; place-items: center; }
    .nav-sup { display: none; order: 3; flex: 1 0 100%; flex-direction: column; align-items: stretch; padding-top: 8px; }
    .barra-sup.abierta .nav-sup { display: flex; }
    .nav-sup > a, .menu-boton { width: 100%; justify-content: space-between; }
    .desplegable { position: static; box-shadow: none; margin: 4px 0 8px; }
    .menu-usuario { order: 2; }
    .usuario-datos { display: none; }
    .kpi-grid, .kpi-grid.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dos-columnas, .charts-grid { grid-template-columns: minmax(0, 1fr); }
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .por-hero { grid-template-columns: minmax(0, 1fr); }
    .por-visual { display: none; }
    .ingreso { grid-template-columns: minmax(0, 1fr); }
    .ing-marca { padding: 32px 24px; gap: 10px; }
    .ing-rasgos, .ing-pie { display: none; }
}
@media (max-width: 760px) {
    body { font-size: 15px; }
    .contenido { padding: 18px 16px 32px; }
    .inicio-hero-interior { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 70px; gap: 18px; }
    .hero-cifra { font-size: 40px; }
    .hero-acciones { flex-direction: row; flex-wrap: wrap; }
    .kpi-grid, .kpi-grid.tres { grid-template-columns: minmax(0, 1fr); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-span-2 { grid-column: span 1; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
    .cab-vista h1, .prop-encabezado h1 { font-size: 24px; }
    .table-filter-input { width: 100%; }
    .table-filter-wrap::before { right: auto; left: 14px; }
    .features-grid { grid-template-columns: minmax(0, 1fr); }
    .por-titulo { font-size: 38px; letter-spacing: -1px; }
    .landing-nav-inner, .por-hero, .features, .cta-section, .pagina-publica, .documento-legal { padding-left: 16px; padding-right: 16px; }
    .panel-flotante { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); }
    .login-card { padding: 26px 20px; }
}