/*
  Reskin de marca para el portal publico del cliente (raiz "/").
  Basado en el maquetado real (PDF) del cliente: fondo claro/blanco,
  texto oscuro casi negro, tarjeta de agendar con degradado dorado/naranja
  y botones blancos encima, linea de tiempo con circulos verde/dorado/gris.

  Nota: una primera version de este archivo uso un tema OSCURO tomado de
  un HTML de ejemplo distinto dentro del mismo template -- no coincidia
  con el maquetado aprobado. Esta version usa el maquetado como fuente
  de verdad, con colores muestreados directo del PDF.
*/
.theme-notaria {
    --adminuiux-theme-1: #1B3A6B;
    --adminuiux-theme-1-hover: #234a87;
    --adminuiux-theme-1-active: #2c5aa0;
    --adminuiux-theme-1-rgb: 27, 58, 107;
    --adminuiux-theme-1-text: #fff;
    --adminuiux-theme-2: #2c5aa0;
    --adminuiux-theme-2-rgb: 44, 90, 160;
    --adminuiux-theme-2-text: #fff;
    --adminuiux-theme-accent-1: #D3963F;
    --adminuiux-theme-accent-1-hover: #DFA958;
    --adminuiux-theme-accent-1-active: #E8BA73;
    --adminuiux-theme-accent-1-rgb: 211, 150, 63;
    --adminuiux-theme-accent-1-text: #241804;
    --adminuiux-theme-accent-2: #E8D2A0;
    --adminuiux-theme-accent-2-rgb: 232, 210, 160;
    --adminuiux-theme-accent-2-text: #241804;
    --adminuiux-bg-1: #ffffff;
    --adminuiux-bg-2: #ffffff;
    --bs-body-bg: var(--adminuiux-bg-1);
}

.maxwidth-620 {
    max-width: 620px;
}

.maxwidth-460 {
    max-width: 460px;
}

.maxwidth-700 {
    max-width: 700px;
}

.maxwidth-960 {
    max-width: 960px;
}

/* En pantallas anchas el header con logo pegado a la izquierda y telefono
   pegado a la derecha deja un vacio enorme en medio. Alineamos el header
   al mismo ancho que la columna de contenido para que se lea como una
   sola pieza, no como una barra completa vacia. */
.container-header {
    max-width: 700px;
    margin-inline: auto;
}

body.theme-notaria {
    background: var(--adminuiux-bg-1);
    min-height: 100vh;
}

.btn-theme-solido.btn-theme {
    background-color: var(--adminuiux-theme-1) !important;
    border-color: var(--adminuiux-theme-1) !important;
    color: #fff !important;
}
.btn-theme-solido.btn-theme:hover {
    background-color: var(--adminuiux-theme-1-hover) !important;
    border-color: var(--adminuiux-theme-1-hover) !important;
}

.dia-btn.activo {
    background: #ffffff !important;
    color: var(--adminuiux-theme-1) !important;
    border-color: #ffffff !important;
}

.hora-btn.activo {
    background: var(--adminuiux-theme-1) !important;
    color: #fff !important;
    border-color: var(--adminuiux-theme-1) !important;
}

/* Tarjeta "Agenda tu primera asesoría" -- degradado dorado/naranja con
   botones blancos encima, tal como el maquetado. */
.card-agenda-gratis {
    background: linear-gradient(135deg, #D9A15E 0%, #EFCFA2 100%);
    border: none;
    border-radius: var(--bs-border-radius-lg, 1rem);
    color: #4a3418;
}

.card-agenda-gratis h4 {
    color: #3a2a10;
}

.text-card-agenda {
    color: #5a4526;
}

.dia-btn {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.btn-confirmar-agenda {
    background: #ffffff;
    color: #241804;
    border: none;
    font-weight: 600;
}

.btn-confirmar-agenda:hover {
    background: #fdf5ea;
    color: #241804;
}

.paso-linea {
    border-left: 2px solid #E5E7EB;
    margin-left: 15px;
    padding: 0 0 0 25px;
    position: relative;
}

.paso-linea .marker {
    position: absolute;
    left: -16px;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: #E5E7EB;
    color: #6B7280;
    border: none;
}

.paso-linea .marker.marker-hecho {
    background: #8BC63F;
    color: #fff;
}

.paso-linea .marker.marker-actual {
    background: var(--adminuiux-theme-accent-1);
    color: #fff;
}

.paso-linea:last-child {
    border-left-color: transparent;
}

/* Tres razones simples para confiar, en la primera visita -- todavia no
   hay tramite que mostrar, asi que no va un avance/timeline aqui. */
.beneficio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 10px;
    height: 100%;
}

.beneficio-item .icono {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--adminuiux-theme-1-rgb), 0.1);
    color: var(--adminuiux-theme-1);
}

.beneficio-item .fw-semibold {
    color: #3a3a3a;
}

