/* =============================================================================
   COMMON - Estilos compartidos por toda la app
   Se carga siempre desde layouts/head.php despues de branding.css.
   REGLA: branding.css lidera y es intocable; common.css NUNCA sobreescribe
   ninguna regla de branding. Solo aporta componentes de app (flash, btn,
   flash, status, modal, etc.), tokens semanticos que consumen variables de
   branding, y propiedades que branding no define.
   ============================================================================= */

:root {
  /* Tokens semanticos de la app, mapeados a branding.css. Las categorias
     semanticas (danger/success/warning/online/offline) no existen en
     branding y mantienen color propio por ser informativas. */
  --bg:          var(--bg-light-color-2);
  --surface:     var(--bg-light-color-1);
  --surface-2:   var(--bg-light-color-2);
  --border:      var(--form-border-color-bg-light);
  --border-2:    #BCBCBC;
  --text:        var(--font-h2-color-bg-light);
  --text-2:      var(--font-text-color-bg-light);
  --muted:       var(--font-note-color-bg-light);
  --muted-2:     #9A9A9A;
  --primary:     var(--brand-color);
  --primary-h:   var(--brand-color-low-contrast);
  --primary-50:  #FFF0EF;
  --primary-100: #FFD8D5;
  --danger:      #dc2626;
  --danger-h:    #b91c1c;
  --danger-50:   #fef2f2;
  --success:     #16a34a;
  --success-50:  #f0fdf4;
  --warning:     #d97706;
  --warning-50:  #fffbeb;
  --online:      #16a34a;
  --offline:     #94a3b8;

  --radius:      8px;
  --radius-sm:   6px;
  --radius-lg:   12px;
  --shadow-sm:   0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow:      0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-lg:   0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);

  --font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* body: solo propiedades que branding no define. margin/padding ya los
   fija branding (* reset); font-family y font-size los gobierna branding. */
body {
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, kbd {
  font-family: var(--font-mono); font-size: 0.92em; color: var(--text-2);
  background: var(--surface-2); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border);
}

/* ---------- UTILITIES ---------- */
/* .muted, .hint, .u-fs-* eliminadas: aplicaban color/font-size sobre
   span/p que branding ya gobierna. Para texto atenuado o pequeno usa
   las clases de branding: <p class="note"> (mas pequeno y color muted). */
.u-flush      { padding: 0 !important; }
.u-text-center{ text-align: center; }
.u-mt-xs      { margin-top: 4px; }
.u-mt-sm      { margin-top: 8px; }
.u-mt-md      { margin-top: 16px; }
.u-mt-lg      { margin-top: 20px; }
.u-mb-sm      { margin-bottom: 8px; }
.u-m-0        { margin: 0; }
.u-my-16      { margin-top: 16px; margin-bottom: 16px; }
.u-row        { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.u-bare-field { border: 0; padding: 0; margin: 0; }

.chip {
  display: inline-block;
  background: var(--primary-100);
  border-radius: 999px; padding: 2px 10px; letter-spacing: 0.03em;
}

/* ---------- BUTTONS ----------
   Botones gobernados 100% por branding.css: .btn + .btn-brand | .btn-1 | .control.sm.
   No se redefinen aqui. */

.inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* ---------- FORMS ---------- */
label {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--text-2); font-size: 13px; font-weight: 500;
}
label.chk {
  flex-direction: row; align-items: center; gap: 8px;
  color: var(--text); font-weight: 400; cursor: pointer;
}

/* Inputs/select/textarea: el styling lo gobierna branding (tamanos, colores,
   box-shadow de borde). Aqui solo propiedades que branding no define. */
input[disabled], input[readonly], select[disabled], textarea[disabled] {
  cursor: not-allowed;
}
textarea { resize: vertical; min-height: 64px; }

input[type="file"] { padding: 6px; background: var(--surface-2); cursor: pointer; }

/* ---------- FLASH ----------
   Contenedor ".flash-tray" se encarga del espaciado con su entorno (gap interno
   entre multiples flashes, y el contenedor padre define el margen exterior).
   El propio .flash NO lleva margin nunca. */
