/*
 * ============================================================
 *  Kalos DEX  |  Look & feel "Kalos Inversionista" (Vesper)
 *  Sistema de diseño compacto — replica exacta de los módulos Kalos
 * ============================================================
 */

:root {
    /* Purple palette */
    --purple:  #582C83;
    --purple2: #6E3699;
    --purple3: #3D1D5C;
    --purple4: #F0EBF8;

    /* Gold palette */
    --gold:  #EAAA00;
    --gold2: #F5C430;
    --gold3: #C8900A;
    --gold4: #FFF8DC;

    /* Backgrounds */
    --bg:  #F4F3F8;
    --bg2: #FFFFFF;
    --bg3: #EEEBF5;
    --bg4: #FAF9FC;

    /* Text */
    --text:  #1A1025;
    --text2: #4A3A60;
    --text3: #8B7BA8;

    /* Borders */
    --border:  #DDD6EE;
    --border2: #EDE9F5;

    /* Sidebar */
    --sidebar: #582C83;

    /* Shadows */
    --shadow:  0 1px 4px rgba(88,44,131,.07), 0 4px 16px rgba(88,44,131,.05);
    --shadow2: 0 8px 32px rgba(88,44,131,.14);

    /* Radius */
    --radius:  10px;
    --radius2: 6px;

    /* Transition */
    --t: .18s cubic-bezier(.4, 0, .2, 1);

    /* Fonts */
    --font-head: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, monospace;
}

html, body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    font-size: 13.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* El cuerpo, párrafos y cualquier tipografía por defecto: sans compacta */
.mud-typography,
.mud-typography-body1,
.mud-typography-body2 {
    font-family: var(--font-body);
}

.mud-typography-body1 { font-size: 0.84rem; }
.mud-typography-body2 { font-size: 0.78rem; color: var(--text2); }
.mud-typography-caption { font-size: 0.72rem; color: var(--text3); }


/* ============================================================
   TÍTULOS EN SERIF — solo encabezados reales, tamaños compactos
   ============================================================ */

.titulo-serif,
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.mud-typography-subtitle1, .mud-typography-subtitle2 {
    font-family: var(--font-head);
    letter-spacing: .2px;
    color: var(--purple);
}

/* Escala compacta estilo Kalos (título de página ≈ 18px) */
.mud-typography-h1 { font-size: 1.9rem;  font-weight: 700; }
.mud-typography-h2 { font-size: 1.6rem;  font-weight: 700; }
.mud-typography-h3 { font-size: 1.4rem;  font-weight: 700; }
.mud-typography-h4 { font-size: 1.25rem; font-weight: 700; }
.mud-typography-h5 { font-size: 1.05rem; font-weight: 600; }
.mud-typography-h6 { font-size: 0.95rem; font-weight: 600; }
.mud-typography-subtitle1 { font-size: 0.9rem;  font-weight: 600; }
.mud-typography-subtitle2 { font-size: 0.8rem;  font-weight: 600; font-family: var(--font-body); color: var(--text2); }

/* Scrollbar fino estilo Vesper */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(88,44,131,.2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(88,44,131,.35); }


/* ============================================================
   SHELL — estructura idéntica a Kalos (sidebar + main + topbar)
   ============================================================ */

.app-wrap {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}


/* ---------------------------- SIDEBAR ---------------------------- */

.sidebar {
    width: 228px;
    background: var(--sidebar);
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex-shrink: 0;
    box-shadow: 2px 0 20px rgba(0,0,0,.12);
}

/* Logo */
.logo-area {
    padding: 14px 15px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.logo-badge {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234,170,0,.14);
    border-radius: 8px;
    border: 1px solid rgba(234,170,0,.28);
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 800;
    color: #EAAA00;
    line-height: 1;
}

.logo-main {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: #EAAA00;
}

.logo-sub {
    font-size: 9px;
    color: rgba(237,233,245,.48);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-top: 1px;
}

