/* =================================================================
   hestilo.css  ·  FUENTE DE VERDAD DEL DESIGN SYSTEM (UNIDOS CRECEMOS)
   ----------------------------------------------------------------
   Aquí viven los tokens (colores, espaciados, sombras, radios) y
   los componentes base reutilizables (cards, botones, tablas,
   formularios, badges, estados y modo oscuro).

   Reglas:
   - No agregar reglas específicas del shell (sidebar/topbar): eso
     vive en `uc-layout.css`.
   - No agregar CSS de páginas concretas (home, cobros, etc.): eso
     debe quedar dentro de la vista correspondiente o en un archivo
     dedicado bajo `css/views/`.
   - Si un componente se repite entre vistas, traerlo aquí.

   Las hojas se cargan en este orden desde layout.jsp:
     bootstrap → fontawesome → hestilo (este) → main → uc-layout
   ================================================================= */

/* --------------------------------
   1. PALETA Y VARIABLES GLOBALES
   -------------------------------- */

:root{
  /* Colores corporativos base (modo claro) */
  --uc-green-900:#233A2A;
  --uc-green-800:#2A4732;
  --uc-green-700:#33583C;
  --uc-green-600:#3F5F44;
  --uc-accent:#6DAA5B;
  --uc-accent-soft:#E2F5DB;

  /* Más contraste en modo claro */
  --uc-ink:#131713;
  --uc-muted:#4C5A4E;

  --uc-bg:#EDF3ED;
  --uc-bg-alt:#E4ECE4;
  --uc-border:#D7E1D7;

  --uc-surface:#FFFFFF;
  --uc-surface-alt:#F8FAF8;

  --uc-danger:#DC3545;
  --uc-warning:#FFC107;
  --uc-info:#0DCAF0;

  --uc-radius-lg: 1rem;
  --uc-radius-md: .75rem;
  --uc-radius-pill: 999px;

  --uc-shadow-soft: 0 12px 30px rgba(0,0,0,.06);
  --uc-shadow-card: 0 18px 35px rgba(0,0,0,.10);

  --uc-transition-fast: .15s ease;
  --uc-transition-med: .22s ease;
}

/* Modo oscuro: se activa añadiendo la clase .theme-dark al body */
body.theme-dark{
  --uc-green-900:#151F17;
  --uc-green-800:#1D2C21;
  --uc-green-700:#263A2A;
  --uc-green-600:#304937;
  --uc-accent:#8AD06C;
  --uc-accent-soft:#223323;

  --uc-ink:#EAF4EC;
  --uc-muted:#A3B3A3;

  --uc-bg:#0C1110;
  --uc-bg-alt:#101815;
  --uc-border:#263326;

  --uc-surface:#151C17;
  --uc-surface-alt:#1B251D;

  --uc-shadow-soft: 0 18px 40px rgba(0,0,0,.80);
  --uc-shadow-card: 0 22px 50px rgba(0,0,0,.95);
}

/* --------------------------------
   2. BASE GENERAL
   -------------------------------- */

html, body{
  height:100%;
}

body{
  background:var(--uc-bg);
  color:var(--uc-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: background var(--uc-transition-med), color var(--uc-transition-med);
}

/* Enlaces */
a{
  color:var(--uc-green-700);
  text-decoration:none;
  transition: color var(--uc-transition-fast), opacity var(--uc-transition-fast);
}
a:hover{
  color:var(--uc-green-900);
  text-decoration:underline;
}
body.theme-dark a{
  color:var(--uc-accent);
}
body.theme-dark a:hover{
  color:var(--uc-accent);
  opacity:.85;
}

/* Scrollbar suave (solo navegadores que lo soportan) */
body{
  scrollbar-width: thin;
  scrollbar-color: var(--uc-green-700) transparent;
}
body::-webkit-scrollbar{
  width:8px;
}
body::-webkit-scrollbar-track{
  background:transparent;
}
body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18);
  border-radius:999px;
}
body.theme-dark::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
}

/* --------------------------------
   3. CONTENEDORES Y TARJETAS
   -------------------------------- */

