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