/* Bloque de usuario */
.sb-user {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.u-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--purple3);
    flex-shrink: 0;
}

.u-name {
    font-size: 11.5px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-role {
    font-size: 9.5px;
    color: var(--gold);
    opacity: .85;
}

/* Buscar */
.sb-search {
    padding: 7px 11px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
    position: relative;
}

.sb-search svg {
    position: absolute;
    left: 18px;
    top: 14px;
    opacity: .32;
}

.sb-search input {
    width: 100%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 5px 8px 5px 25px;
    font-size: 11px;
    color: #fff;
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--t), background var(--t);
}

.sb-search input::placeholder { color: rgba(255,255,255,.28); }

.sb-search input:focus {
    border-color: rgba(234,170,0,.35);
    background: rgba(255,255,255,.12);
}

/* Área de navegación */
.nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 6px;
}

.nav-scroll::-webkit-scrollbar { width: 3px; }
.nav-scroll::-webkit-scrollbar-thumb { background: rgba(234,170,0,.18); }

/* Encabezado de grupo (dorado, MAYÚSCULAS) */
.nav-grp {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(234,170,0,.48);
    padding: 9px 14px 3px;
    margin-top: 2px;
}

/* Ítem de navegación */
.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    color: rgba(237,233,245,.7);
    font-size: 11.5px;
    font-weight: 500;
    transition: all var(--t);
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
}

.nav-item:hover {
    background: rgba(234,170,0,.1);
    color: rgba(255,255,255,.95);
    border-left-color: rgba(234,170,0,.38);
}

.nav-item.active {
    background: rgba(234,170,0,.17);
    color: #EAAA00;
    border-left-color: #EAAA00;
    font-weight: 600;
}

/* Ícono de navegación */
.nav-icon {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Footer */
.sb-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 3px 0;
    flex-shrink: 0;
}

.sb-footer .nav-item { font-size: 11px; padding: 5px 14px; }

.nav-item.exit { color: rgba(239,68,68,.7); }

.nav-item.exit:hover {
    background: rgba(192,57,43,.12);
    color: #E57373;
    border-left-color: rgba(192,57,43,.4);
}

/* Tarjeta de usuario (abajo) + popover */
.sb-usercard-wrap { position: relative; }

.sb-usercard {
    margin: 5px 10px 3px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
}

.sb-usercard:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(234,170,0,.3);
}

.sb-usercard .uc-caret { color: rgba(255,255,255,.4); flex-shrink: 0; }

.sb-version {
    text-align: center;
    font-size: 9px;
    color: rgba(237,233,245,.32);
    letter-spacing: .6px;
    padding: 1px 0 7px;
}

.uc-popover {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 10px;
    right: 10px;
    background: var(--purple3);
    border: 1px solid rgba(234,170,0,.22);
    border-radius: 11px;
    padding: 6px;
    box-shadow: 0 12px 34px rgba(0,0,0,.4);
    z-index: 40;
}

.uc-pop-hdr {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    padding: 5px 8px 6px;
    font-weight: 700;
}

.uc-pop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--t);
}

.uc-pop-item:hover { background: rgba(255,255,255,.07); }
.uc-pop-item.sel { background: rgba(234,170,0,.1); }

.uc-pop-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--purple3);
    flex-shrink: 0;
}