.uc-card{
  background:var(--uc-surface);
  border-radius:var(--uc-radius-lg);
  border:1px solid var(--uc-border);
  box-shadow:var(--uc-shadow-soft);
  padding:1.25rem 1.25rem 1rem;
  margin-bottom:1.25rem;
  transition: background var(--uc-transition-med),
              border-color var(--uc-transition-med),
              box-shadow var(--uc-transition-med),
              transform var(--uc-transition-fast);
}
.uc-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--uc-shadow-card);
}
body.theme-dark .uc-card{
  background:var(--uc-surface);
}

.uc-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.9rem;
}
.uc-card-title{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.uc-card-subtitle{
  font-size:.88rem;
  color:var(--uc-muted);
}

.uc-stat-card{
  background:var(--uc-surface-alt);
  border-radius:var(--uc-radius-md);
  border:1px solid var(--uc-border);
  padding:.85rem 1rem;
  margin-bottom:.75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}
body.theme-dark .uc-stat-card{
  background:var(--uc-surface-alt);
}
.uc-stat-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--uc-muted);
}
.uc-stat-value{
  font-size:1.25rem;
  font-weight:700;
}

/* --------------------------------
   4. TIPOGRAFÍA DE SECCIONES
   -------------------------------- */

.uc-section-title{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.35rem;
}
.uc-section-subtitle{
  font-size:.9rem;
  color:var(--uc-muted);
  margin-bottom:.7rem;
}

/* Etiquetas / chips */
.uc-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.15rem .55rem;
  border-radius:var(--uc-radius-pill);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:var(--uc-accent-soft);
  color:var(--uc-green-800);
}
body.theme-dark .uc-tag{
  background:#223323;
  color:var(--uc-accent);
}

/* --------------------------------
   5. BOTONES CORPORATIVOS
   -------------------------------- */

