/* =====================================================================
   OdontologiaPrepaga — tema (heredado de SysMuni)
   Azul marino + acento dorado. Barra lateral con menú por áreas,
   barra superior con buscador y contexto, fichas con pestañas.
   ===================================================================== */

:root {
    --sm-primario: #1559a8;
    --sm-primario-osc: #0e437f;
    --sm-barra: #0b1d33;
    --sm-barra-2: #10294a;
    --sm-acento: #c99a2e;
    --sm-acento-fg: #3d2c05;
    --sm-bg: #eef2f7;
    --sm-panel: #ffffff;
    --sm-fg: #142235;
    --sm-muted: #5d6b7e;
    --sm-linea: #dde4ee;
    --sm-sel: #dbe8fa;
    --sm-hover: #f3f6fa;
    --sm-total-bg: #e4eefb;
    --sm-rojo: #c0392b;
    --sm-verde: #1e8a4c;
    --sm-ambar: #c98a06;
    --sm-r: 10px;
    --sm-fuente: "Inter", "Segoe UI", system-ui, sans-serif;
    --sm-titulos: "Outfit", "Inter", "Segoe UI", sans-serif;
    --sm-mono: "JetBrains Mono", "Consolas", monospace;

    --bs-body-font-family: var(--sm-fuente);
    --bs-body-bg: var(--sm-bg);
    --bs-body-color: var(--sm-fg);
    --bs-primary: var(--sm-primario);
    --bs-primary-rgb: 21, 89, 168;
    --bs-success: var(--sm-verde);
    --bs-success-rgb: 30, 138, 76;
    --bs-link-color: var(--sm-primario);
    --bs-link-hover-color: var(--sm-primario-osc);
    --bs-border-radius: 8px;
}

body { font-size: 14px; }

h1, h2, h3, h4, .ttl, .vista-titulo h1 { font-family: var(--sm-titulos); font-weight: 600; letter-spacing: -.2px; }