.uc-pop-name {
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uc-pop-role { font-size: 9px; color: var(--gold); opacity: .8; }

.uc-pop-sep {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 5px 4px;
}

.uc-pop-item.exit { color: rgba(239,68,68,.85); font-size: 11px; }
.uc-pop-item.exit:hover { background: rgba(192,57,43,.14); color: #E57373; }
.uc-pop-item.exit .nav-icon { padding: 0; }
.uc-pop-item.exit .nav-icon svg { width: 15px; height: 15px; }


/* ---------------------------- TICKER ---------------------------- */

.ticker {
    background: linear-gradient(90deg, var(--purple3), #4A1E7A);
    padding: 5px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(234,170,0,.18);
}

.tick-lbl {
    background: var(--gold);
    color: var(--purple3);
    font-size: 8px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.tick-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-family: var(--font-mono);
    color: rgba(255,255,255,.82);
    white-space: nowrap;
    flex-shrink: 0;
}

.tick-sep { color: rgba(234,170,0,.3); font-size: 11px; }
.tick-up { color: #4ADE80; }
.tick-dn { color: #F87171; }


/* ---------------------------- TOPBAR ---------------------------- */

.topbar {
    height: 54px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 11px;
    flex-shrink: 0;
}

.breadcrumb {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--purple);
    flex: 1;
}

/* Botón hamburguesa */
.hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    border-radius: var(--radius2);
    flex-shrink: 0;
    transition: background var(--t), color var(--t);
}

.hamburger:hover { background: var(--bg3); color: var(--purple); }

.hamburger svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Marca (estrella dorada + título serif) */
.brand-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.brand-star svg {
    width: 16px;
    height: 16px;
    fill: var(--gold);
    stroke: none;
    display: block;
}

.brand-name {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--purple);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-r {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Chips del header (USD / fecha) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

.chip svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chip-usd {
    background: #E7F7EC;
    border: 1px solid #B8E6C4;
    color: #1E7B43;
    font-weight: 600;
}

.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2FB865;
    flex-shrink: 0;
}

.chip-date {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text2);
}

/* Selector de usuario (prototipo) con estilo Kalos */
.sel-usuario {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 11.5px;
    padding: 5px 10px;
    max-width: 300px;
    cursor: pointer;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
}

.sel-usuario:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(88,44,131,.1);
}

.notif-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all var(--t);
    flex-shrink: 0;
}

.notif-btn:hover { background: var(--bg3); border-color: var(--purple2); }

.notif-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--text2);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.notif-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    background: var(--danger, #C0392B);
    border-radius: 50%;
    border: 1.5px solid var(--bg2);
}


/* --------------------------- CONTENIDO --------------------------- */

.content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    background: var(--bg);
}

.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-thumb { background: rgba(88,44,131,.15); border-radius: 4px; }


/* --------------------------- DASHBOARD --------------------------- */

.page-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.page-title {
    font-family: var(--font-head);
    font-size: 27px;
    font-weight: 700;
    color: var(--purple);
    margin: 0;
    line-height: 1.1;
}

.page-sub {
    font-size: 12.5px;
    color: var(--text3);
    margin-top: 3px;
}

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--purple);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color var(--t), background var(--t), color var(--t);
    flex-shrink: 0;
}

.btn-refresh:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold3);
}

.btn-refresh:disabled { opacity: .6; cursor: default; }

.btn-refresh svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-refresh svg.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.kpi {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 17px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.kpi::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold);
}

.kpi-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text3);
    font-weight: 600;
}

.kpi-val {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    color: var(--purple);
    line-height: 1.15;
    margin: 5px 0 3px;
}

.kpi-foot { font-size: 11px; color: var(--text2); }

/* Panel + tabla */
.panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-hdr {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--purple);
    padding: 14px 17px 11px;
    border-bottom: 1px solid var(--border2);
}

.panel.empty {
    padding: 22px 18px;
    font-size: 13px;
    color: var(--text2);
}
.panel.empty a { color: var(--purple2); font-weight: 600; }

.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.tbl thead th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text3);
    font-weight: 600;
    padding: 9px 17px;
    background: var(--bg4);
    border-bottom: 1px solid var(--border2);
}

.tbl tbody td {
    padding: 10px 17px;
    color: var(--text);
    border-bottom: 1px solid var(--border2);
}

.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--bg4); }
.tbl .num { text-align: right; }

/* Archivos subidos (editor de ficha) */
.docs-subidos-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border2);
    background: var(--bg4);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--purple);
}

.docs-subidos-cnt {
    margin-left: auto;
    background: var(--purple);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 9px;
}