.btn-primary{
  background:var(--uc-green-700);
  border-color:var(--uc-green-700);
  font-weight:600;
  border-radius:var(--uc-radius-md);
  padding:.45rem .95rem;
  box-shadow:0 9px 20px rgba(0,0,0,.20);
  transition:background var(--uc-transition-fast),
             border-color var(--uc-transition-fast),
             transform var(--uc-transition-fast),
             box-shadow var(--uc-transition-fast);
}
.btn-primary:hover{
  background:var(--uc-green-900);
  border-color:var(--uc-green-900);
  transform:translateY(1px);
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.btn-primary:active{
  transform:translateY(1px) scale(.99);
}

.btn-outline-primary{
  border-radius:var(--uc-radius-md);
  border-color:var(--uc-green-700);
  color:var(--uc-green-700);
  font-weight:600;
  padding:.45rem .95rem;
}
.btn-outline-primary:hover{
  background:var(--uc-green-700);
  color:#fff;
}

.btn-uc-soft{
  background:var(--uc-bg-alt);
  border-radius:var(--uc-radius-md);
  border:1px solid var(--uc-border);
  color:var(--uc-ink);
  font-weight:500;
  padding:.4rem .85rem;
}
body.theme-dark .btn-uc-soft{
  background:var(--uc-surface-alt);
  color:var(--uc-ink);
}

/* Botones “píldora” (filtros) */
.uc-pill-btn{
  border-radius:var(--uc-radius-pill);
  border:1px solid var(--uc-border);
  background:transparent;
  padding:.25rem .8rem;
  font-size:.82rem;
  color:var(--uc-muted);
}
.uc-pill-btn.active{
  border-color:var(--uc-green-700);
  background:var(--uc-accent-soft);
  color:var(--uc-green-800);
}
body.theme-dark .uc-pill-btn.active{
  background:#223323;
  color:var(--uc-accent);
}

/* --------------------------------
   6. FORMULARIOS
   -------------------------------- */

.uc-form-section{
  margin-bottom:1.25rem;
}
.uc-form-section-title{
  font-weight:600;
  font-size:.94rem;
  margin-bottom:.25rem;
}
.uc-form-section-help{
  font-size:.8rem;
  color:var(--uc-muted);
  margin-bottom:.6rem;
}

.form-control,
.form-select{
  border-radius:.7rem;
  border:1px solid var(--uc-border);
  background:var(--uc-surface);
  color:var(--uc-ink);
  font-size:.9rem;
  padding:.4rem .75rem;
  transition:border-color var(--uc-transition-fast),
           box-shadow var(--uc-transition-fast),
           background var(--uc-transition-fast),
           color var(--uc-transition-fast);
}
.form-control:focus,
.form-select:focus{
  border-color:var(--uc-green-700);
  box-shadow:0 0 0 .12rem rgba(75,102,51,.28);
  background:#fff;
}
body.theme-dark .form-control,
body.theme-dark .form-select{
  background:var(--uc-surface-alt);
  color:var(--uc-ink);
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus{
  background:var(--uc-surface);
}

.form-label{
  font-weight:600;
  font-size:.85rem;
  margin-bottom:.2rem;
}

.form-text{
  font-size:.78rem;
  color:var(--uc-muted);
}
.invalid-feedback{
  font-size:.8rem;
}

.form-check-input:checked{
  background-color:var(--uc-green-700);
  border-color:var(--uc-green-700);
}

/* --------------------------------
   7. TABLAS (LISTADOS UC)
   -------------------------------- */

.uc-table-wrap{
  background:var(--uc-surface);
  border-radius:var(--uc-radius-lg);
  border:1px solid var(--uc-border);
  box-shadow:var(--uc-shadow-soft);
  padding:.5rem;
  margin-bottom:1rem;
}
body.theme-dark .uc-table-wrap{
  background:var(--uc-surface);
}

.table-uc{
  width:100%;
  margin-bottom:0;
  background:transparent;
  color:var(--uc-ink);
}
.table-uc thead th{
  background:var(--uc-bg-alt);
  border-bottom:1px solid var(--uc-border);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--uc-muted);
}
.table-uc tbody td{
  vertical-align:middle;
  border-top:1px solid var(--uc-border);
  font-size:.88rem;
}
.table-uc tbody tr:hover{
  background:rgba(109,170,91,.06);
}
body.theme-dark .table-uc thead th{
  background:#19241C;
  color:var(--uc-muted);
}
body.theme-dark .table-uc tbody tr:hover{
  background:#1D2A21;
}

/* Píldoras de estado */
.uc-status-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:var(--uc-radius-pill);
  font-size:.76rem;
  padding:.15rem .6rem;
}
.uc-status-pill--ok{
  background:rgba(109,170,91,.14);
  color:var(--uc-green-800);
}
.uc-status-pill--warn{
  background:rgba(255,193,7,.15);
  color:#856404;
}
.uc-status-pill--danger{
  background:rgba(220,53,69,.16);
  color:#842029;
}
body.theme-dark .uc-status-pill--ok{
  background:#223323;
  color:var(--uc-accent);
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input{
  border-radius:var(--uc-radius-pill);
  border:1px solid var(--uc-border);
  padding:.2rem .6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--uc-radius-pill);
  border:1px solid transparent;
  padding:.15rem .5rem;
  margin:0 .08rem;
  font-size:.8rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  border-color:var(--uc-green-700);
  background:var(--uc-accent-soft);
  color:var(--uc-green-800) !important;
}
body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:#223323;
  color:var(--uc-accent) !important;
}

/* --------------------------------
   8. ALERTAS / TOASTS
   -------------------------------- */

.uc-alert{
  border-radius:var(--uc-radius-md);
  border:1px solid var(--uc-border);
  background:var(--uc-surface-alt);
  padding:.55rem .8rem;
  font-size:.86rem;
  display:flex;
  align-items:flex-start;
  gap:.45rem;
}
body.theme-dark .uc-alert{
  background:var(--uc-surface-alt);
}

/* --------------------------------
   9. UTILIDADES RESPONSIVE
   -------------------------------- */