.btn-success {
    --bs-btn-bg: var(--sm-verde); --bs-btn-border-color: var(--sm-verde);
    --bs-btn-hover-bg: #176d3c; --bs-btn-hover-border-color: #176d3c;
    --bs-btn-active-bg: #176d3c; --bs-btn-disabled-bg: var(--sm-verde); --bs-btn-disabled-border-color: var(--sm-verde);
}
.btn-primary {
    --bs-btn-bg: var(--sm-primario); --bs-btn-border-color: var(--sm-primario);
    --bs-btn-hover-bg: var(--sm-primario-osc); --bs-btn-hover-border-color: var(--sm-primario-osc);
    --bs-btn-active-bg: var(--sm-primario-osc); --bs-btn-disabled-bg: var(--sm-primario); --bs-btn-disabled-border-color: var(--sm-primario);
}
.btn-acento { background: var(--sm-acento); border-color: var(--sm-acento); color: #fff; }
.btn-acento:hover { background: #ad8424; border-color: #ad8424; color: #fff; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--sm-primario); box-shadow: 0 0 0 .2rem rgba(21, 89, 168, .18); }
.form-check-input:checked { background-color: var(--sm-primario); border-color: var(--sm-primario); }
.form-control, .form-select { font-size: 14px; }
.form-control[readonly] { background: var(--sm-hover); }

/* ============================ ESTRUCTURA ============================ */

#app { display: flex; min-height: 100vh; }

aside.lado {
    width: 252px; background: linear-gradient(180deg, var(--sm-barra), var(--sm-barra-2)); color: #fff; flex-shrink: 0;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20;
}
aside.lado .marca { display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px; text-decoration: none; color: #fff; }
aside.lado .marca .escudo {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--sm-acento), #e6c56a); color: var(--sm-barra); font-size: 20px; overflow: hidden;
}
aside.lado .marca .escudo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
aside.lado .marca b { font-family: var(--sm-titulos); font-size: 20px; line-height: 1; display: block; }
aside.lado .marca b span { color: var(--sm-acento); }
aside.lado .marca small { display: block; font-size: 10.5px; color: #8fa3bf; margin-top: 3px; line-height: 1.2; text-transform: uppercase; letter-spacing: .5px; }

aside.lado .perfil-mini { margin: 4px 14px 10px; padding: 10px 12px; background: #ffffff0d; border-radius: 10px; display: flex; gap: 10px; align-items: center; }
aside.lado .perfil-mini i { font-size: 26px; color: #9fb5d3; }
aside.lado .perfil-mini b { display: block; font-size: 13px; }
aside.lado .perfil-mini small { color: #7fd3a6; font-size: 11px; }
aside.lado .busca-menu { margin: 0 14px 10px; position: relative; }
aside.lado .busca-menu input { background: #ffffff12; border: 1px solid #ffffff1c; color: #fff; font-size: 13px; padding: 7px 10px 7px 30px; border-radius: 8px; width: 100%; }
aside.lado .busca-menu input::placeholder { color: #8fa3bf; }
aside.lado .busca-menu i { position: absolute; left: 10px; top: 8px; color: #8fa3bf; font-size: 13px; }

aside.lado nav { display: flex; flex-direction: column; padding: 0 10px 10px; gap: 1px; flex: 1; overflow: auto; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
aside.lado nav a, aside.lado nav .grupo {
    background: transparent; color: #b9c6d8; text-align: left; font-weight: 500; padding: 9px 12px;
    border-radius: 8px; text-decoration: none; font-size: 13.5px; display: flex; align-items: center; gap: 10px;
}
aside.lado nav .grupo { cursor: pointer; border: 0; width: 100%; }
aside.lado nav .grupo::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; font-size: 11px; opacity: .55; transition: transform .2s; }
aside.lado nav .grupo.abierto::after { transform: rotate(180deg); }
aside.lado nav .sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid #ffffff1a; }
aside.lado nav .sub.abierto { display: flex; }
aside.lado nav .sub a { padding: 6px 10px; font-size: 13px; }
aside.lado nav .sub hr { border-color: #ffffff22; margin: 4px 8px; opacity: 1; }
aside.lado nav a:hover, aside.lado nav .grupo:hover { background: #ffffff0f; color: #fff; }
aside.lado nav a.act { background: var(--sm-primario); color: #fff; box-shadow: 0 4px 12px #0006; }
aside.lado nav a i, aside.lado nav .grupo i { width: 18px; text-align: center; font-size: 15px; }
aside.lado nav .oculto-busca { display: none !important; }
aside.lado .foot { padding: 12px 14px; font-size: 11px; color: #7f92ad; border-top: 1px solid #ffffff14; display: flex; gap: 6px; }
aside.lado .foot a { flex: 1; background: #ffffff10; color: #dfe6f0; border-radius: 8px; padding: 8px; font-weight: 600; font-size: 12.5px; text-decoration: none; text-align: center; }
aside.lado .foot a:hover { background: #ffffff1f; color: #fff; }

.envoltura { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
    background: var(--sm-panel); padding: 10px 22px; display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--sm-linea); flex-wrap: wrap; position: sticky; top: 0; z-index: 15;
}
.top .titulos small { display: block; font-size: 10.5px; color: var(--sm-muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.top h2 { font-size: 19px; margin: 0; }
.top .sp { flex: 1; }
.top .reloj { color: var(--sm-muted); font-size: 12.5px; }
.top .usuario-top { color: var(--sm-fg); font-size: 13px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.top .usuario-top .rol { background: var(--sm-sel); color: var(--sm-primario-osc); font-size: 10.5px; padding: 2px 8px; border-radius: 20px; font-weight: 700; }
.top .btn-menu { display: none; }
.top .caja-estado { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-decoration: none; }
.top .caja-estado.abierta { background: #e3f5ea; color: var(--sm-verde); }
.top .caja-estado.cerrada { background: #fdecea; color: var(--sm-rojo); }

main.vista { max-width: 1440px; margin: 0; padding: 20px 22px; width: 100%; }
.pie-copy { text-align: right; color: var(--sm-muted); font-size: 12px; padding: 8px 22px 18px; }

@media (max-width: 960px) {
    #app { flex-direction: column; }
    aside.lado { width: 100%; height: auto; position: static; display: none; }
    aside.lado.abierto { display: flex; }
    .top .btn-menu { display: inline-block; }
    .top .reloj { display: none; }
    main.vista { padding: 14px 12px; }
}

/* ============================ TARJETAS Y PANELES ============================ */

.card { border: 1px solid var(--sm-linea); border-radius: var(--sm-r); box-shadow: 0 1px 2px #0b1d330a; }
.card-header { background: var(--sm-panel); font-weight: 600; font-family: var(--sm-titulos); font-size: 15px; border-bottom: 1px solid var(--sm-linea); }
.card-header.oscuro { background: linear-gradient(90deg, var(--sm-barra), var(--sm-primario-osc)); color: #fff; border-radius: var(--sm-r) var(--sm-r) 0 0; }

.hero {
    background: radial-gradient(circle at 85% 30%, #ffffff1a 0 120px, transparent 121px), linear-gradient(120deg, var(--sm-barra), var(--sm-primario-osc) 70%, var(--sm-primario));
    color: #fff; border-radius: 16px; padding: 26px 28px; margin-bottom: 18px; position: relative; overflow: hidden;
}
.hero small { color: var(--sm-acento); font-weight: 700; letter-spacing: 1.2px; font-size: 11px; text-transform: uppercase; }
.hero h1 { font-size: 30px; margin: 6px 0 4px; }
.hero p { color: #c8d6ea; margin: 0; max-width: 620px; }
.hero .hero-icono { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 64px; color: #ffffff30; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.st { background: var(--sm-panel); padding: 16px 18px; border-radius: 12px; border: 1px solid var(--sm-linea); position: relative; overflow: hidden; }
.st::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--sm-primario)); }
.st small { color: var(--sm-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.st b { display: block; font-size: 24px; margin-top: 4px; font-family: var(--sm-titulos); font-weight: 600; }
.st .sub { font-size: 12px; color: var(--sm-muted); }
.st i.ico { position: absolute; right: 14px; top: 14px; font-size: 22px; color: var(--c, var(--sm-primario)); opacity: .35; }

.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.acceso { display: flex; gap: 12px; align-items: center; background: var(--sm-panel); border: 1px solid var(--sm-linea); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--sm-fg); transition: .15s; }
.acceso:hover { border-color: var(--sm-primario); box-shadow: 0 6px 16px #1559a81a; transform: translateY(-1px); color: var(--sm-fg); }
.acceso i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--sm-sel); color: var(--sm-primario); font-size: 18px; flex-shrink: 0; }
.acceso b { font-size: 13.5px; display: block; }
.acceso small { color: var(--sm-muted); font-size: 11.5px; }

.tarjeta { background: var(--sm-panel); border-radius: 12px; padding: 18px; margin-bottom: 16px; border: 1px solid var(--sm-linea); }
.tarjeta > h3 { font-size: 16px; margin-bottom: 12px; }
.seccion-lbl { font-size: 11px; color: var(--sm-muted); display: block; margin: 14px 0 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.mut { color: var(--sm-muted); }
.big { font-family: var(--sm-titulos); font-size: 24px; color: var(--sm-primario-osc); font-weight: 600; }
.mono { font-family: var(--sm-mono); }

/* Estados */
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.p-ok { background: #e3f5ea; color: #176d3c; }
.p-wa { background: #fdf3dc; color: #8a5d00; }
.p-mal { background: #fdecea; color: #a5281b; }
.p-azul { background: var(--sm-sel); color: var(--sm-primario-osc); }
.p-gris { background: #eceff3; color: #4b5869; }

/* ============================ CABECERA DE CONTRIBUYENTE / FICHAS ============================ */

.contrib-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(90deg, #f4f8fd, #fff);
    border: 1px solid var(--sm-linea); border-left: 4px solid var(--sm-primario); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
}
.contrib-bar .avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sm-primario); color: #fff; font-size: 20px; flex-shrink: 0; }
.contrib-bar small { display: block; font-size: 10.5px; color: var(--sm-muted); text-transform: uppercase; letter-spacing: .7px; font-weight: 700; }
.contrib-bar b { font-size: 16px; font-family: var(--sm-titulos); }
.contrib-bar .sp { flex: 1; }

.nav-ficha { background: var(--sm-hover); border-radius: 10px; padding: 4px; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; border: 1px solid var(--sm-linea); }
.nav-ficha .nav-link { color: var(--sm-muted); font-weight: 600; font-size: 13px; border-radius: 8px; padding: 8px 14px; }
.nav-ficha .nav-link.active { background: var(--sm-panel); color: var(--sm-primario); box-shadow: 0 1px 4px #0b1d331f; }
.nav-ficha .nav-link i { margin-right: 4px; }

.interruptor { display: flex; align-items: center; gap: 8px; background: var(--sm-hover); border: 1px solid var(--sm-linea); border-radius: 8px; padding: 7px 10px; margin: 0; cursor: pointer; font-size: 13px; color: var(--sm-fg); font-weight: 600; }
.interruptor .form-check-input { margin: 0; }

.ultimo-pago { background: #e3f5ea; color: #176d3c; font-weight: 700; text-align: center; border-radius: 8px; padding: 7px; }
.ultimo-pago.atrasado { background: #fdecea; color: #a5281b; }

.aviso-bloqueo { background: #fdecea; color: #a5281b; border: 1px solid #f5c2bc; border-radius: 8px; padding: 8px 12px; font-weight: 600; font-size: 13px; }

/* Visión integral */
.vision-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.vision-modulo { border: 1px solid var(--sm-linea); border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: center; background: var(--sm-panel); cursor: pointer; transition: .15s; text-decoration: none; color: var(--sm-fg); }
.vision-modulo:hover { border-color: var(--sm-primario); color: var(--sm-fg); }
.vision-modulo i { width: 36px; height: 36px; border-radius: 10px; background: var(--sm-sel); color: var(--sm-primario); display: grid; place-items: center; font-size: 17px; }
.vision-modulo.sin i { background: #eceff3; color: #9aa6b5; }
.vision-modulo b { font-size: 13px; display: block; }
.vision-modulo small { font-size: 11.5px; }
.vision-seccion { border: 1px solid var(--sm-linea); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.vision-seccion > h4 { background: var(--sm-barra-2); color: #fff; font-size: 14px; margin: 0; padding: 9px 14px; }
.vision-seccion .cuerpo { padding: 12px 14px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.kv div small { display: block; font-size: 10.5px; color: var(--sm-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.kv div span { font-size: 13.5px; font-weight: 600; }

/* ============================ TABLAS ============================ */

.t-sim { width: 100%; border-collapse: collapse; font-size: 13px; }
.t-sim th, .t-sim td { padding: 7px 9px; border-bottom: 1px solid var(--sm-linea); text-align: left; vertical-align: middle; }
.t-sim th { color: var(--sm-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; background: var(--sm-hover); }
.t-sim .r, table.dataTable td.r, table.dataTable th.r { text-align: right; }
.t-sim tfoot td { font-weight: 700; background: var(--sm-total-bg); }
.t-sim tr.sub-total td { background: var(--sm-hover); font-weight: 600; }

.tabla-permisos .fila-grupo td { background: var(--sm-barra-2); color: #fff; font-size: 11px; letter-spacing: 1px; font-weight: 700; padding: 5px 10px; }
.tabla-permisos .especiales { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-accion { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; background: #fdf3dc; border: 1px solid #f0dca8; color: #6b4a00; border-radius: 20px; padding: 2px 9px; margin: 0; cursor: pointer; font-weight: 600; }
.chip-accion .form-check-input { margin: 0; width: 13px; height: 13px; }

/* ============================ CAJA ============================ */

.total-caja { background: var(--sm-barra); color: #fff; border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.total-caja small { color: #9fb5d3; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; font-weight: 700; }
.total-caja b { font-family: var(--sm-titulos); font-size: 30px; color: #fff; }
.liq-card { border: 1px solid var(--sm-linea); border-radius: 12px; padding: 12px 14px; cursor: pointer; background: var(--sm-panel); transition: .15s; position: relative; }
.liq-card:hover { border-color: var(--sm-primario); }
.liq-card.sel { border-color: var(--sm-primario); background: #f2f7fe; box-shadow: inset 0 0 0 1px var(--sm-primario); }
.liq-card .monto { font-family: var(--sm-titulos); font-size: 19px; color: var(--sm-verde); font-weight: 600; }
.liq-card .check { position: absolute; top: 10px; right: 12px; font-size: 18px; color: var(--sm-primario); display: none; }
.liq-card.sel .check { display: block; }

/* ============================ LOGIN ============================ */

.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login .lado-marca {
    background: radial-gradient(circle at 80% 15%, #c99a2e33 0 160px, transparent 161px), radial-gradient(circle at 10% 90%, #ffffff10 0 220px, transparent 221px), linear-gradient(150deg, var(--sm-barra) 20%, var(--sm-primario-osc));
    color: #fff; padding: 44px 52px; display: flex; flex-direction: column; justify-content: space-between;
}
.login .lado-marca .marca { display: flex; align-items: center; gap: 12px; font-family: var(--sm-titulos); font-size: 22px; font-weight: 600; }
.login .lado-marca .marca .escudo { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--sm-acento), #e6c56a); color: var(--sm-barra); display: grid; place-items: center; font-size: 22px; overflow: hidden; }
.login .lado-marca .marca .escudo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.login .lado-marca .marca span { color: var(--sm-acento); }
.login .lado-marca h1 { font-size: 44px; line-height: 1.08; margin: 0 0 14px; max-width: 520px; }
.login .lado-marca p { color: #c8d6ea; max-width: 460px; font-size: 15px; }
.login .lado-marca .puntos { display: flex; gap: 18px; flex-wrap: wrap; color: #9fb5d3; font-size: 12.5px; }
.login .lado-marca .puntos i { color: var(--sm-acento); margin-right: 5px; }
.login .lado-form { display: flex; align-items: center; justify-content: center; padding: 30px; background: var(--sm-bg); }
.login .caja-login { background: var(--sm-panel); border-radius: 18px; padding: 34px 32px; width: 100%; max-width: 400px; box-shadow: 0 20px 50px #0b1d331f; border: 1px solid var(--sm-linea); }
.login .caja-login small.eyebrow { color: var(--sm-primario); font-weight: 800; letter-spacing: 1.4px; font-size: 11px; }
.login .caja-login h2 { font-size: 26px; margin: 4px 0 4px; }
.login .caja-login p { color: var(--sm-muted); font-size: 13.5px; margin-bottom: 20px; }
.login .caja-login .form-control { padding: 10px 12px; }
.login .caja-login .btn-primary { width: 100%; padding: 11px; margin-top: 14px; font-size: 15px; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login .lado-marca { padding: 26px; } .login .lado-marca h1 { font-size: 28px; } .login .lado-marca .puntos { display: none; } }

@media print {
    aside.lado, .top, .no-imprimir, .pie-copy { display: none !important; }
    main.vista { padding: 0; }
    body { background: #fff; }
}

/* ============================ AYUDA ============================ */

.ayuda-flotante {
    position: fixed; right: 20px; bottom: 20px; z-index: 1040; width: 50px; height: 50px; border-radius: 50%; border: 0;
    background: linear-gradient(135deg, var(--sm-acento), #e6c56a); color: var(--sm-barra); font-size: 24px; font-weight: 700;
    box-shadow: 0 8px 22px #0b1d3340; display: grid; place-items: center; transition: transform .15s;
}
.ayuda-flotante:hover { transform: scale(1.08); }
.ayuda-panel { width: 430px !important; }
.ayuda-panel .offcanvas-header { background: var(--sm-barra); color: #fff; }
.ayuda-panel .offcanvas-title { font-size: 17px; }
.ayuda-panel .ayuda-grupo { color: var(--sm-acento); text-transform: uppercase; font-size: 10.5px; letter-spacing: 1px; font-weight: 700; }
.ayuda-panel .ayuda-buscar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--sm-linea); background: var(--sm-hover); }
.ayuda-panel .ayuda-buscar input { border: 0; background: transparent; outline: 0; flex: 1; font-size: 13.5px; }
.ayuda-panel h6 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--sm-primario-osc); margin: 14px 0 6px; font-weight: 700; }
.ayuda-panel .ayuda-resumen { font-size: 14px; background: var(--sm-sel); border-radius: 10px; padding: 10px 12px; }
.ayuda-panel .ayuda-pasos { padding-left: 20px; font-size: 13.5px; }
.ayuda-panel .ayuda-pasos li { margin-bottom: 6px; }
.ayuda-panel .ayuda-consejos { padding-left: 18px; font-size: 13px; color: #5a4a1a; }
.ayuda-panel .ayuda-pie { border-top: 1px solid var(--sm-linea); padding: 10px 14px; background: var(--sm-hover); font-size: 13px; }
.tip-ayuda { pointer-events: none; }
.tip-ayuda .tooltip-inner { background: var(--sm-barra); max-width: 280px; text-align: left; font-size: 12.5px; padding: 7px 10px; border-left: 3px solid var(--sm-acento); }
@media print { .ayuda-flotante { display: none !important; } }