/* ==========================================================================
   YoCiudadano — Compatibilidad del panel de administración
   Las vistas del admin usan clases estilo Bootstrap (d-flex, row, btn-sm,
   badge, alert…) que la hoja compilada del tema (style.css) no incluye.
   Este archivo las define para que todas las pantallas se vean consistentes.
   ========================================================================== */

/* ── Utilidades de layout ── */
.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}
.d-block{display:block!important}
.d-inline{display:inline!important}
.d-none{display:none!important}
.flex-column{flex-direction:column!important}
.flex-grow-1{flex-grow:1!important}
.align-items-start{align-items:flex-start!important}
.align-items-center{align-items:center!important}
.align-items-end{align-items:flex-end!important}
.align-middle{vertical-align:middle!important}
.justify-content-start{justify-content:flex-start!important}
.justify-content-end{justify-content:flex-end!important}
.justify-content-center{justify-content:center!important}
.justify-content-between{justify-content:space-between!important}
.position-relative{position:relative!important}
.position-absolute{position:absolute!important}
.w-100{width:100%!important}
.h-100{height:100%!important}
.min-w-0{min-width:0}
.text-end{text-align:right!important}
.text-start{text-align:left!important}
.text-nowrap{white-space:nowrap!important}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-decoration-none{text-decoration:none!important}
.list-unstyled{list-style:none;padding-left:0;margin:0}
.border-bottom{border-bottom:1px solid #e5e7eb}
.fw-normal{font-weight:400!important}
.fw-medium{font-weight:500!important}
.fw-semibold{font-weight:600!important}
.fw-bold{font-weight:700!important}
.text-muted{color:#6b7280!important}
.text-secondary{color:#6b7280!important}
.ps-3{padding-left:.75rem!important}.ps-4{padding-left:1rem!important}.ps-5{padding-left:1.5rem!important}
.pe-4{padding-right:1rem!important}.pe-5{padding-right:1.5rem!important}
.pd-20{padding:20px}
.g-3{gap:1rem}.g-4{gap:1.5rem}.gy-4{row-gap:1.5rem}
.me-1{margin-right:.25rem}.ms-1{margin-left:.25rem}

/* ── Grilla (row / col-*) ── */
.row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;row-gap:1rem}
.row.g-3,.row.g-4{gap:0;row-gap:1rem}
.row.gy-4{row-gap:1.5rem}
.row>*{padding-left:.5rem;padding-right:.5rem;width:100%;max-width:100%;flex:0 0 100%}
.col-12{flex:0 0 100%;max-width:100%}
@media(min-width:576px){.col-sm-6{flex:0 0 50%;max-width:50%}}
@media(min-width:768px){
  .col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
}
@media(min-width:992px){
  .col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}
  .col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}
}
@media(min-width:1200px){.col-xl-9{flex:0 0 75%;max-width:75%}}