@media (max-width: 767.98px){
  .uc-card{
    padding:.9rem .85rem .75rem;
  }

  .uc-table-card tbody tr{
    display:block;
    margin-bottom:.75rem;
    border-radius:var(--uc-radius-md);
    border:1px solid var(--uc-border);
    padding:.55rem .5rem;
  }
  .uc-table-card tbody td{
    display:flex;
    justify-content:space-between;
    border-top:0;
    padding:.2rem 0;
  }
  .uc-table-card tbody td:first-child{
    font-weight:600;
  }
}

/* --------------------------------
   10. DETALLES VISUALES
   -------------------------------- */

.uc-row-clickable{
  cursor:pointer;
}
.uc-row-clickable:hover{
  background:rgba(109,170,91,.04);
}
.uc-divider{
  height:1px;
  border:0;
  margin:.75rem 0;
  background:linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,0));
}
body.theme-dark .uc-divider{
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

/* --------------------------------
   11. UTILIDAD PARA CARRUSEL DE CUOTAS
   -------------------------------- */

/* contenedor horizontal para cuotas (se usa en agregar_pago_view.jsp) */
.uc-pay-strip{
  display:flex;
  gap:.75rem;
  padding:.75rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.uc-pay-strip::-webkit-scrollbar{
  height:6px;
}
.uc-pay-strip::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
  border-radius:999px;
}
body.theme-dark .uc-pay-strip::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);
}

/* --------------------------------
   12. TEMA UNIFICADO BOOTSTRAP / RESPONSIVE
   -------------------------------- */

:root{
  --bs-body-bg: var(--uc-bg);
  --bs-body-color: var(--uc-ink);
  --bs-border-color: var(--uc-border);
  --bs-link-color: var(--uc-green-700);
  --bs-link-hover-color: var(--uc-green-900);
  --bs-primary: var(--uc-green-700);
  --bs-success: var(--uc-green-700);
  --bs-card-bg: var(--uc-surface);
  --bs-card-color: var(--uc-ink);
  --bs-modal-bg: var(--uc-surface);
  color-scheme: light;
}

body.theme-dark{
  --bs-body-bg: var(--uc-bg);
  --bs-body-color: var(--uc-ink);
  --bs-border-color: var(--uc-border);
  --bs-link-color: var(--uc-accent);
  --bs-link-hover-color: var(--uc-accent);
  --bs-card-bg: var(--uc-surface);
  --bs-card-color: var(--uc-ink);
  --bs-modal-bg: var(--uc-surface);
  color-scheme: dark;
}

*{
  box-sizing:border-box;
}

html{
  overflow-x:hidden;
}

body{
  min-width:320px;
  overflow-x:hidden;
}