.doc-fila {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border2);
}

.doc-fila:last-child { border-bottom: none; }
.doc-info { flex: 1; min-width: 0; }

.doc-nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-tipo { font-size: 11.5px; color: var(--text3); }


/* ============================================================
   TARJETAS / PAPELES (MudPaper, MudCard)
   ============================================================ */

.mud-paper, .mud-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow) !important;
    transition: box-shadow var(--t);
}

.mud-paper:hover.mud-paper-outlined {
    box-shadow: var(--shadow2) !important;
}

.mud-paper-outlined {
    box-shadow: none !important;
}


/* ============================================================
   CAMPOS DE ENTRADA (MudTextField, MudSelect, MudDatePicker…)
   Compactos, bordeados, valores en DM Sans (nunca serif)
   ============================================================ */

/* CLAVE: el valor escrito en cualquier input SIEMPRE en sans */
.mud-input,
.mud-input-slot,
.mud-input-root input,
.mud-input-root textarea,
.mud-input-root .mud-input-slot,
.mud-select .mud-input-slot,
input.mud-input-root,
.mud-input-root {
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    color: var(--text);
    letter-spacing: normal;
}

/* Etiqueta del campo: morada, en MAYÚSCULAS, para que resalte */
.mud-input-label,
.mud-input-label-inputcontrol {
    font-family: var(--font-body) !important;
    font-size: 0.82rem;
    color: var(--purple) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Etiqueta flotante (cuando el campo tiene valor / foco) */
.mud-input-label.mud-input-label-shrink {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .5px;
}

/* Fondo blanco dentro del campo (para que resalte sobre la tarjeta gris) */
.mud-input.mud-input-outlined {
    background-color: var(--bg2);
    border-radius: 14px;
}

/* Borde del outlined: esquinas bien ovaladas */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border);
    border-radius: 14px;
    transition: border-color var(--t), box-shadow var(--t);
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--purple2);
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--purple) !important;
    border-width: 1.5px;
    box-shadow: 0 0 0 3px rgba(88,44,131,.08);
}

.mud-input.mud-input-outlined > input,
.mud-input.mud-input-outlined > textarea,
.mud-input.mud-input-outlined .mud-input-slot {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Ayuda / mensajes bajo el campo */
.mud-input-helper-text { font-size: 0.68rem; color: var(--text3); }


/* ============================================================
   BOTONES
   ============================================================ */

.mud-button-root {
    border-radius: var(--radius2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 4px 12px rgba(88,44,131,.28) !important;
}

.mud-button-filled.mud-button-filled-secondary {
    color: var(--purple3);
}

.mud-button-filled.mud-button-filled-secondary:hover {
    box-shadow: 0 4px 12px rgba(234,170,0,.25) !important;
}


/* ============================================================
   PESTAÑAS (MudTabs)
   ============================================================ */

.mud-tabs-toolbar {
    border-bottom: 2px solid var(--border);
    min-height: 42px;
}

.mud-tabs-tabbar-content .mud-tab {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .2px;
    color: var(--text3);
    min-height: 42px;
    min-width: unset;
    padding: 0 16px;
}

.mud-tabs-tabbar-content .mud-tab:hover { color: var(--text); }

.mud-tabs-tabbar-content .mud-tab.mud-tab-active {
    color: var(--purple) !important;
}

/* Indicador dorado */
.mud-tab-slider.mud-tab-slider-horizontal {
    background-color: var(--gold) !important;
    height: 2px;
}

.mud-tabs-tabbar-content .mud-tab .mud-icon-root {
    font-size: 1.05rem;
    margin-right: 6px;
}


/* ============================================================
   TABLAS (MudTable)
   ============================================================ */

.mud-table {
    border-radius: var(--radius);
}

.mud-table-root thead .mud-table-cell,
.mud-table-head .mud-table-cell {
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--text3);
    background: var(--bg3);
}

.mud-table-root tbody .mud-table-cell {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text);
}