/* Login: inputs tipo pastilla, botones con degradado -- igual al maquetado. */
.input-pill {
    border-radius: 999px;
    padding: 0.85rem 1.5rem;
    border: 1px solid #D8DEE8;
}

.input-pill:focus {
    border-color: var(--adminuiux-theme-1);
    box-shadow: 0 0 0 0.2rem rgba(var(--adminuiux-theme-1-rgb), 0.15);
}

.btn-gradiente {
    border: none;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.9rem 1.5rem;
}

.btn-login-gradiente {
    background: linear-gradient(90deg, #1F3894 0%, #0072BB 100%);
}

.btn-login-gradiente:hover {
    color: #fff;
    filter: brightness(1.05);
}

.btn-crear-cuenta-gradiente {
    background: linear-gradient(90deg, #D49E62 0%, #E6C39D 100%);
}

.btn-crear-cuenta-gradiente:hover {
    color: #fff;
    filter: brightness(1.05);
}

.toggle-password {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9AA3B2;
    padding: 0;
}

/* ===== Shell autenticado del cliente (dashboard, solicitudes, etc.) =====
   Sidebar simple en escritorio, barra inferior en móvil -- nada del
   sidebar denso/con dropdowns del panel de admin, solo los 6 accesos que
   ya tiene el cliente. Header a todo lo ancho (sin centrar en una columna
   angosta como Inicio/Login) para que el logo quede alineado con el
   sidebar, igual que el maquetado. */
.cliente-header {
    border-bottom: 1px solid #ECEEF2;
}

.cliente-header-inner {
    display: flex;
    align-items: center;
    padding-inline: 20px;
    gap: 14px;
}

.cliente-hamburger {
    background: none;
    border: none;
    color: #6B7280;
    padding: 4px;
    display: flex;
    align-items: center;
}

.cliente-icon-btn {
    background: none;
    border: none;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cliente-icon-btn:hover {
    color: var(--adminuiux-theme-1);
}

.cliente-body {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 72px);
}

.cliente-sidebar {
    width: 220px;
    flex: none;
    position: sticky;
    top: 72px;
    align-self: stretch;
    border-right: 1px solid #ECEEF2;
    padding: 24px 12px;
    transition: margin-left .2s ease, opacity .2s ease;
}

#clienteWrap.sidebar-collapsed .cliente-sidebar {
    margin-left: -220px;
    opacity: 0;
    pointer-events: none;
}

.cliente-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.cliente-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 999px;
    color: #4a4a4a;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.cliente-nav-link:hover {
    background: #F4F6F9;
    color: #1a1a1a;
}

.cliente-nav-link.active {
    background: linear-gradient(90deg, #0049F0 0%, #54C2D3 100%);
    color: #fff;
    font-weight: 700;
    margin: 0 -12px;
    padding: 11px 14px 11px 22px;
    border-left: 4px solid var(--adminuiux-theme-accent-1);
    border-radius: 0 999px 999px 0;
}

.cliente-nav-link i {
    width: 18px;
    height: 18px;
}

.cliente-main {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
}

/* Barra inferior movil: circulos con borde, igual al maquetado (no la
   pastilla con degradado que usaba la primera version). */
.cliente-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 14px 6px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(90deg, #1D3B95 0%, #0073C4 100%);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -6px 20px rgba(27, 58, 107, 0.25);
}

.cliente-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    flex: 1;
    text-align: center;
}

.cliente-bottom-nav a.active,
.cliente-bottom-nav a:hover {
    color: #fff;
}

.cliente-bottom-nav .icono {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cliente-bottom-nav a.active .icono {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.cliente-bottom-nav i {
    width: 16px;
    height: 16px;
}

@media (max-width: 991.98px) {
    .cliente-header-inner {
        padding-inline: 14px;
    }
}

@media (max-width: 991.98px) {
    .cliente-main {
        padding: 16px 16px 100px;
    }
}

.cliente-breadcrumb {
    display: flex;
    list-style: none;
    gap: 6px;
    padding: 0;
    margin: 0;
    color: #9AA3B2;
    font-size: 13px;
}

.cliente-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    color: #C7CDD6;
}

/* Tarjetas de estadisticas del dashboard -- blancas, icono+etiqueta
   arriba, el numero grande en su propia fila abajo (no al lado del
   icono), igual al maquetado. */
.stat-card {
    background: #fff;
    border: 1px solid #ECEEF2;
    border-radius: 1rem;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    width: 100%;
}

.stat-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-card .icono {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--adminuiux-theme-1-rgb), 0.1);
    color: var(--adminuiux-theme-1);
    flex: none;
}