img,
svg,
canvas,
video{
  max-width:100%;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.toast{
  background-color:var(--uc-surface);
  color:var(--uc-ink);
  border-color:var(--uc-border);
}

.card{
  border-radius:14px;
  box-shadow:var(--uc-shadow-soft);
}

.card-header,
.card-footer,
.dropdown-header{
  background-color:var(--uc-surface-alt);
  color:var(--uc-ink);
  border-color:var(--uc-border);
}

.text-muted,
.form-text{
  color:var(--uc-muted) !important;
}

body.theme-dark .text-dark,
body.theme-dark .table-dark,
body.theme-dark .card .text-dark{
  color:var(--uc-ink) !important;
}

.table{
  color:var(--uc-ink);
  border-color:var(--uc-border);
}

.table>:not(caption)>*>*{
  color:var(--uc-ink);
  border-bottom-color:var(--uc-border);
}

.table thead th{
  background:var(--uc-surface-alt);
  color:var(--uc-muted);
}

.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.modal-content{
  border-radius:16px;
  box-shadow:var(--uc-shadow-card);
}

.modal-header,
.modal-footer{
  background:var(--uc-surface-alt);
  color:var(--uc-ink);
  border-color:var(--uc-border);
}

.modal-body{
  background:var(--uc-surface);
  color:var(--uc-ink);
}

body.theme-dark .btn-close{
  filter:invert(1) grayscale(100%);
}

.form-control,
.form-select{
  min-height:40px;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly]{
  background:var(--uc-bg-alt);
  color:var(--uc-muted);
}

body.theme-dark input[type="date"],
body.theme-dark input[type="time"],
body.theme-dark input[type="datetime-local"]{
  color-scheme:dark;
}

.btn{
  border-radius:.65rem;
}

.btn-success,
.btn-primary{
  background:var(--uc-green-700);
  border-color:var(--uc-green-700);
  color:#fff;
}

.btn-success:hover,
.btn-primary:hover{
  background:var(--uc-green-600);
  border-color:var(--uc-green-600);
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary{
  color:var(--uc-ink);
  border-color:var(--uc-border);
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-secondary:hover{
  background:var(--uc-accent-soft);
  border-color:var(--uc-accent);
  color:var(--uc-green-900);
}

body.theme-dark .btn-outline-primary:hover,
body.theme-dark .btn-outline-success:hover,
body.theme-dark .btn-outline-secondary:hover{
  color:var(--uc-ink);
}

.dataTables_wrapper{
  color:var(--uc-ink);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate{
  color:var(--uc-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--uc-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--uc-accent-soft) !important;
  border-color:var(--uc-accent) !important;
  color:var(--uc-green-900) !important;
}

body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  color:var(--uc-ink) !important;
}

.breadcrumb,
.breadcrumb-item.active{
  color:var(--uc-muted);
}

.alert{
  border-color:var(--uc-border);
}

@media (max-width: 767.98px){
  h1{ font-size:1.45rem; }
  h2{ font-size:1.3rem; }
  h3{ font-size:1.18rem; }
  h4{ font-size:1.08rem; }
  h5{ font-size:1rem; }

  .container,
  .container-fluid{
    padding-left:.75rem;
    padding-right:.75rem;
  }

  .card,
  .modal-content{
    border-radius:12px;
  }

  .modal-dialog{
    margin:.75rem;
  }

  .btn{
    min-height:38px;
  }

  .btn-lg{
    font-size:1rem;
    padding:.55rem .85rem;
  }

  .table{
    font-size:.88rem;
  }
}

/* --------------------------------
  13. UX GLOBAL APP (PC + TELEFONO)
  -------------------------------- */

/* Contenedores mas legibles en escritorio grande */
#main-content .container,
#main-content .container-fluid{
  max-width: 1440px;
}

/* Espaciado visual consistente entre bloques de vistas */
#main-content .card,
#main-content .uc-card,
#main-content .card-soft,
#main-content .uc-table-wrap{
  margin-bottom: 1rem;
}

/* Inputs y botones con mejor touch target */
.btn,
.form-control,
.form-select,
.input-group-text{
  min-height: 40px;
}

/* Tablas: mejor legibilidad y scroll horizontal en pantallas estrechas */
.table-responsive{
  border-radius: 12px;
}

/* Estados de foco accesibles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid rgba(109,170,91,.45);
  outline-offset: 1px;
}

/* Secciones auth/publicas tambien usan la misma paleta */
.uc-public-shell{
  background: linear-gradient(135deg, #526B3A, #4B6633, #81d4fa);
  background-size: 350% 350%;
  animation: ucGradientShift 11s ease infinite;
}

@keyframes ucGradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.uc-public-card{
  background: rgba(255,255,255,.95);
  border: 1px solid var(--uc-border);
  border-radius: 16px;
  box-shadow: var(--uc-shadow-card);
}

@media (max-width: 991.98px){
  #main-content{
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  /* Botoneras responsivas */
  #main-content .d-flex.gap-2,
  #main-content .d-flex.gap-3{
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px){
  /* Tablas en movil: evitar cortes duros */
  .table th,
  .table td{
    white-space: nowrap;
  }

  /* Botones full-width en bloques de accion */
  .btn-mobile-block{
    width: 100%;
  }

  /* Ajuste visual de cards en celular */
  .uc-public-card{
    border-radius: 14px;
    padding: .95rem !important;
  }
}

/* =================================================================
   CHIPS DE CLASIFICACION CREDITICIA (AZUL/VERDE/AMARILLO/ROJO)
   ----------------------------------------------------------------
   Componente sutil reutilizable en todas las vistas: Clientes,
   Prestamos, Cobros de Hoy, Ruta, Pagos por credito, Resumen Semanal
   y Refinanciamiento. Usa misma paleta en modo claro/oscuro.
   ================================================================= */
.cliente-riesgo-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.24rem .55rem;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
  white-space:nowrap;
  line-height:1;
  letter-spacing:0;
  vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 1px 2px rgba(20,32,25,.06);
}
.cliente-riesgo-chip::before{
  content:"";
  width:.48rem;
  height:.48rem;
  border-radius:50%;
  flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.65);
}
.cliente-riesgo-chip i{font-size:.7rem;}
.cliente-riesgo-chip.lg{font-size:.84rem;padding:.34rem .8rem;}
.cliente-riesgo-chip.lg i{font-size:.85rem;}