.mud-table-root tbody .mud-table-row:hover {
    background: var(--bg4) !important;
}

.mud-table-cell {
    border-bottom: 1px solid var(--border2);
}


/* ============================================================
   CHIPS, ALERTAS
   ============================================================ */

.mud-chip {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
}

.mud-alert { border-radius: var(--radius2); font-size: 0.8rem; }


/* ============================================================
   Pantalla de Bienvenida
   ============================================================ */

.bienvenida {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple3) 100%);
}

.bienvenida-tarjeta {
    background: var(--bg2);
    max-width: 680px;
    width: 100%;
    border-radius: 14px;
    padding: 2.5rem 2.75rem;
    box-shadow: 0 20px 60px rgba(61, 29, 92, 0.4);
}

.bienvenida-tarjeta h1 {
    font-family: var(--font-head);
    color: var(--purple);
    margin: 0;
    font-size: 2rem;
}

.bienvenida-sub {
    color: var(--text3);
    margin-top: 0.25rem;
    margin-bottom: 1.75rem;
}

.bienvenida-aviso {
    background: var(--purple4);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius2);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.bienvenida-aviso strong { color: var(--purple); }

.bienvenida-pasos { line-height: 1.7; color: var(--text); }

.bienvenida-tarjeta code {
    background: var(--purple4);
    color: var(--purple3);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.bienvenida-tarjeta pre {
    background: var(--text);
    color: var(--purple4);
    padding: 0.9rem 1rem;
    border-radius: var(--radius2);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    margin-top: 0.5rem;
}

.bienvenida-pie {
    color: var(--text3);
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

/* ======================= FICHA F005 IMPRIMIBLE ======================= */
.f005-cargando { padding: 40px; color: var(--text3); font-family: var(--font-body); }

.f005-toolbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 16px;
    background: var(--bg2); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.f005-toolbar-title { font-family: var(--font-head); font-size: 15px; color: var(--purple); font-weight: 600; }
.f005-btn {
    border: none; border-radius: var(--radius2); cursor: pointer;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
    padding: 8px 16px; transition: var(--t);
}
.f005-btn-pri { background: var(--purple); color: #fff; }
.f005-btn-pri:hover { background: var(--purple2); }
.f005-btn-sec { background: var(--bg3); color: var(--text2); }
.f005-btn-sec:hover { background: var(--border2); }

.f005-hoja {
    max-width: 820px; margin: 22px auto; background: #fff;
    padding: 32px 36px; box-shadow: var(--shadow);
    font-family: var(--font-body); color: var(--text);
    font-size: 11px; line-height: 1.35;
}

.f005-head { border-bottom: 2px solid var(--purple); padding-bottom: 12px; margin-bottom: 16px; }
.f005-brand { display: flex; align-items: center; justify-content: space-between; }
.f005-logo { display: flex; align-items: center; gap: 9px; }
.f005-brand-main { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--purple); line-height: 1; }
.f005-brand-sub { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold3); }
.f005-code { font-family: var(--font-mono); font-size: 12px; color: var(--text3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; }
.f005-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--purple3); text-align: center; margin: 12px 0 0; letter-spacing: .3px; }

.f005-sec {
    background: var(--purple); color: #fff;
    font-weight: 600; font-size: 11px; letter-spacing: .3px;
    padding: 5px 10px; margin: 16px 0 0; border-radius: 3px 3px 0 0;
}
.f005-sub {
    background: var(--gold4); color: var(--gold3);
    font-weight: 700; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; margin-top: 8px; border-left: 3px solid var(--gold);
}

.f005-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border); border-top: none;
}
.f005-cell { padding: 5px 10px; border-right: 1px solid var(--border2); border-bottom: 1px solid var(--border2); min-width: 0; }
.f005-cell:nth-child(2n) { border-right: none; }
.f005-span2 { grid-column: 1 / -1; border-right: none; }
.f005-lbl { font-size: 8.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 1px; }
.f005-val { font-size: 11px; color: var(--text); font-weight: 500; word-break: break-word; }

