html, body {
    height: 100%;
    margin: 0;
}

/* ---------- Pantalla de acceso ---------- */

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #1f2a44 0%, #354867 100%);
}

.login-card {
    width: 100%;
    max-width: 25rem;
    padding: 2rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .28);
}

.login-title {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: .08em;
    text-align: center;
}

.login-subtitle {
    margin: .25rem 0 1.5rem;
    text-align: center;
    color: #6c757d;
    font-size: .875rem;
}

.login-form {
    margin-bottom: 1rem;
}

.login-submit {
    width: 100%;
}

.login-error {
    margin-bottom: 1rem;
    padding: .625rem .75rem;
    border-radius: .375rem;
    background: #f8d7da;
    color: #842029;
    font-size: .875rem;
}

.validation-message {
    display: block;
    margin-top: .25rem;
    color: #dc3545;
    font-size: .8125rem;
}

/* ---------- Shell autenticado ---------- */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: #1f2a44;
    color: #fff;
}

.app-brand {
    font-weight: 600;
    letter-spacing: .08em;
}

.app-identity {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.app-tenant {
    margin-left: 1rem;
    font-size: .875rem;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

.app-account {
    font-size: .75rem;
    opacity: .75;
}

.app-user {
    font-size: .875rem;
}

.app-content {
    flex: 1;
    padding: 1.5rem;
}

/* ---------- Errores no controlados ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: .6rem 1.25rem .7rem 1.25rem;
    background: #ffffe0;
    box-shadow: 0 -.0625rem .125rem rgba(0, 0, 0, .25);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: .75rem;
    right: .75rem;
    cursor: pointer;
}

/* ---------- Encabezado de pagina ---------- */

.pagina-encabezado {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pagina-encabezado h1 {
    margin: 0;
    font-size: 1.5rem;
}

.pagina-contexto,
.texto-tenue {
    color: #52514e;
    font-size: .875rem;
}

/* ---------- Navegacion ---------- */

.app-nav {
    display: flex;
    gap: .25rem;
    margin-left: 1.5rem;
}

.app-nav-liga {
    padding: .35rem .75rem;
    border-radius: .375rem;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: .875rem;
}

.app-nav-liga:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.app-nav-liga.active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* ---------- Indicadores del tablero ----------
   Paleta de estado reservada: bien / advertencia / grave / critico. Nunca se usa
   para series de datos, y siempre va acompanada de icono y etiqueta, porque en
   fondo claro advertencia y grave quedan por debajo de 3:1 de contraste. */

.kpi-fila {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: .75rem;
}

.kpi {
    padding: .875rem 1rem;
    border: 1px solid #e3e2df;
    border-left: 3px solid #c9c8c4;
    border-radius: .5rem;
    background: #fcfcfb;
}

.kpi-etiqueta {
    color: #52514e;
    font-size: .8125rem;
}

.kpi-valor {
    /* Cifras proporcionales a proposito: tabular-nums separa de mas en display. */
    margin-top: .125rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: #0b0b0b;
}

.kpi-estado {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: .375rem;
    font-size: .8125rem;
    font-weight: 500;
}

.kpi-descripcion {
    margin-top: .375rem;
    color: #52514e;
    font-size: .75rem;
}

.kpi-critico { border-left-color: #d03b3b; }
.kpi-critico .kpi-estado { color: #b02f2f; }

.kpi-grave { border-left-color: #ec835a; }
.kpi-grave .kpi-estado { color: #a8542f; }

.kpi-advertencia { border-left-color: #fab219; }
.kpi-advertencia .kpi-estado { color: #8a6100; }

.kpi-bien { border-left-color: #0ca30c; }
.kpi-bien .kpi-estado { color: #0a7a0a; }

/* ---------- Tablero ---------- */

.tablero-encabezado {
    flex-wrap: wrap;
}

.tablero-encabezado .barra-acciones {
    align-self: center;
}

/* Resumen de una linea: lo primero que se lee al entrar. */
.tablero-estado {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border-left: 4px solid;
    font-weight: 500;
}

.tablero-estado-bien { border-color: #0ca30c; background: #eaf6ea; color: #0a5a0a; }
.tablero-estado-advertencia { border-color: #fab219; background: #fff6de; color: #6b4b00; }
.tablero-estado-grave { border-color: #ec835a; background: #fdeee7; color: #8a4526; }
.tablero-estado-critico { border-color: #d03b3b; background: #fbe9e9; color: #8f2626; }

.tablero-seccion {
    margin-bottom: 1.75rem;
}

.tablero-seccion h2 {
    margin: 0 0 .625rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #52514e;
}

/* Marcador de carga con la forma del indicador: el tablero no brinca al llegar
   las cifras. */
.kpi-cargando {
    height: 7.25rem;
    border: 1px solid #e3e2df;
    border-radius: .5rem;
    background: linear-gradient(90deg, #f2f1ee 25%, #e9e8e4 50%, #f2f1ee 75%);
    background-size: 200% 100%;
    animation: kpi-pulso 1.4s ease-in-out infinite;
}

@keyframes kpi-pulso {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .kpi-cargando { animation: none; }
}

/* ---------- Inicio de configuracion ---------- */

.config-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.config-tarjeta {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 1rem;
    border: 1px solid #e3e2df;
    border-radius: .5rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.config-tarjeta:hover {
    border-color: #1f2a44;
    box-shadow: 0 .125rem .5rem rgba(31, 42, 68, .12);
}

.config-tarjeta-titulo {
    font-weight: 600;
    color: #1f2a44;
}

.config-tarjeta-texto {
    color: #52514e;
    font-size: .8125rem;
}

.config-tarjeta-estado {
    margin-top: auto;
    padding-top: .375rem;
    font-size: .8125rem;
    font-weight: 500;
}

.config-tarjeta-estado.bien { color: #0a7a0a; }
.config-tarjeta-estado.pendiente { color: #8a6100; }

/* ---------- Errores del API ---------- */

.api-error {
    margin-bottom: 1rem;
    padding: .625rem .75rem;
    border-radius: .375rem;
    background: #f8d7da;
    color: #842029;
    font-size: .875rem;
}

.api-error-campos {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
}

.api-exito {
    margin-bottom: 1rem;
    padding: .625rem .75rem;
    border-radius: .375rem;
    background: #d1e7dd;
    color: #0a3622;
    font-size: .875rem;
}

.aviso-obligatorio {
    margin-bottom: 1rem;
    padding: .625rem .75rem;
    border-radius: .375rem;
    background: #fff3cd;
    color: #664d03;
    font-size: .875rem;
}

.campo-ayuda {
    margin-top: .25rem;
    color: #52514e;
    font-size: .75rem;
}

/* ---------- Rejillas y paneles ---------- */

.barra-herramientas {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}

.buscador {
    max-width: 22rem;
    width: 100%;
}

.rejilla {
    background: #fff;
}

.panel {
    padding: 1rem;
    background: #fff;
}

.form-angosto {
    max-width: 28rem;
}

/* ---------- Detalle de expediente ---------- */

.detalle {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem 1.5rem;
    margin: 0;
}

.detalle-par dt {
    color: #52514e;
    font-size: .75rem;
}

.detalle-par dd {
    margin: .125rem 0 0;
    font-size: .9375rem;
}

/* ---------- Expediente del cliente ---------- */

/* Ficha: quien es el cliente y en que estado esta, antes que cualquier detalle. */
.expediente-ficha {
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e3e2df;
    border-radius: .5rem;
    background: #fff;
}

.ficha-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.ficha-cabeza h1 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
}

.insignias {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

/* Insignia de estado: siempre con texto; el color solo refuerza. */
.insignia {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .625rem;
    border: 1px solid #d6d5d1;
    border-radius: 1rem;
    background: #f2f1ee;
    color: #3a3936;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
}

.insignia-bien { border-color: #9fd49f; background: #eaf6ea; color: #0a5a0a; }
.insignia-advertencia { border-color: #f3d27a; background: #fff6de; color: #6b4b00; }
.insignia-grave { border-color: #f1b69c; background: #fdeee7; color: #8a4526; }
.insignia-critico { border-color: #eaa9a9; background: #fbe9e9; color: #8f2626; }

.ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .75rem 1.5rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #eeedea;
}

.ficha-datos dt {
    color: #52514e;
    font-size: .75rem;
}

.ficha-datos dd {
    margin: .125rem 0 0;
    font-size: .9375rem;
    font-weight: 500;
}

/* Tipo de cliente trae descripciones largas: ocupa dos columnas. */
.ficha-dato-ancho {
    grid-column: span 2;
}

.dato-vencido {
    color: #b02f2f;
}

.expediente-pestanas {
    margin-top: .5rem;
}

.ficha-panel {
    border: 1px solid #e3e2df;
    border-top: none;
    border-radius: 0 0 .5rem .5rem;
}

.ficha-seccion + .ficha-seccion {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eeedea;
}

.ficha-seccion h3 {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #52514e;
}

/* Lista vacia a proposito, no rota. */
.estado-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: .5rem 0;
    padding: 2rem 1rem;
    border: 1px dashed #d6d5d1;
    border-radius: .5rem;
    background: #fcfcfb;
    color: #52514e;
    font-size: .875rem;
}

.estado-vacio-icono {
    color: #9a9894;
}

@media (max-width: 40rem) {
    .ficha-dato-ancho {
        grid-column: auto;
    }
}

/* ---------- Catalogos ---------- */

.catalogos-disposicion {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) 1fr;
    gap: 1rem;
    align-items: start;
}

.catalogos-listbox {
    height: 32rem;
}

.catalogos-titulo {
    margin: 0 0 .75rem;
    font-size: 1.125rem;
}

/* ---------- Formularios de alta y edicion ---------- */

.acciones-formulario {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}

.barra-acciones {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

/* Captura larga (cliente): los rotulos van arriba del campo y el ancho se
   limita. A 1800px un nombre que cruza media pantalla se lee peor, no mejor. */
.form-captura {
    max-width: 76rem;
}

.requerido::after,
.marca-requerido {
    color: #b02f2f;
    font-weight: 600;
}

.requerido::after {
    content: " *";
}

.nota-obligatorio {
    margin: 0 0 .75rem;
    color: #52514e;
    font-size: .8125rem;
}

/* Casillas con su texto al lado, en un renglon que se parte si no cabe. */
.casillas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    padding: .25rem 0;
}

/* Comparte renglon con campos de rotulo arriba: baja a la altura de la caja. */
.casillas-alineadas {
    padding-top: 1.75rem;
}

.casilla-bajo-campo {
    margin-top: .375rem;
}

/* En las capturas largas los botones siguen a la vista al desplazarse: en la
   pestana del subtipo con domicilio, Guardar quedaba a dos pantallas. */
.form-captura .acciones-formulario {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: .75rem 0;
    border-top: 1px solid #e3e2df;
    background: #fff;
}

/* El resumen de faltantes va encima de los botones, dentro de la barra. */
.acciones-apiladas {
    flex-direction: column;
    align-items: stretch;
}

.acciones-apiladas .api-error,
.acciones-apiladas .aviso-obligatorio {
    margin-bottom: 0;
}

.acciones-botones {
    display: flex;
    gap: .5rem;
}

.campo-aviso {
    margin-top: .25rem;
    padding: .375rem .5rem;
    border-radius: .25rem;
    background: #fff3cd;
    color: #664d03;
    font-size: .75rem;
}

.confirmar-mensaje {
    margin: 0 0 .5rem;
}

.pista {
    margin-top: .5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

/* ---------- Barra superior: identidad y salida ----------
   Boton propio y no un DxButton de estilo liga: sobre el azul marino de la
   barra, el color de liga del tema queda ilegible. */

.app-usuario {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.app-salir {
    padding: .35rem .75rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: .375rem;
    background: transparent;
    color: #fff;
    font-size: .8125rem;
    font-family: inherit;
    cursor: pointer;
}

.app-salir:hover:not(:disabled) {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

.app-salir:disabled {
    opacity: .6;
    cursor: default;
}

/* ---------- Configuracion ---------- */

.config-disposicion {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.config-titulo {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #52514e;
}

.config-menu nav {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.config-liga {
    padding: .5rem .75rem;
    border-radius: .375rem;
    color: #0b0b0b;
    text-decoration: none;
    font-size: .875rem;
}

.config-liga:hover {
    background: #eeedea;
}

.config-liga.active {
    background: #1f2a44;
    color: #fff;
}

.config-contenido h1 {
    margin-top: 0;
}

.liga-accion {
    color: #1f2a44;
    font-weight: 600;
}

.mt-2 {
    margin-top: .5rem;
}

/* ---------- Carga masiva de catalogos ---------- */

.carga-masiva {
    margin-bottom: 1rem;
    border: 1px solid #e3e2df;
    border-radius: .5rem;
}

.carga-texto {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ---------- Roles y permisos ---------- */

.roles-disposicion {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) 1fr;
    gap: 1rem;
    align-items: start;
}

.roles-lista {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.rol-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    padding: .5rem .75rem;
    border: 1px solid #e3e2df;
    border-radius: .375rem;
    background: #fff;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.rol-item:hover {
    border-color: #c9c8c4;
}

.rol-item.activo {
    border-color: #1f2a44;
    box-shadow: inset 3px 0 0 #1f2a44;
}

.rol-clave {
    font-weight: 600;
    font-size: .875rem;
}

.rol-nombre,
.rol-etiqueta {
    font-size: .75rem;
    color: #52514e;
}

.rol-etiqueta {
    padding: 0 .375rem;
    border-radius: .25rem;
    background: #eeedea;
}

.permisos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.permiso-grupo h3 {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    color: #52514e;
}

.permiso-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.permiso-chip {
    padding: .125rem .5rem;
    border-radius: 1rem;
    background: #eeedea;
    font-size: .75rem;
}

.valor-solo-lectura {
    display: inline-block;
    padding: .35rem 0;
    color: #52514e;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8125rem;
}

.catalogo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
}

.catalogo-conteo,
.catalogo-vacio {
    font-size: .75rem;
    padding: 0 .375rem;
    border-radius: .75rem;
}

.catalogo-conteo {
    background: #eeedea;
    color: #52514e;
}

/* Un catalogo vacio rompe altas por llave foranea: se marca. */
.catalogo-vacio {
    background: #fff3cd;
    color: #664d03;
    font-weight: 600;
}

.detalle-usuario {
    margin-top: 1rem;
    border: 1px solid #e3e2df;
    border-radius: .5rem;
}

/* ---------- Capturas en panel (Actividades Vulnerables, datos PEP) ---------- */

/* Panel de captura o de detalle con marco, separado de lo que tiene alrededor. */
.panel-marco {
    margin: 1rem 0;
    border: 1px solid #e3e2df;
    border-radius: .5rem;
}

/* Un valor que se muestra y no se captura: texto, no una caja apagada. */
.valor-fijo {
    padding: .35rem 0;
    font-weight: 600;
    color: #1f2a44;
}

/* Lo que dice la ley del elemento elegido, para confirmarlo antes de guardar. */
.resumen-ley {
    padding: .75rem 1rem;
    border-left: 3px solid #1f2a44;
    border-radius: .25rem;
    background: #f7f7f5;
}

.texto-ley {
    max-width: 75ch;
    margin: 0 0 .5rem;
    color: #3a3936;
    font-size: .875rem;
    line-height: 1.45;
}

/* Filtro a la derecha de la barra de herramientas. */
.barra-derecha {
    display: flex;
    align-items: center;
    margin-left: auto;
    font-size: .875rem;
}

/* Vista de la lista de clientes: Clientes / Prospectos / Todos. */
.segmentos {
    display: inline-flex;
    border: 1px solid #c9c8c3;
    border-radius: .375rem;
    overflow: hidden;
}

.segmento {
    padding: .3rem .8rem;
    border: 0;
    border-right: 1px solid #c9c8c3;
    background: #fff;
    color: #3a3936;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.segmento:last-child {
    border-right: 0;
}

.segmento:hover {
    background: #f2f1ee;
}

.segmento-activo,
.segmento-activo:hover {
    background: #1f2a44;
    color: #fff;
}

/* Alta por pasos: las pestanas que aun no se abren. */
.pestana-cerrada {
    opacity: .45;
    cursor: not-allowed;
}

.pasos-alta {
    margin: 0 0 .75rem;
    color: #52514e;
    font-size: .875rem;
}

.cliente-buscador {
    display: grid;
    gap: .375rem;
}

.campo-etiqueta {
    display: block;
    margin: .5rem 0 .25rem;
    font-size: .875rem;
}