.cliente-riesgo-azul{
  background:#EAF4FF;color:#24517A;border:1px solid rgba(36,81,122,.22);
}
.cliente-riesgo-azul::before{background:#2F80ED;}
.cliente-riesgo-verde{
  background:#E7F4E2;color:#365A3F;border:1px solid rgba(54,90,63,.25);
}
.cliente-riesgo-verde::before{background:#2F9E44;}
.cliente-riesgo-amarillo{
  background:#FFF7E0;color:#9A6700;border:1px solid rgba(154,103,0,.25);
}
.cliente-riesgo-amarillo::before{background:#F59F00;}
.cliente-riesgo-rojo{
  background:#FDECEC;color:#C62828;border:1px solid rgba(198,40,40,.25);
}
.cliente-riesgo-rojo::before{background:#E03131;}

/* Modo oscuro: chips con misma intencion semantica pero sobre fondo oscuro */
body.theme-dark .cliente-riesgo-azul{
  background:rgba(36,81,122,.22);color:#9ECBFF;border-color:rgba(158,203,255,.30);
}
body.theme-dark .cliente-riesgo-verde{
  background:rgba(54,90,63,.30);color:#B8E6A6;border-color:rgba(184,230,166,.32);
}
body.theme-dark .cliente-riesgo-amarillo{
  background:rgba(154,103,0,.28);color:#FFD37A;border-color:rgba(255,211,122,.35);
}
body.theme-dark .cliente-riesgo-rojo{
  background:rgba(198,40,40,.25);color:#FF9C9C;border-color:rgba(255,156,156,.32);
}

/* Banner de aviso AMARILLO/ROJO en formularios (refinanciamiento, credito nuevo) */
.cliente-riesgo-banner{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.85rem 1rem;border-radius:14px;
  border:1px solid var(--uc-border);
  background:var(--uc-surface-alt);
  font-size:.92rem;line-height:1.35;
}
.cliente-riesgo-banner.amarillo{
  background:#FFF7E0;border-color:rgba(154,103,0,.28);color:#7A5200;
}
.cliente-riesgo-banner.rojo{
  background:#FDECEC;border-color:rgba(198,40,40,.32);color:#9B1C1C;
}
.cliente-riesgo-banner.verde{
  background:#E7F4E2;border-color:rgba(54,90,63,.30);color:#365A3F;
}
.cliente-riesgo-banner i{font-size:1.05rem;margin-top:.1rem;}
.cliente-riesgo-banner strong{font-weight:900;}
body.theme-dark .cliente-riesgo-banner.amarillo{
  background:rgba(154,103,0,.20);color:#FFD37A;border-color:rgba(255,211,122,.30);
}
body.theme-dark .cliente-riesgo-banner.rojo{
  background:rgba(198,40,40,.18);color:#FF9C9C;border-color:rgba(255,156,156,.28);
}
body.theme-dark .cliente-riesgo-banner.verde{
  background:rgba(54,90,63,.25);color:#B8E6A6;border-color:rgba(184,230,166,.28);
}