.flash-tray {
  display: flex; flex-direction: column; gap: 8px;
}
.flash {
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; border: 1px solid transparent;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; overflow: hidden;
  white-space: pre-line;
  animation: flash-in 260ms cubic-bezier(.16,1,.3,1) both;
}
.flash-success { background: var(--success-50); color: #166534; border-color: #bbf7d0; }
.flash-error   { background: var(--danger-50);  color: var(--danger-h); border-color: #fecaca; }
.flash-warning { background: var(--warning-50); color: #92400e; border-color: #fde68a; }
.flash.is-leaving { animation: flash-out 360ms cubic-bezier(.4,0,.2,1) forwards; }

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flash-out {
  0%   { opacity: 1; transform: translateY(0);   max-height: var(--flash-h, 100px); padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-bottom-width: 1px; }
  100% { opacity: 0; transform: translateY(-6px); max-height: 0;                     padding-top: 0;    padding-bottom: 0;    border-top-width: 0; border-bottom-width: 0; }
}

/* ---------- STATUS ---------- */
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--offline); flex-shrink: 0;
}
.status-dot.online  {
  background: var(--online);
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.28);
  animation: status-pulse 1.6s ease-in-out infinite;
}
.status-dot.offline { background: var(--offline); }
@keyframes status-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.4); }
}

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2);
}
.status-pill.online { background: #dcfce7; color: #166534; }
.status-pill.off    { background: var(--surface-2); }

/* ---------- APP BASE ---------- */
.app-main { padding: 24px; }

.empty-state {
  padding: 48px 16px; text-align: center; color: var(--muted);
  border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ---------- MODAL (form modals: confirmaciones, pickers, etc.) ----------
   Originalmente vivia en admin.css; movido aqui para que cualquier vista
   (galeria, admin, login, etc.) pueda usar las mismas clases. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px;
  min-height: 100vh;
  overflow-y: auto;
  animation: fade-in .15s ease-out;
}
.modal-backdrop.hidden { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 520px;
  box-shadow: var(--shadow-lg);
  animation: slide-up .2s ease-out;
  display: flex; flex-direction: column;
}
.modal-lg { max-width: 720px; }
@keyframes slide-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-close {
  background: transparent; border: none; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; width: 32px; height: 32px;
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

.modal-body {
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.modal-body .form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.modal-body .full { grid-column: 1 / -1; }

.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------- MODAL VIEWER (compartido por gallery + trash) ---------- */
.modal-viewer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.82);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-viewer.hidden { display: none; }
html.modal-viewer-open,
body.modal-viewer-open { overflow: hidden; }
.modal-viewer[inert] { /* fallback visual, inert ya lo ocultaria en anavegadores que lo soportan */ }

.mv-close, .mv-prev, .mv-next {
  position: absolute; background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
  color: #fff; border: 1px solid rgba(255,255,255,.2);
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
  z-index: 2;
}
.mv-close:hover, .mv-prev:hover, .mv-next:hover { background: rgba(255,255,255,.22); }
.mv-close { top: 16px; right: 16px; }
.mv-prev  { left: 16px; }
.mv-next  { right: 16px; }
.mv-prev[disabled], .mv-next[disabled] { opacity: .3; cursor: not-allowed; }

.mv-stage {
  position: relative;       /* ancla mv-prev/mv-next al stage para centrar sobre la imagen */
  flex: 1 1 auto;
  min-height: 0;            /* clave: permite que el stage se reduzca en flex column */
  display: flex; align-items: center; justify-content: center;
  padding: 40px 72px;
  overflow: hidden;
}
.mv-stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--radius-sm);
  display: block;
}

.mv-bar {
  flex: 0 0 auto;           /* la barra nunca se achica */
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mv-meta { flex: 1; }

@media (max-width: 640px) {
  .mv-stage { padding: 60px 16px 16px; }
  .mv-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .mv-prev  { left: 8px; width: 40px; height: 40px; }
  .mv-next  { right: 8px; width: 40px; height: 40px; }
  .mv-bar {
    padding: 10px 14px; gap: 8px; flex-wrap: wrap;
  }
  .mv-meta { flex-basis: 100%; order: -1; }
}

/* ---------- RESPONSIVE GENERICO ---------- */
@media (max-width: 900px) {
  .app-main { padding: 16px; }
}

/* ---------- ACCESIBILIDAD: reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}