/* ---------------  TIPOGRAFÍA  --------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

html,body{font-family:'Open Sans',sans-serif!important;}

/* ---------------  VARIABLES  --------------- */
:root{ --nav-h:135px; }

/* ---------------  NAVBAR  --------------- */
.navbar-toggler{background:#000!important;padding:.45rem .55rem;}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23CC9641' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.main-navbar{height:var(--nav-h);background:#F6F7F8;}

@media(min-width:992px){
  #topNavOC{padding-right:0!important;}
  #topNavOC .navbar-nav>li:last-child>*{padding-right:0!important;}
}

/* ---------------  CARDS  --------------- */
.card-img-top{max-height:250px;object-fit:cover;}
.img-top{max-height:300px;max-width:300px;object-fit:cover;}
.card .list-group-item:last-child{border-bottom:0;}

/* ---------------  DONUT GENÉRICO --------------- */
.donut-progress{
  /* valor 0-100 → lo inyecta JS */
  --value:0;
  --angle:calc(var(--value)*3.6deg);           /* 100 → 360°          */
  --fill :hsl(calc(var(--value)*1.2),70%,50%); /* rojo→ámbar→verde    */
  --bg   :#e5e5e5;

  width:72px;aspect-ratio:1/1;
  border-radius:50%;
  position:relative;

  background:conic-gradient(var(--fill) 0 var(--angle),var(--bg) 0) padding-box;
  transition:background 1s ease;               /* animación suave     */
}

/* agujero interior */
.donut-progress::after{
  content:'';
  position:absolute;
  inset:15%;                                   /* grosor del anillo   */
  background:#fff;
  border-radius:50%;
  z-index:1;                                    /* detrás del texto    */
}

/* porcentaje centrado */
.donut-progress::before{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font:700 .8rem/1 'Open Sans',sans-serif;
  color:#333;
  pointer-events:none;
  z-index:2;                                    /* sobre el agujero    */
}

/* tamaños */
.donut-lg{width:140px;}
.donut-sm{width:80px;}

/* donut XS para las cards (≈ 48 px) */
.donut-xs{ width:75px; }

.card .donut-progress{
  margin:0 auto;         /* centra dentro de la tarjeta */
}

/* Centra cualquier donut dentro de un <li class="list-group-item"> */
.list-group-item .donut-progress{
  display:block;      /* asegura que se comporte como bloque */
  margin:1rem auto 0; /* auto a ambos lados → centrado      */
}

/* ---------------  LISTA DE SUB-PAGOS --------------- */
.lista-subpagos{
  list-style:none;
  margin:1rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1rem;
}
.subpago-item{
  flex:0 0 calc(100%/6 - 1rem);      /* máximo 6 por línea */
  display:flex;justify-content:center;
}

/* ---------------  LOGIN BG, BOTONES, ETC. (sin cambios) --------------- */
body.login-bg{
  background-image:
    linear-gradient(135deg,#0d6efd 0%,#6610f2 100%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff0d'/%3E%3C/svg%3E");
  background-size:cover,auto;min-height:100vh;
}
body.login-bg .card{
  border:none;border-radius:1rem;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.25);
}
.form-floating>.form-control{height:48px;border-radius:.5rem;}
.form-control:focus{border-color:#0d6efd;box-shadow:0 0 0 .2rem rgba(13,110,253,.25);}

/* enlaces auxiliares */
.link-aux{
  color:#000!important;text-decoration:underline;
  transition:transform .2s;display:inline-block;
  font-weight:bold;font-size:1em;
}
.link-aux:hover{color:#b07d2c!important;transform:scale(1.3);}

/* botones */
.btn{padding:.75rem 1.5rem;border:none;border-radius:5px;cursor:pointer;font-weight:bold;font-size:1em;transition:background-color .2s;text-align:center;}
.btn-primary{background:#CC9641;color:#fff;}
.btn-primary:hover{background:#e9c986;border:3px solid #CC9641;color:#000;text-decoration:none;}

/* logo */
.logo-img{vertical-align:middle;}

/* texto responsive */
.container.text-end.medium{font-size:1.3em;}

/* ---------------  DOCUMENTOS --------------- */
.doc-group input[type='file']{display:block;margin-top:.5rem;}
.doc-group .legend{font-size:.85rem;color:#666;margin-bottom:.25rem;}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
.doc-card{
  border:1px solid #e0e0e0;border-radius:8px;padding:1rem;background:#fafafa;
  display:flex;flex-direction:column;gap:.75rem;
}
.doc-title{font-weight:600;color:#333;}
.doc-link{color:#CC9641;font-size:.9rem;}
.doc-link:hover{text-decoration:underline;}
.doc-card input[type='file']{margin-top:.25rem;}

.navbar-toggler.logo-img{margin-right:1rem;}

/* ---------------  LABAYRU BRAND SYSTEM  --------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --labayru-blue:#13255b;
  --labayru-blue-2:#09205a;
  --labayru-accent:#2d82d8;
  --labayru-ink:#1f2937;
  --labayru-muted:#6b7280;
  --labayru-paper:#ffffff;
  --labayru-soft:#f5f7fb;
  --labayru-line:#e4e8f0;
  --nav-h:96px;
}

html,
body{
  font-family:'Poppins','Open Sans',Arial,sans-serif!important;
  color:var(--labayru-ink);
  background:var(--labayru-soft);
}

body{
  letter-spacing:0;
  overflow-x:hidden;
}

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

img{
  height:auto;
}

.flex-grow-1,
main,
main > .container,
main > .container-fluid,
.container,
.container-fluid,
.row,
.card,
.modal-content{
  min-width:0;
}

.container,
.container-fluid{
  max-width:100%;
}

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

.table{
  vertical-align:middle;
}

.table th,
.table td{
  overflow-wrap:anywhere;
}

.table td.text-end,
.table th.text-end,
.amount-cell,
[class*="money"]{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

h1,h2,h3,h4,h5,h6,
.navbar,
.btn{
  font-family:'Poppins','Open Sans',Arial,sans-serif!important;
}

h1,h2,h3{
  color:var(--labayru-blue);
  font-weight:800;
}

.main-navbar{
  min-height:var(--nav-h);
  height:auto;
  background:var(--labayru-blue)!important;
  box-shadow:0 10px 30px rgba(9,32,90,.18);
  padding:.55rem 0;
}

.main-navbar .container-fluid{
  padding-left:clamp(1rem,3vw,2.5rem);
  padding-right:clamp(1rem,3vw,2.5rem)!important;
  gap:.75rem;
}

.main-navbar .navbar-brand img{
  height:58px!important;
  width:auto;
  max-width:260px;
  object-fit:contain;
}

.main-navbar .nav-link,
.main-navbar .link-aux{
  color:#fff!important;
  text-decoration:none;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  transform:none!important;
}

.main-navbar .nav-link:hover,
.main-navbar .link-aux:hover{
  color:#dce9ff!important;
  transform:none!important;
}

.main-navbar .nav-message-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  overflow:visible;
}

.main-navbar .nav-unread-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.12rem;
  height:1.12rem;
  padding:0 .32rem;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:.66rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.72), 0 7px 16px rgba(220,38,38,.36);
  transform:translateY(-.45rem);
}

.main-navbar .dropdown-menu{
  border:0;
  border-radius:14px;
  box-shadow:0 16px 36px rgba(9,32,90,.2);
}

.offcanvas{
  background:var(--labayru-blue);
}

.offcanvas .navbar-nav{
  width:100%;
}

.offcanvas .nav-item,
.offcanvas .btn{
  max-width:100%;
}

.offcanvas .offcanvas-title,
.offcanvas .btn-close{
  color:#fff;
}

.navbar-toggler{
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
}

.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")!important;
}

main.py-4{
  padding-top:2rem!important;
  padding-bottom:2.5rem!important;
}

.card{
  border:1px solid var(--labayru-line)!important;
  border-radius:16px!important;
  box-shadow:0 12px 28px rgba(19,37,91,.08)!important;
  overflow:hidden;
}

.card-header,
.modal-header.bg-primary{
  background:var(--labayru-blue)!important;
  color:#fff!important;
}

.table-light th{
  background:#eef3fb!important;
  color:var(--labayru-blue)!important;
  border-bottom:2px solid var(--labayru-accent)!important;
}

.btn{
  border-radius:999px!important;
  padding:.65rem 1.25rem;
  font-weight:700;
  letter-spacing:.01em;
  min-width:0;
  white-space:normal;
}

.btn-primary,
.btn-success{
  background:var(--labayru-blue)!important;
  border:1px solid var(--labayru-blue)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(19,37,91,.18);
}

.btn-primary:hover,
.btn-success:hover{
  background:var(--labayru-accent)!important;
  border-color:var(--labayru-accent)!important;
  color:#fff!important;
}

.btn-outline-primary,
.btn-outline-secondary{
  color:var(--labayru-blue)!important;
  border:1px solid var(--labayru-blue)!important;
  background:#fff!important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover{
  color:#fff!important;
  background:var(--labayru-blue)!important;
}

.form-control,
.form-select,
.input-group-text{
  border-radius:999px!important;
  border-color:#d9deea!important;
  min-width:0;
}

textarea.form-control,
textarea{
  border-radius:18px!important;
}

.form-control:focus,
.form-select:focus{
  border-color:var(--labayru-accent)!important;
  box-shadow:0 0 0 .18rem rgba(45,130,216,.18)!important;
}

.badge.bg-warning,
.badge.text-bg-primary,
.bg-primary{
  background-color:var(--labayru-blue)!important;
  color:#fff!important;
}

.text-primary,
a{
  color:var(--labayru-blue);
}

a:hover{
  color:var(--labayru-accent);
}

.product-card{
  border-radius:18px!important;
}

.product-card-img,
.card-img-top{
  background:#edf2fb;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(19,37,91,.16)!important;
}

footer{
  background:var(--labayru-blue)!important;
  color:#dce4f4!important;
  border-top:4px solid var(--labayru-accent);
}

footer a{
  color:#fff!important;
}

footer .brand-footer-logo{
  max-width:260px;
  height:auto;
}

.filters-heading{
  background:var(--labayru-blue)!important;
  color:#fff!important;
  padding:1rem 1.25rem!important;
  border-radius:8px 8px 0 0;
}

.filters-heading h1,
.filters-heading h2,
.filters-heading h3,
.filters-heading h4,
.filters-heading h5,
.filters-heading h6,
.filters-heading .filters-heading-copy{
  color:inherit!important;
}

.filters-heading .filters-heading-copy{
  opacity:.92;
}

.labayru-page-kicker{
  color:var(--labayru-accent);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:800;
}

.labayru-hero{
  background:linear-gradient(135deg,var(--labayru-blue),#1d3b83);
  color:#fff;
  border-radius:0;
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1rem,4vw,3rem);
  margin:-2rem -1rem 2rem;
}

.labayru-hero h1,
.labayru-hero h2,
.labayru-hero p{
  color:#fff;
}

@media(max-width:991.98px){
  .main-navbar .navbar-brand img{
    height:48px!important;
    max-width:min(52vw,220px);
  }
  .main-navbar{
    min-height:78px;
  }
  .main-navbar .container-fluid{
    padding-right:1rem!important;
  }
  .offcanvas{
    width:min(86vw,360px)!important;
    max-width:100vw;
    overflow-x:hidden;
  }
  .offcanvas.offcanvas-end:not(.show):not(.showing){
    right:0;
    transform:translateX(100%);
  }
  .offcanvas .navbar-nav{
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:.75rem!important;
    padding:1rem;
  }
  .offcanvas .nav-link,
  .offcanvas .btn,
  .offcanvas .dropdown-toggle{
    display:flex!important;
    justify-content:center;
    align-items:center;
    width:100%;
    min-height:42px;
    margin:0;
  }
  .offcanvas .dropdown-menu{
    position:static!important;
    transform:none!important;
    width:100%;
    margin-top:.4rem;
  }
  main.py-4{
    padding-top:1.25rem!important;
    padding-bottom:1.75rem!important;
  }
  .labayru-hero{
    margin:-1.25rem -.75rem 1.25rem;
  }
  .card{
    border-radius:12px!important;
  }
}

@media(max-width:767.98px){
  main > .container-fluid,
  main > .container{
    padding-left:.75rem!important;
    padding-right:.75rem!important;
  }
  .d-flex.justify-content-between,
  .d-flex.justify-content-end,
  .d-flex.align-items-center{
    min-width:0;
  }
  .btn-group{
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:.25rem;
  }
  .btn-group > .btn{
    border-radius:999px!important;
  }
  .filters-heading{
    padding:.85rem 1rem!important;
  }
  .filters-heading h1,
  .filters-heading h2,
  .filters-heading h3,
  .filters-heading h4,
  .filters-heading h5,
  .filters-heading h6{
    font-size:1rem;
  }
  .table{
    min-width:680px;
  }
  .table.table-sm{
    font-size:.86rem;
  }
  footer .brand-footer-logo{
    max-width:min(72vw,240px);
  }
}

@media(max-width:575.98px){
  h1,.h1{font-size:1.55rem;}
  h2,.h2{font-size:1.28rem;}
  h3,.h3{font-size:1.14rem;}
  .btn{
    padding:.58rem .9rem;
    font-size:.9rem;
  }
  .card-body{
    padding:1rem;
  }
  .row{
    --bs-gutter-x:.85rem;
  }
  .input-group{
    flex-wrap:nowrap;
  }
  .input-group .form-control{
    min-width:0;
  }
  .display-6{
    font-size:1.55rem;
  }
}