/* ===================================================================
   components.css - componentes específicos del panel admin
   =================================================================== */

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; }
.kpi__num { font-size: 1.6rem; font-weight: 700; color: var(--azul); }
.kpi__lbl { font-size: 0.78rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: 0.02em; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input, .toolbar select { max-width: 240px; }

.enlace-box { display: flex; gap: 8px; align-items: center; background: var(--gris-50); border: 1px dashed var(--gris-300); border-radius: 10px; padding: 8px 10px; font-size: 0.82rem; }
.enlace-box code { word-break: break-all; color: var(--gris-700); }

dialog {
  border: none; border-radius: 16px; padding: 0; max-width: 560px; width: calc(100% - 32px);
  box-shadow: var(--sombra-lg);
}
dialog::backdrop { background: rgba(16,24,40,0.5); }
.modal__head { padding: 16px 18px; border-bottom: 1px solid var(--gris-100); display: flex; justify-content: space-between; align-items: center; }
.modal__body { padding: 18px; max-height: 70vh; overflow-y: auto; }
.modal__foot { padding: 14px 18px; border-top: 1px solid var(--gris-100); display: flex; justify-content: flex-end; gap: 8px; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--gris-500); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--azul-50); color: var(--azul); border-radius: 999px; padding: 4px 10px; font-size: 0.78rem; }

.check-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--gris-300); border-radius: 10px; padding: 8px; }
.check-list label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-weight: 400; font-size: 0.9rem; }
.check-list input { width: auto; }