.f005-marks { display: flex; flex-wrap: wrap; gap: 18px; padding: 7px 10px; border: 1px solid var(--border); border-top: none; font-size: 10.5px; }
.f005-marks span { white-space: nowrap; }

.f005-p { padding: 6px 10px 2px; font-size: 10px; color: var(--text2); }

.f005-tabla { width: 100%; border-collapse: collapse; margin-top: 0; }
.f005-tabla th {
    background: var(--purple4); color: var(--purple3);
    font-size: 8.5px; text-transform: uppercase; letter-spacing: .4px;
    text-align: left; padding: 5px 8px; border: 1px solid var(--border);
}
.f005-tabla td { padding: 5px 8px; border: 1px solid var(--border2); font-size: 10.5px; height: 20px; }
.f005-num { text-align: right; }

.f005-jur { padding: 10px 12px; border: 1px solid var(--border); font-size: 10px; text-align: justify; color: var(--text2); background: var(--bg4); margin: 0; }
.f005-fecha { margin-top: 10px; font-size: 11px; font-weight: 500; }

.f005-firmas { display: flex; gap: 60px; justify-content: center; margin-top: 48px; }
.f005-firma { flex: 1; max-width: 260px; text-align: center; }
.f005-firma-linea { border-top: 1px solid var(--text); margin-bottom: 5px; }
.f005-firma-lbl { font-size: 10px; font-weight: 600; color: var(--text2); }
.f005-firma-nom { font-size: 9.5px; color: var(--text3); margin-top: 2px; }

@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff !important; }
    .app-wrap, .sidebar, .ticker, .topbar, .no-print { display: none !important; }
    .main, .content { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    .f005-hoja { box-shadow: none; margin: 0; max-width: none; padding: 0; }
    .f005-sec, .f005-tabla th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .f005-sec { break-after: avoid; }
    .f005-grid, .f005-tabla, .f005-firmas { break-inside: avoid; }
}

/* ============================================================
   Calendario de fecha (componente EntradaFecha) — estilo tipo macOS.
   El popover se renderiza en un portal fuera del componente, por eso
   estos estilos son globales (no de ámbito). Como todas las fechas de
   la app usan EntradaFecha, el look queda uniforme.
   ============================================================ */

/* 1. Ocultar la barra superior con el año/fecha en grande. */
.mud-picker-datepicker-toolbar { display: none !important; }

/* 2. Encabezado: "mes de año" a la izquierda, flechas agrupadas a la derecha. */
.mud-picker-calendar-header-switch {
    display: flex;
    align-items: center;
    padding: 4px 8px 0;
}
.mud-picker-calendar-header-switch .mud-button-month {
    order: 0;
    margin-right: auto;      /* empuja las flechas hacia la derecha */
    text-transform: none;
    padding-left: 6px;
}
.mud-picker-calendar-header-switch .mud-button-month .mud-typography {
    font-weight: 600;
    text-align: left;
}
.mud-picker-calendar-header-switch .mud-button-month .mud-typography::after {
    content: " \25BE";       /* ▾ */
    font-size: .8em;
    opacity: .8;
}
.mud-picker-nav-button-prev { order: 1; }
.mud-picker-nav-button-next { order: 2; }

/* Flechas ↑ ↓ (verticales) en vez de los chevrones ‹ › por defecto. */
.mud-picker-nav-button-prev .mud-icon-button-label svg,
.mud-picker-nav-button-next .mud-icon-button-label svg { display: none; }
.mud-picker-nav-button-prev .mud-icon-button-label::before {
    content: "\2191";        /* ↑ */
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}
.mud-picker-nav-button-next .mud-icon-button-label::before {
    content: "\2193";        /* ↓ */
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}

/* 3. Mostrar en gris los días de meses adyacentes (MudBlazor los oculta). */
.mud-picker-calendar-day.mud-hidden {
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--mud-palette-text-disabled) !important;
    pointer-events: none;
}

