/* ============================================
   VeneCambios — Hoja de estilos principal
   Estilo corporativo fintech (tema claro)
   ============================================ */
:root {
    /* Paleta corporativa */
    --fondo: #f7f9fc;
    --panel: #ffffff;
    --panel-2: #f2f5fa;
    --panel-3: #e9eef7;
    --borde: #e3e9f2;
    --borde-hover: #b9c9e4;
    --navy: #0a2540;
    --navy-2: #10375c;
    --acento: #1f5eff;
    --acento-osc: #1848c4;
    --oro: #b7791f;
    --verde: #0e9f6e;
    --rojo: #dc2626;
    --naranja: #d97706;
    --texto: #16283e;
    --texto-suave: #5c6f88;
    --blanco: #ffffff;
    --radio: 14px;
    --sombra: 0 12px 40px rgba(10, 37, 64, .10);
    --sombra-suave: 0 2px 12px rgba(10, 37, 64, .06);
    --trans: all .22s cubic-bezier(.4, 0, .2, 1);
    --grad: linear-gradient(135deg, var(--acento), #4f46e5);

    /* Alias de compatibilidad */
    --dorado: #b7791f;
    --cian: #1f5eff;
    --azul-900: #f2f5fa;
    --azul-800: #e9eef7;
    --azul-700: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

.container { width: min(1140px, 92%); margin: 0 auto; }

a { color: var(--acento); text-decoration: none; transition: var(--trans); }
a:hover { color: var(--acento-osc); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.22; letter-spacing: -.02em; color: var(--navy); }

/* ---------- Iconos SVG ---------- */
.ic { width: 20px; height: 20px; vertical-align: -4px; flex-shrink: 0; }
.ic-sm { width: 16px; height: 16px; vertical-align: -3px; }
.ic-lg { width: 26px; height: 26px; }
.bandera {
    width: 21px; height: auto; vertical-align: -3px; flex-shrink: 0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(10, 37, 64, .25), inset 0 0 0 .5px rgba(10, 37, 64, .08);
}
.bandera-lg { width: 28px; }

/* Placa de icono corporativa */
.icono {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: #eef4ff;
    border: 1px solid #dbe7ff;
    color: var(--acento);
    margin-bottom: 1.2rem;
}
.icono .ic { width: 24px; height: 24px; }
.icono.i-oro     { background: #fdf3e3; border-color: #f5e3c2; color: var(--oro); }
.icono.i-verde   { background: #e7f7f0; border-color: #c6ebdc; color: var(--verde); }
.icono.i-violeta { background: #f0eeff; border-color: #ddd8fb; color: #6d5ae8; }

/* ---------- Navbar ---------- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; }
.logo {
    font-size: 1.35rem; font-weight: 800; color: var(--navy);
    display: flex; align-items: center; gap: .55rem; letter-spacing: -.02em;
}
.logo span:not(.logo-icon) { color: var(--acento); }
.logo:hover { color: var(--navy); }
.logo-icon {
    background: var(--grad);
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(31, 94, 255, .3);
}
.logo-icon .ic { width: 19px; height: 19px; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a {
    color: var(--texto-suave); font-weight: 500; font-size: .92rem;
    display: inline-flex; align-items: center; gap: .35rem;
}
.nav-links a:hover { color: var(--navy); }
.nav-muted { opacity: .75; }
.nav-toggle { display: none; background: none; border: none; color: var(--navy); font-size: 1.6rem; cursor: pointer; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.7rem; border-radius: 10px;
    font-family: inherit; font-weight: 600; font-size: .95rem;
    border: none; cursor: pointer; transition: var(--trans);
}
.btn-primary {
    background: var(--acento);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(31, 94, 255, .28);
}
.btn-primary:hover {
    background: var(--acento-osc);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(31, 94, 255, .35);
}
.btn-outline {
    background: var(--panel);
    color: var(--navy); border: 1px solid var(--borde);
}
.btn-outline:hover { border-color: var(--acento); color: var(--acento); background: #f5f8ff; }
.btn-sm { padding: .5rem 1.1rem; font-size: .87rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--rojo); color: #fff; }

/* ---------- Hero ---------- */
.hero {
    padding: 5rem 0 4.5rem;
    background:
        radial-gradient(ellipse 60% 55% at 15% -10%, rgba(31, 94, 255, .07), transparent),
        radial-gradient(ellipse 45% 45% at 90% 0%, rgba(79, 70, 229, .06), transparent),
        linear-gradient(180deg, #ffffff, var(--fondo));
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.3rem); font-weight: 800; margin-bottom: 1.3rem; }
.hero h1 .grad { color: var(--acento); }
.hero p.lead { color: var(--texto-suave); font-size: 1.12rem; margin-bottom: 2rem; max-width: 32rem; }
.hero-badges { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    padding: .48rem 1rem; border-radius: 100px;
    font-size: .85rem; color: var(--texto-suave); font-weight: 500;
    box-shadow: var(--sombra-suave);
}
.hero-badge .ic { width: 15px; height: 15px; color: var(--acento); }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.flags-ruta { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- Calculadora ---------- */
.calc-card {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 18px; padding: 2rem;
    box-shadow: var(--sombra);
}
.calc-card h3 { margin-bottom: 1.4rem; font-size: 1.15rem; display: flex; align-items: center; gap: .55rem; }
.calc-card h3 .ic { color: var(--acento); }
.calc-tabs { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.calc-tab {
    flex: 1; padding: .7rem; border-radius: 10px; text-align: center; cursor: pointer;
    background: var(--panel-2); border: 1px solid transparent;
    font-weight: 600; font-size: .92rem; color: var(--texto-suave);
    transition: var(--trans); user-select: none;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.calc-tab:hover { background: var(--panel-3); }
.calc-tab.active {
    border-color: var(--acento);
    background: #eef4ff;
    color: var(--navy);
}
.campo { margin-bottom: 1.15rem; }
.campo label {
    display: block; font-size: .83rem; color: var(--texto-suave);
    margin-bottom: .4rem; font-weight: 600;
}
.campo input, .campo select {
    width: 100%; padding: .85rem 1rem; border-radius: 10px;
    background: var(--panel);
    border: 1px solid #cfd9e8;
    color: var(--texto); font-family: inherit; font-size: .98rem; transition: var(--trans);
}
.campo input:focus, .campo select:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(31, 94, 255, .13);
}
.campo .hint { font-size: .78rem; color: var(--texto-suave); margin-top: .35rem; }
.calc-result {
    background: #f0f6ff;
    border: 1px solid #d5e4ff;
    border-radius: 12px; padding: 1.1rem 1.3rem; margin: 1.2rem 0;
}
.calc-result .monto {
    font-size: 1.95rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--navy);
}
.calc-result .detalle { font-size: .82rem; color: var(--texto-suave); margin-top: .3rem; }
.tasa-info { display: flex; justify-content: space-between; font-size: .83rem; color: var(--texto-suave); margin-top: .9rem; }
.tasa-info strong { color: var(--navy); }

/* ---------- Secciones ---------- */
.seccion { padding: 4.8rem 0; }
.seccion-alt { background: var(--panel); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion-titulo { text-align: center; margin-bottom: 3rem; }
.seccion-titulo h2 { font-size: 2rem; margin-bottom: .6rem; }
.seccion-titulo p { color: var(--texto-suave); max-width: 40rem; margin: 0 auto; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.8rem;
    transition: var(--trans);
    box-shadow: var(--sombra-suave);
}
.tarjeta:hover {
    transform: translateY(-3px);
    border-color: var(--borde-hover);
    box-shadow: 0 14px 36px rgba(10, 37, 64, .12);
}
.tarjeta h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.tarjeta p { color: var(--texto-suave); font-size: .93rem; }
.tarjeta p strong { color: var(--texto); font-weight: 600; }
.paso-num {
    width: 38px; height: 38px; border-radius: 11px; font-weight: 700; font-size: 1rem;
    background: var(--navy); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}

/* ---------- Barra de confianza ---------- */
.trust-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    background: var(--navy);
    border-radius: 18px; padding: 2rem 2.2rem; margin-top: 4rem;
    box-shadow: var(--sombra);
}
.trust-item { text-align: center; }
.trust-item .num { font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.trust-item .lbl { font-size: .85rem; color: #93a8c4; }

/* ---------- Testimonios ---------- */
.testimonio .texto { font-style: italic; color: var(--texto); margin: .8rem 0 1.3rem; }
.testimonio .autor { display: flex; align-items: center; gap: .85rem; }
.testimonio .avatar {
    width: 44px; height: 44px; border-radius: 12px; font-weight: 700; font-size: 1rem;
    background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.testimonio .autor .nombre { font-weight: 700; font-size: .95rem; color: var(--navy); }
.testimonio .autor .ruta { font-size: .82rem; color: var(--texto-suave); display: flex; align-items: center; gap: .35rem; }
.estrellas { display: inline-flex; gap: .2rem; color: #f59e0b; }
.estrellas .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }

/* ---------- Formularios / Auth ---------- */
.auth-wrap { display: flex; justify-content: center; padding: 4rem 0; }
.auth-card {
    width: min(440px, 100%);
    background: var(--panel);
    border: 1px solid var(--borde); border-radius: 16px;
    padding: 2.4rem; box-shadow: var(--sombra);
}
.auth-card h1 { font-size: 1.55rem; margin-bottom: .4rem; }
.auth-card .sub { color: var(--texto-suave); margin-bottom: 1.6rem; font-size: .94rem; }
.auth-card .alt { text-align: center; margin-top: 1.4rem; font-size: .9rem; color: var(--texto-suave); }

.alerta {
    padding: .9rem 1.2rem; border-radius: 10px; margin-bottom: 1.2rem; font-size: .92rem;
    display: flex; align-items: flex-start; gap: .5rem;
}
.alerta-error { background: #fdf0f0; border: 1px solid #f5c6c6; color: #b91c1c; }
.alerta-ok { background: #ecfaf4; border: 1px solid #bfe8d6; color: #047857; }

/* ---------- Panel / Tablas ---------- */
.panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 2.6rem 0 1.8rem; }
.panel-head h1 { font-size: 1.6rem; display: flex; align-items: center; gap: .6rem; }
.panel-head h1 .ic { color: var(--acento); width: 24px; height: 24px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 2rem; }
.stat-card {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.3rem 1.5rem;
    box-shadow: var(--sombra-suave);
    display: flex; align-items: center; gap: 1rem;
}
.stat-card .icono { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0; }
.stat-card .icono .ic { width: 20px; height: 20px; }
.stat-card .valor { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.stat-card .etiqueta { font-size: .82rem; color: var(--texto-suave); }

.tabla-wrap {
    overflow-x: auto;
    background: var(--panel);
    border-radius: var(--radio); border: 1px solid var(--borde);
    box-shadow: var(--sombra-suave);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .95rem 1.1rem; text-align: left; }
th {
    background: var(--panel-2); color: var(--texto-suave);
    font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--borde);
}
tr { border-bottom: 1px solid #eef2f8; }
tr:last-child { border-bottom: none; }
tbody tr:hover { background: #f7faff; }

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .8rem; border-radius: 100px;
    font-size: .75rem; font-weight: 600;
}
.badge-warning { background: #fdf4e3; color: #b45309; border: 1px solid #f3ddb5; }
.badge-info { background: #edf3ff; color: var(--acento-osc); border: 1px solid #d3e1ff; }
.badge-success { background: #e9f9f2; color: #047857; border: 1px solid #bfe8d6; }
.badge-danger { background: #fdeeee; color: #b91c1c; border: 1px solid #f5c6c6; }

.codigo { font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace; font-weight: 700; color: var(--acento-osc); font-size: .9em; letter-spacing: .02em; }

/* ---------- Detalle de envío ---------- */
.detalle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 2.2rem; }
.detalle-item { padding: .72rem 0; border-bottom: 1px solid #eef2f8; }
.detalle-item .k { font-size: .74rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.detalle-item .v { font-weight: 600; margin-top: .1rem; color: var(--navy); }

/* ---------- Formulario de envío ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.3rem; }
.form-grid .full { grid-column: 1 / -1; }
fieldset {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 1.6rem 1.8rem; margin-bottom: 1.6rem;
    background: var(--panel);
    box-shadow: var(--sombra-suave);
}
legend {
    padding: .28rem .9rem; font-weight: 700; color: var(--navy); font-size: .88rem;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 100px;
    display: flex; align-items: center; gap: .45rem;
    box-shadow: var(--sombra-suave);
}
legend .ic { width: 15px; height: 15px; color: var(--acento); }

/* ---------- Footer (oscuro corporativo) ---------- */
.footer { background: var(--navy); padding: 3.5rem 0 0; margin-top: 5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.2rem; padding-bottom: 2.2rem; }
.footer-grid p { color: #93a8c4; font-size: .9rem; margin-top: .9rem; max-width: 22rem; }
.footer-grid h4 { margin-bottom: 1rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: #7e95b5; }
.footer-grid a {
    display: flex; align-items: center; gap: .5rem;
    color: #c3d2e5; font-size: .9rem; padding: .28rem 0;
}
.footer-grid a:hover { color: #fff; }
.footer .logo, .footer .logo span:not(.logo-icon) { color: #fff; }
.footer-logo { font-size: 1.2rem; }
.footer-sellos { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.footer-sellos span {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .76rem; color: #93a8c4;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    padding: .38rem .85rem; border-radius: 100px;
}
.footer-sellos .ic { width: 13px; height: 13px; color: #34d399; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 1.3rem 0; text-align: center; font-size: .82rem; color: #7e95b5;
}

/* ---------- Chat de soporte ---------- */
.chat-fab {
    position: fixed; bottom: 26px; right: 26px; z-index: 300;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--acento);
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; transition: var(--trans);
    box-shadow: 0 10px 28px rgba(31, 94, 255, .4);
}
.chat-fab .ic { width: 24px; height: 24px; }
.chat-fab:hover { background: var(--acento-osc); transform: scale(1.06); }
.chat-fab-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--rojo); color: #fff; font-size: .68rem; font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 100px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.chat-panel {
    position: fixed; bottom: 98px; right: 26px; z-index: 300;
    width: min(370px, calc(100vw - 32px)); height: 480px;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 37, 64, .22);
    display: none; flex-direction: column; overflow: hidden;
}
.chat-panel.abierto { display: flex; }
.chat-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem;
    background: var(--navy);
    color: #fff;
}
.chat-head strong { color: #fff; }
.chat-estado { font-size: .76rem; color: #6ee7b7; display: flex; align-items: center; gap: .35rem; }
.chat-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.chat-cerrar { background: none; border: none; color: #b8c8dd; cursor: pointer; padding: .3rem; display: flex; }
.chat-cerrar:hover { color: #fff; }
.chat-cerrar .ic { width: 16px; height: 16px; }
.chat-cuerpo { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--panel-2); }
.chat-msg {
    max-width: 82%; padding: .65rem .95rem; border-radius: 13px;
    font-size: .9rem; line-height: 1.45; word-wrap: break-word;
}
.chat-msg.admin {
    background: var(--panel);
    border: 1px solid var(--borde);
    color: var(--texto);
    align-self: flex-start; border-bottom-left-radius: 4px;
    box-shadow: var(--sombra-suave);
}
.chat-msg.mio {
    background: var(--acento); color: #fff;
    align-self: flex-end; border-bottom-right-radius: 4px;
}
.chat-hora { display: block; font-size: .66rem; opacity: .65; margin-top: .25rem; text-align: right; }
.chat-form { display: flex; gap: .6rem; padding: .8rem; border-top: 1px solid var(--borde); background: var(--panel); }
.chat-form input {
    flex: 1; padding: .68rem 1rem; border-radius: 100px;
    background: var(--panel-2); border: 1px solid var(--borde);
    color: var(--texto); font-family: inherit; font-size: .9rem;
}
.chat-form input:focus { outline: none; border-color: var(--acento); background: var(--panel); }
.chat-form .btn { border-radius: 100px; padding: .5rem .9rem; }

/* ---------- Chat admin ---------- */
.admin-chat {
    display: grid; grid-template-columns: 300px 1fr; gap: 0;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio); overflow: hidden; height: 560px; margin-bottom: 3rem;
    box-shadow: var(--sombra-suave);
}
.admin-chat-lista { border-right: 1px solid var(--borde); overflow-y: auto; background: var(--panel); }
.admin-chat-hilo { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.admin-chat-hilo .chat-cuerpo { flex: 1; min-height: 0; overflow-y: auto; }
.admin-chat-vacio { padding: 2rem 1.4rem; color: var(--texto-suave); font-size: .9rem; text-align: center; }
.conv-item { padding: 1rem 1.2rem; cursor: pointer; border-bottom: 1px solid #eef2f8; transition: var(--trans); }
.conv-item:hover, .conv-item.activa { background: #f0f6ff; }
.conv-nombre { font-weight: 600; font-size: .93rem; display: flex; align-items: center; gap: .5rem; color: var(--navy); }
.conv-badge { position: static; border: none; }
.conv-ultimo { font-size: .8rem; color: var(--texto-suave); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Zona de arrastre (comprobantes) ---------- */
.dropzone {
    display: block; cursor: pointer;
    border: 2px dashed #c3d2e8; border-radius: 14px;
    background: #f8fbff;
    padding: 1.6rem; text-align: center;
    transition: var(--trans);
}
.dropzone:hover, .dropzone.arrastrando {
    border-color: var(--acento);
    background: #eef4ff;
}
.dz-contenido {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    color: var(--acento);
}
.dz-contenido strong { display: block; color: var(--navy); font-size: .95rem; }
.dz-contenido span { font-size: .8rem; color: var(--texto-suave); }
.dz-preview {
    display: none; max-width: 100%; max-height: 260px;
    border-radius: 10px; margin: 0 auto;
    box-shadow: var(--sombra-suave);
}
.dz-nombre { display: none; margin-top: .7rem; font-size: .84rem; color: var(--texto-suave); }

/* Imágenes y adjuntos en el chat */
.chat-img {
    display: block; max-width: 100%; max-height: 180px;
    border-radius: 10px; margin-bottom: .35rem; cursor: zoom-in;
    box-shadow: var(--sombra-suave);
}
.chat-adjuntar {
    background: var(--panel-2); border: 1px solid var(--borde);
    border-radius: 100px; width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--texto-suave); cursor: pointer; transition: var(--trans);
}
.chat-adjuntar:hover { color: var(--acento); border-color: var(--acento); }
.chat-adjunto-chip {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 .85rem; padding: .4rem .8rem;
    background: #eef4ff; border: 1px solid #d5e4ff; border-radius: 100px;
    font-size: .78rem; color: var(--navy);
}
.chat-adjunto-chip button {
    background: none; border: none; cursor: pointer; color: var(--texto-suave);
    font-size: .75rem; padding: 0 .2rem;
}
.chat-adjunto-chip button:hover { color: var(--rojo); }

/* Etiqueta del asistente virtual en el chat */
.chat-bot-tag {
    display: block; font-size: .68rem; font-weight: 700;
    color: var(--acento); text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: .25rem;
}
.chat-msg.mio .chat-bot-tag { color: rgba(255, 255, 255, .8); }

/* Select compacto (admin) */
.select-mini {
    padding: .45rem .6rem; border-radius: 8px;
    background: var(--panel); color: var(--texto);
    border: 1px solid #cfd9e8; font-family: inherit; font-size: .85rem;
}
.select-mini:focus { outline: none; border-color: var(--acento); }

/* ---------- Modal de imagen ---------- */
.img-modal {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(10, 37, 64, .75);
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 2rem;
}
.img-modal.abierto { display: flex; }
.img-modal-caja {
    position: relative; max-width: min(720px, 94vw); max-height: 86vh;
    background: var(--panel); border-radius: 16px; padding: 1rem;
    box-shadow: 0 30px 80px rgba(2, 10, 25, .5);
}
.img-modal-caja img {
    display: block; max-width: 100%; max-height: calc(86vh - 2rem);
    border-radius: 10px; margin: 0 auto;
}
.img-modal-cerrar {
    position: absolute; top: -14px; right: -14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy); color: #fff; border: 2px solid #fff;
    font-size: .95rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sombra-suave);
}
.img-modal-cerrar:hover { background: var(--acento); }

/* ---------- Métodos de pago ---------- */
.metodo-pago {
    background: #f8fbff; border: 1px solid #d5e4ff;
    border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: .9rem;
}
.metodo-pago-nombre {
    font-weight: 700; color: var(--navy); margin-bottom: .4rem;
    display: flex; align-items: center; gap: .5rem;
}
.metodo-pago-nombre .ic { color: var(--acento); }
.metodo-pago-datos { font-size: .92rem; color: var(--texto); line-height: 1.7; }

.metodo-admin-item {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: .9rem 0; border-bottom: 1px solid #eef2f8;
}
.metodo-admin-item:last-child { border-bottom: none; }
.metodo-admin-item .datos { font-size: .84rem; color: var(--texto-suave); white-space: pre-line; margin-top: .2rem; }
.metodo-admin-item .acciones { display: flex; gap: .5rem; flex-shrink: 0; }

/* ---------- Intro de bienvenida ---------- */
.intro {
    position: fixed; inset: 0; z-index: 1000;
    background: radial-gradient(ellipse 70% 60% at 50% 35%, #10375c, #0a2540 75%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease, visibility .6s;
}
.intro.intro-salir { opacity: 0; visibility: hidden; }
.intro-contenido { text-align: center; }
.intro-icono {
    width: 74px !important; height: 74px !important; border-radius: 20px !important;
    margin: 0 auto;
    animation: introPop .9s cubic-bezier(.2, 1.4, .4, 1) both;
    box-shadow: 0 20px 50px rgba(31, 94, 255, .45) !important;
}
.intro-icono .ic { width: 36px !important; height: 36px !important; }
.intro-marca {
    font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
    margin-top: 1.1rem;
    animation: introSube .8s ease .35s both;
}
.intro-marca span { color: #6d9eff; }
.intro-lema {
    color: #93a8c4; font-size: .98rem; margin-top: .4rem;
    animation: introSube .8s ease .55s both;
}
.intro-barra {
    width: 180px; height: 4px; border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    margin: 1.6rem auto 0; overflow: hidden;
    animation: introSube .8s ease .7s both;
}
.intro-barra span {
    display: block; height: 100%; width: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #1f5eff, #6d9eff);
    transform: translateX(-100%);
    animation: introCarga 1.5s ease .6s forwards;
}
@keyframes introPop {
    0% { transform: scale(.3) rotate(-18deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes introSube {
    0% { transform: translateY(16px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes introCarga {
    to { transform: translateX(0); }
}

/* Aparición suave del hero */
.hero-grid > div { animation: introSube .7s ease both; }
.hero-grid > div:last-child { animation-delay: .15s; }

/* ---------- Modo oscuro ---------- */
[data-tema="oscuro"] {
    --fondo: #0b111e;
    --panel: #131c2e;
    --panel-2: #0e1626;
    --panel-3: #1a2540;
    --borde: #24304a;
    --borde-hover: #3d517e;
    --navy: #eef2f9;
    --texto: #e2e9f4;
    --texto-suave: #93a3bd;
    --sombra: 0 12px 40px rgba(0, 0, 0, .45);
    --sombra-suave: 0 2px 12px rgba(0, 0, 0, .3);
}
[data-tema="oscuro"] .navbar { background: rgba(11, 17, 30, .92); }
[data-tema="oscuro"] .hero { background: radial-gradient(ellipse 60% 55% at 15% -10%, rgba(31,94,255,.12), transparent), var(--fondo); }
[data-tema="oscuro"] .calc-result,
[data-tema="oscuro"] .metodo-pago,
[data-tema="oscuro"] .chat-adjunto-chip { background: rgba(31, 94, 255, .1); border-color: rgba(31, 94, 255, .3); }
[data-tema="oscuro"] .calc-tab.active { background: rgba(31, 94, 255, .15); }
[data-tema="oscuro"] .dropzone { background: rgba(31, 94, 255, .06); border-color: #34456b; }
[data-tema="oscuro"] .dropzone:hover, [data-tema="oscuro"] .dropzone.arrastrando { background: rgba(31, 94, 255, .12); }
[data-tema="oscuro"] .icono { background: rgba(31, 94, 255, .12); border-color: rgba(31, 94, 255, .25); }
[data-tema="oscuro"] .icono.i-oro { background: rgba(229, 181, 88, .12); border-color: rgba(229, 181, 88, .25); }
[data-tema="oscuro"] .icono.i-verde { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .25); }
[data-tema="oscuro"] .icono.i-violeta { background: rgba(139, 92, 246, .12); border-color: rgba(139, 92, 246, .25); }
[data-tema="oscuro"] .campo input, [data-tema="oscuro"] .campo select,
[data-tema="oscuro"] .select-mini, [data-tema="oscuro"] textarea { background: var(--panel-2); border-color: var(--borde); color: var(--texto); }
[data-tema="oscuro"] tbody tr:hover, [data-tema="oscuro"] .conv-item:hover, [data-tema="oscuro"] .conv-item.activa { background: rgba(31, 94, 255, .08); }
[data-tema="oscuro"] .btn-outline { background: var(--panel-2); color: var(--texto); }
[data-tema="oscuro"] .trust-bar { background: var(--panel-3); }
[data-tema="oscuro"] .footer { background: #080d17; }
[data-tema="oscuro"] .chat-form input { background: var(--panel-2); }

.tema-toggle {
    background: none; border: 1px solid var(--borde); border-radius: 100px;
    width: 36px; height: 36px; cursor: pointer; color: var(--texto-suave);
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--trans); flex-shrink: 0;
}
.tema-toggle:hover { color: var(--acento); border-color: var(--acento); }

/* ---------- Calificación con estrellas ---------- */
.calificar {
    display: flex; flex-direction: row-reverse; justify-content: center; gap: .3rem;
}
.calificar input { display: none; }
.calificar label {
    font-size: 2.1rem; color: #cfd9e8; cursor: pointer; transition: color .15s;
    line-height: 1;
}
.calificar label:hover, .calificar label:hover ~ label,
.calificar input:checked ~ label { color: #f59e0b; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: #c9d5e6; border-radius: 100px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: #a8bad3; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero-grid, .grid-3, .grid-2, .grid-4, .footer-grid, .detalle-grid, .form-grid { grid-template-columns: 1fr; }
    .stats-grid, .trust-bar { grid-template-columns: repeat(2, 1fr); }
    .admin-chat { grid-template-columns: 1fr; height: auto; }
    .admin-chat-lista { max-height: 220px; border-right: none; border-bottom: 1px solid var(--borde); }
    .admin-chat-hilo .chat-cuerpo { min-height: 320px; }
    .nav-toggle { display: block; }
    .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start;
        background: var(--panel);
        padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--borde);
        gap: 1.1rem; box-shadow: var(--sombra);
    }
    .nav-links.open { display: flex; }
    .hero { padding: 3rem 0 2.6rem; }
    .seccion { padding: 3.4rem 0; }
}