/* =========================================================================
   PANEL ADMIN SGS — esqueletos de carga y ajustes responsive
   (se añade sobre los estilos existentes, no los reemplaza)
   ========================================================================= */
:root { --sk-base: #142036; --sk-shine: #22314F; }

@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk {
    background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%);
    background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; border-radius: 6px;
}

/* Imágenes del panel: esqueleto hasta que cargan */
img.sk-img:not(.is-ready) {
    background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%);
    background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; color: transparent;
}
.sk-box:not(.sk-done) { background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; }

/* Pantalla esqueleto del panel */
#page-skeleton.sk-admin {
    position: fixed; inset: 0; z-index: 9999; background: #070C16; display: flex;
    transition: opacity .3s ease, visibility .3s ease;
}
#page-skeleton.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#page-skeleton .psa-side { width: 256px; padding: 18px; border-right: 1px solid #1B2740; background: #0E1626; flex-shrink: 0; }
#page-skeleton .psa-main { flex: 1; padding: 28px 32px; min-width: 0; }
#page-skeleton .psa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1023px) { #page-skeleton .psa-side { display: none; } #page-skeleton .psa-main { padding: 20px 16px; } }
@media (max-width: 767px) { #page-skeleton .psa-grid { grid-template-columns: 1fr 1fr; } }

/* Botones al enviar formularios: estado esqueleto en lugar de spinner */
button.btn-sending { position: relative; pointer-events: none; }
button.btn-sending::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%; animation: sk-shimmer 1.1s linear infinite;
}

/* ---------- Responsive: modales que no caben en pantallas bajas ---------- */
[id^="modal"] > div { max-height: calc(100dvh - 1.5rem); }
[id^="modal"] > div:not(.flex) { overflow-y: auto; }
@media (max-width: 479px) {
    [id^="modal"] { padding: .5rem !important; align-items: flex-end !important; }
    [id^="modal"] > div { border-radius: 1.25rem !important; }
    [id^="modal"] .grid.grid-cols-3 { grid-template-columns: 1fr 1fr; }
    [id^="modal"] .grid.grid-cols-3 > :last-child:nth-child(3) { grid-column: span 2; }
    main.flex-1 { padding-left: .875rem !important; padding-right: .875rem !important; }
}
/* Tablas anchas: siempre con desplazamiento horizontal propio */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
/* Evita zoom automático de iOS al enfocar campos */
@media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } }

@media (prefers-reduced-motion: reduce) { .sk, img.sk-img, .sk-box { animation: none !important; } }