/* 4. Día seleccionado: cuadro redondeado gris en vez del círculo morado. */
.mud-picker-calendar-day.mud-selected,
.mud-picker-calendar-day.mud-selected:hover,
.mud-picker-calendar-day.mud-theme-primary {
    background-color: rgba(0, 0, 0, .10) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

/* Día de hoy: solo un borde tenue (sin relleno de color). */
.mud-picker-calendar-day.mud-current:not(.mud-selected) {
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary) !important;
}

/* ============================================================
   Desplegables agrupados (EntradaProfesion.razor, EntradaBanco.razor)
   Los títulos de grupo son opciones deshabilitadas. MudBlazor las pinta
   grises y semitransparentes; acá se las devuelve a un encabezado legible.
   Va en app.css (global) y no en un .razor.css porque el desplegable se
   dibuja fuera del componente, en la capa flotante de MudBlazor.
   ============================================================ */
.mud-list-item.ep-grupo {
    opacity: 1 !important;
    cursor: default !important;
    background: var(--bg3) !important;
    color: var(--purple) !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    min-height: 30px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Las opciones van con una sangría para que se lea a qué grupo pertenecen. */
.mud-list-item.ep-item {
    padding-left: 26px;
}

/* ============================================================
   Campos en MAYÚSCULAS (EntradaTexto.razor)
   ============================================================ */
.entrada-mayus input {
    text-transform: uppercase;
}

/* ============================================================
   PANTALLA DE INICIO DE SESIÓN
   Mismo diseño que el resto de los sistemas Kalos (ver KalosRiesgos):
   panel morado a la izquierda con la marca, tarjeta blanca a la derecha.
   ============================================================ */
.login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.login-left {
    flex: 1;
    background: linear-gradient(135deg, #582C83 0%, #3d1d5c 50%, #1A0A33 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Resplandor dorado que late suave detrás del logo. */
.login-left::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(234, 170, 0, 0.15) 0%, transparent 70%);
    animation: login-pulso 4s ease-in-out infinite;
}

@keyframes login-pulso {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.login-brand {
    text-align: center;
    z-index: 1;
    position: relative;
}

.login-brand .brand-icon {
    margin-bottom: 1.5rem;
}

.login-brand .brand-title {
    color: #FFFFFF;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
    font-family: 'Playfair Display', Georgia, serif;
}

.login-brand .brand-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 300;
    margin-top: 0.5rem;
}

.login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #FAFAFA;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    background: #FFFFFF !important;
    border-radius: 12px !important;
}

.login-title {
    color: #582C83;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
}

.login-subtitle-text {
    color: #666666;
}

.login-btn {
    height: 48px;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 8px !important;
}

.login-footer {
    text-align: center;
}

.login-footer .text-muted {
    color: #999999 !important;
}

@media (max-width: 768px) {
    .login-container { flex-direction: column; }
    .login-left { min-height: 200px; flex: 0; }
    .login-brand .brand-title { font-size: 1.8rem; }
    .login-right { padding: 1rem; }
    .login-card { padding: 1.5rem; }
}

/* ============================================================
   SIMULADOR DE PERFIL
   Barra de aviso permanente. Es deliberadamente llamativa: el administrador tiene
   que darse cuenta de que lo que está viendo NO es lo que él ve normalmente.
   ============================================================ */
.sim-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    background: var(--gold4);
    border-bottom: 2px solid var(--gold);
    color: #6b4e00;
    font-size: 12.5px;
    font-family: var(--font-body);
}

.sim-barra svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--gold3);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sim-barra strong { font-weight: 700; }

.sim-barra .sim-salir {
    margin-left: auto;
    background: var(--gold);
    color: #3d2a00;
    border: 0;
    border-radius: var(--radius2);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t);
    font-family: var(--font-body);
}

.sim-barra .sim-salir:hover { background: var(--gold3); color: #fff; }