/* ── Utilidades Tailwind que el tema compilado no trae ── */
@media(min-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}}
@media(min-width:1280px){.xl\:col-span-2{grid-column:span 2/span 2}}
.w-\[52px\]{width:52px}.h-\[52px\]{height:52px}.max-w-\[180px\]{max-width:180px}
.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}
.text-secondary-400{color:#9ca3af}.text-secondary-600{color:#4b5563}.text-primary-500{color:#487fff}
.bg-primary-600\/5{background-color:rgba(72,127,255,.05)}
.bg-blue-50{background-color:#eff6ff}
.hover\:bg-blue-100:hover{background-color:#dbeafe}
.hover\:bg-success-100:hover{background-color:#dcfce7}
.hover\:bg-purple-100:hover{background-color:#f3e8ff}
.hover\:bg-orange-100:hover{background-color:#ffedd5}
.group:hover .group-hover\:text-blue-700{color:#1d4ed8}
.group:hover .group-hover\:text-success-700{color:#15803d}
.group:hover .group-hover\:text-purple-700{color:#7e22ce}
.group:hover .group-hover\:text-orange-700{color:#c2410c}
.border-danger-500{border-color:#ef4444}
.bg-opacity-10{--tw-bg-opacity:.1}
.from-orange-500\/10{--tw-gradient-from:rgba(249,115,22,.1);--tw-gradient-to:rgba(249,115,22,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.hover-text-primary:hover{color:#487fff}

/* ── Tarjetas ── */
.dashboard-main .card{border-color:#e5e7eb;box-shadow:0 1px 2px rgba(16,24,40,.04)}
html[data-theme="dark"] .dashboard-main .card{border-color:#374151}
.card-footer{border-top:1px solid #e5e7eb;padding:.75rem 1.5rem}
html[data-theme="dark"] .card-footer{border-color:#374151}
.card-title{font-size:1rem;font-weight:600;margin:0}

/* ── Botones ── */
.btn{align-items:center;justify-content:center;gap:.4rem;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;border:1px solid transparent;font-size:.875rem}
.btn-sm{padding:.45rem .85rem!important;font-size:.8rem;border-radius:.5rem}
.btn-xs{padding:.25rem .6rem!important;font-size:.72rem;border-radius:.45rem}
.btn-group{display:inline-flex;gap:6px}
.btn-group-sm .btn{padding:.35rem .7rem;font-size:.75rem}
.btn-primary{border-color:#487fff}
.btn-secondary{background:#6b7280;color:#fff;border-color:#6b7280}
.btn-success{background:#16a34a;color:#fff;border-color:#16a34a}
.btn-success:hover{background:#15803d;border-color:#15803d}
.btn-danger{background:#dc2626;color:#fff;border-color:#dc2626}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
.btn-outline-secondary{background:transparent;border:1px solid #d1d5db;color:#4b5563}
.btn-outline-secondary:hover{background:#f3f4f6;border-color:#9ca3af;color:#111827}
.btn-outline-danger{background:transparent;border:1px solid #fca5a5;color:#dc2626}
.btn-outline-danger:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.btn-outline-warning{background:transparent;border:1px solid #fcd34d;color:#b45309}
.btn-outline-warning:hover{background:#f59e0b;border-color:#f59e0b;color:#fff}
.btn-outline-primary{align-items:center}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed}
html[data-theme="dark"] .btn-outline-secondary{border-color:#4b5563;color:#d1d5db}
html[data-theme="dark"] .btn-outline-secondary:hover{background:#374151;color:#fff}
.btn-close{width:28px;height:28px;border:none;background:transparent;cursor:pointer;position:relative;opacity:.6;border-radius:6px;flex-shrink:0}
.btn-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.btn-close::before,.btn-close::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;border-radius:1px}
.btn-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.btn-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;line-height:1;padding:.35rem .65rem;border-radius:999px;white-space:nowrap;background:#f3f4f6;color:#374151}
.bg-secondary-subtle{background:#f3f4f6!important}
.bg-success-subtle{background:#dcfce7!important}.text-success{color:#15803d!important}
.bg-danger-subtle{background:#fee2e2!important}
.bg-warning-subtle{background:#fef3c7!important}

/* ── Alertas ── */
.alert{display:flex;align-items:center;gap:10px;padding:.7rem 1rem;border-radius:.6rem;border:1px solid transparent;font-size:.85rem;margin-bottom:1rem;position:relative}
.alert .btn-close{margin-left:auto}
.alert-success{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.alert-danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.alert-warning{background:#fef3c7;color:#92400e;border-color:#fde68a}
.alert-info{background:#e0f2fe;color:#075985;border-color:#bae6fd}
.alert-dismissible{padding-right:.75rem}
.alert ul{margin:0;padding-left:1.1rem}
.fade{transition:opacity .15s}
.fade:not(.show){opacity:0}
.alert.fade.show,.fade.show{opacity:1}

/* ── Tablas ── */
.table-sm th,.table-sm td{padding:.55rem .85rem!important}
.table-hover tbody tr:hover{background:rgba(72,127,255,.04)}
.table-light,.table-light th{background:#f9fafb!important}
html[data-theme="dark"] .table-light,html[data-theme="dark"] .table-light th{background:#1f2937!important}
.table th,.table td{vertical-align:middle}

/* ── Formularios ── */
.form-control-sm{padding:.5rem .75rem!important;font-size:.82rem;border-radius:.5rem}
.form-control-color{width:48px;height:38px;padding:3px;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;cursor:pointer}
.form-label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4rem}
.form-check{display:flex;align-items:center;gap:.5rem}
.form-check-label{font-size:.85rem;cursor:pointer}
.form-switch{padding-left:0}
.form-switch .form-check-input{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:999px;background:#d1d5db;position:relative;cursor:pointer;border:none;flex-shrink:0;transition:background .2s}
.form-switch .form-check-input::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.form-switch .form-check-input:checked{background:#487fff}
.form-switch .form-check-input:checked::after{transform:translateX(18px)}
.form-control:focus,.form-select:focus{outline:none;border-color:#487fff;box-shadow:0 0 0 3px rgba(72,127,255,.15)}
