/* ---------------  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;
}

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;
}

.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 .dropdown-menu{
  border:0;
  border-radius:14px;
  box-shadow:0 16px 36px rgba(9,32,90,.2);
}

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

.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;
}

.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;
}

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;
}

.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;
  }
  .main-navbar{
    min-height:78px;
  }
}