.stat-card .valor {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.stat-card-titulo {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.stat-card .etiqueta {
    color: #6B7280;
    font-size: 13px;
}

/* Tiles de colores -- degradados especificos por tipo, igual al maquetado. */
.tile-color {
    border: none;
    border-radius: 1rem;
    padding: 18px;
    color: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tile-color .valor {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.tile-color .etiqueta {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.95;
}

.tile-naranja { background: linear-gradient(135deg, #D9A15E 0%, #F0D3B0 100%); }
.tile-azul { background: linear-gradient(135deg, #0049F0 0%, #54C2D3 100%); }
.tile-marino { background: linear-gradient(135deg, #1D3B95 0%, #0073C4 100%); }
.tile-verde { background: linear-gradient(135deg, #026F2C 0%, #01AB17 100%); }

/* Accesos rapidos: degradado azul marino diagonal (mismo que
   .tile-marino), icono y texto en linea, como el maquetado. */
.acceso-tile {
    background: linear-gradient(135deg, #1E338C 0%, #006EBE 100%);
    border: none;
    border-radius: 0.85rem;
    color: #fff;
    text-decoration: none;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    transition: filter .15s ease;
}

.acceso-tile:hover {
    filter: brightness(1.08);
    color: #fff;
}

.acceso-tile i {
    width: 18px;
    height: 18px;
    flex: none;
}

.acceso-tile .etiqueta {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
}

/* Loader de marca: logo en vez del spinner generico, mientras carga la
   pagina (Vue tarda un momento en montar por el fetch de traducciones). */
.cliente-branded-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cliente-branded-loader img {
    max-width: 160px;
    width: 40%;
    animation: cliente-loader-pulso 1.4s ease-in-out infinite;
}

@keyframes cliente-loader-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.94); }
}

@media (max-width: 575.98px) {
    .stat-card {
        padding: 14px;
    }
    .stat-card-top {
        gap: 10px;
    }
    .stat-card .icono {
        width: 38px;
        height: 38px;
    }
    .stat-card-titulo {
        font-size: 13px;
    }
    .stat-card .etiqueta {
        font-size: 11px;
    }
}

/* Recuadro con info corta del servicio elegido en el select de Inicio,
   con liga a la ficha completa (imagen/descripcion/video). */
.servicio-info-box {
    background: #F7F8FA;
    border: 1px solid #ECEEF2;
    border-radius: 0.85rem;
    padding: 14px 16px;
}

.servicio-info-box .etiqueta {
    color: #6B7280;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Catalogo de servicios (/servicios) -- cards con imagen de fondo si el
   servicio tiene imagen_principal, o un degradado de marca como respaldo
   (mismos degradados que los tiles del dashboard, para verse consistente). */
.servicio-card {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 260px;
    border-radius: 1.4rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    padding: 18px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.servicio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px rgba(27, 58, 107, 0.22);
    color: #fff;
}

.servicio-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.servicio-card-0 { background-image: linear-gradient(150deg, #1E338C 0%, #006EBE 100%); }
.servicio-card-1 { background-image: linear-gradient(150deg, #C97F2E 0%, #EFCFA2 100%); }
.servicio-card-2 { background-image: linear-gradient(150deg, #015C24 0%, #01AB17 100%); }
.servicio-card-3 { background-image: linear-gradient(150deg, #1D3B95 0%, #0073C4 100%); }

/* Patron decorativo de fondo -- icono gigante muy tenue, mismo recurso
   visual que las cards de referencia (forma abstracta detras del texto). */
.servicio-card-watermark {
    position: absolute;
    top: -18px;
    right: -22px;
    width: 130px;
    height: 130px;
    opacity: 0.16;
    transform: rotate(-8deg);
    stroke-width: 1;
    pointer-events: none;
}

.servicio-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.servicio-card-icono {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.servicio-card-icono i {
    width: 20px;
    height: 20px;
}

.servicio-card-precio {
    background: #fff;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.servicio-card-overlay {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 16px;
}

.servicio-card-titulo {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 6px;
}

.servicio-card-desc {
    font-size: 13px;
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.servicio-card-tiempo {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 5px 12px;
}

.servicio-card-tiempo i {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 5px;
}

/* Ficha de un servicio (/servicios/{slug}). */
.servicio-hero {
    min-height: 240px;
    border-radius: 1.4rem;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(150deg, #1B3A6B 0%, #2c5aa0 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.servicio-hero-back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.servicio-hero-back:hover {
    background: #fff;
    color: #1a1a1a;
}

.servicio-hero-overlay {
    width: 100%;
    padding: 24px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
}

.servicio-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4a4a4a;
    background: #F4F6F9;
    border-radius: 999px;
    padding: 7px 14px;
}

.servicio-pill i {
    width: 14px;
    height: 14px;
}

.servicio-pill-precio {
    color: var(--adminuiux-theme-1);
    background: rgba(var(--adminuiux-theme-1-rgb), 0.1);
}

.servicio-zona-badge {
    background: var(--adminuiux-theme-1);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 12px;
}

.servicio-descripcion {
    color: #3a3a3a;
    line-height: 1.7;
}

.servicio-descripcion p {
    margin-bottom: 1rem;
}

/* Mis Solicitudes -- filtros tipo pill, cards en vez de tabla, badges de
   estado con el mismo lenguaje de color que el resto del portal. */
.filtro-pill {
    border: 1px solid #D8DEE8;
    border-radius: 999px;
    background: #fff;
    color: #4a4a4a;
    font-weight: 600;
    padding: 6px 16px;
}

.filtro-pill-activo,
.filtro-pill-activo:hover {
    background: var(--adminuiux-theme-1);
    border-color: var(--adminuiux-theme-1);
    color: #fff;
}

.solicitud-card {
    background: #fff;
    border: 1px solid #ECEEF2;
    border-radius: 1rem;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.solicitud-card-alerta {
    border-color: rgba(211, 150, 63, 0.5);
    background: #FFFBF3;
}

.solicitud-card-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-estado {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.badge-aprobado { background: rgba(2, 111, 44, 0.12); color: #026F2C; }
.badge-pendiente { background: rgba(211, 150, 63, 0.15); color: #96701F; }
.badge-info { background: rgba(27, 58, 107, 0.1); color: var(--adminuiux-theme-1); }
.badge-neutro { background: #EEF0F3; color: #6B7280; }
.badge-rechazado { background: rgba(220, 53, 69, 0.12); color: #C22B3A; }

.card-notario-gradiente {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, #1D3B95 0%, #0073C4 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 16px 20px;
    text-decoration: none;
}

.card-notario-gradiente:hover {
    color: #fff;
    filter: brightness(1.05);
}

.icon-inline {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.card-notario-icono {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Mi Perfil -- avatar circular con nombre al lado, igual al resto de
   headers del portal (icono/foto + texto). */
.perfil-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.perfil-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ECEEF2;
    flex: none;
}

.perfil-avatar-iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adminuiux-theme-1);
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    border: none;
}

/* ===== Tema oscuro =====
   El bundle ya trae el sistema de variables de Bootstrap 5.3 para
   [data-bs-theme="dark"] (--bs-body-bg, --bs-secondary-color, --bs-border-
   color, etc.) -- .form-control, .card, .dropdown-menu, .text-secondary y
   demas clases nativas de Bootstrap ya responden solas. Aqui solo se cubren
   las clases propias de tema-notaria.css que usan colores fijos en vez de
   esas variables. */
/* El bundle deriva --bs-body-bg de --adminuiux-bg-1 (no al reves) -- si
   aqui se referencia var(--bs-body-bg) se crea una dependencia circular
   entre las dos variables y el navegador las invalida a ambas (fondo
   transparente en toda la app, incluidos los modales). Por eso van
   valores literales. */
html[data-bs-theme="dark"] .theme-notaria {
    --adminuiux-bg-1: #0f1420;
    --adminuiux-bg-2: #171d2c;
}

html[data-bs-theme="dark"] .cliente-sidebar {
    border-right-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .cliente-header {
    border-bottom-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .cliente-nav-link {
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .cliente-nav-link:hover {
    background: var(--bs-tertiary-bg);
    color: #fff;
}

html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .solicitud-card,
html[data-bs-theme="dark"] .filtro-pill,
html[data-bs-theme="dark"] .servicio-info-box {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .solicitud-card-alerta {
    background: rgba(211, 150, 63, 0.08);
}

html[data-bs-theme="dark"] .stat-card-titulo,
html[data-bs-theme="dark"] .stat-card .valor,
html[data-bs-theme="dark"] .servicio-descripcion,
html[data-bs-theme="dark"] .filtro-pill {
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .filtro-pill-activo,
html[data-bs-theme="dark"] .filtro-pill-activo:hover {
    color: #fff;
}

html[data-bs-theme="dark"] .beneficio-item .fw-semibold {
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .perfil-avatar {
    border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .input-pill {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .cliente-branded-loader {
    background: var(--bs-body-bg);
}

html[data-bs-theme="dark"] .paso-linea .marker {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Badges/pills de estado -- mas opacidad y texto mas claro para que el
   tinte siga legible sobre una tarjeta oscura en vez de casi negro. */
html[data-bs-theme="dark"] .badge-aprobado { background: rgba(2, 111, 44, 0.25); color: #5fd889; }
html[data-bs-theme="dark"] .badge-pendiente { background: rgba(211, 150, 63, 0.25); color: #f0c375; }
html[data-bs-theme="dark"] .badge-info { background: rgba(84, 194, 211, 0.2); color: #7fd8e8; }
html[data-bs-theme="dark"] .badge-neutro { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
html[data-bs-theme="dark"] .badge-rechazado { background: rgba(220, 53, 69, 0.25); color: #f398a1; }