/* ── Tema claro (default) ─────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --primary: #6366f1;

  --app-bg:         #f8fafc;
  --app-card-bg:    #ffffff;
  --app-text:       #1e293b;
  --app-text-muted: #64748b;
  --app-border:     #e2e8f0;
  --app-input-bg:   #f1f5f9;
  --app-hover:      #f1f5f9;

  --sidebar-bg:     #0f172a;
  --sidebar-text:   #cbd5e1;
  --sidebar-border: #1e293b;
  --sidebar-hover:  rgba(255,255,255,.08);

  --header-bg:      #ffffff;
  --header-border:  #e2e8f0;
}

/* ── Tema oscuro ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --app-bg:         #0f172a;
  --app-card-bg:    #1e293b;
  --app-text:       #e2e8f0;
  --app-text-muted: #94a3b8;
  --app-border:     #334155;
  --app-input-bg:   #0f172a;
  --app-hover:      #334155;

  --sidebar-bg:     #020617;
  --sidebar-text:   #cbd5e1;
  --sidebar-border: #1e293b;
  --sidebar-hover:  rgba(255,255,255,.06);

  --header-bg:      #1e293b;
  --header-border:  #334155;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--app-bg);
  color: var(--app-text);
}

/* ── Bootstrap overrides con variables CSS ────────────────────────────────── */
.card {
  background: var(--app-card-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

/* Inputs, selects, textareas */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}
.form-control::placeholder { color: var(--app-text-muted) !important; }

/* Input group */
.input-group-text {
  background: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text-muted) !important;
}

/* Switch / checkbox */
.form-check-input {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
}
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-check-label { color: var(--app-text) !important; }

/* Buttons */
.btn-primary  { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.btn-light    { background: var(--app-input-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }

/* Table */
.table        { color: var(--app-text) !important; --bs-table-bg: transparent; }
.table-hover tbody tr:hover td { background: var(--app-hover) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }

/* Pagination */
.page-link     { background: var(--app-card-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }
.page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: white !important; }
.page-item.disabled .page-link { opacity: .4; }

/* Labels */
.form-label { color: var(--app-text) !important; }
label       { color: var(--app-text) !important; }

/* Invalid feedback */
.invalid-feedback { color: #ef4444 !important; }
.is-invalid       { border-color: #ef4444 !important; }

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideIn { from { opacity:0; transform:translateX(110%) } to { opacity:1; transform:translateX(0) } }
@keyframes spin    { to   { transform: rotate(360deg); } }

/* ── Scrollbar discreta ───────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--app-border) transparent; }

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--app-border); border-radius: 3px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* El sidebar siempre es oscuro (independiente del tema claro/oscuro de la app),
   así que su scrollbar necesita su propio contraste fijo en vez de heredar
   var(--app-border) (que en modo claro es casi blanco y se pierde). */
#sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
#sidebar-nav::-webkit-scrollbar-thumb       { background: #334155; }
#sidebar-nav::-webkit-scrollbar-thumb:hover { background: #475569; }


/* ─────────────────────────────────────────────────────────────
   BOTÓN BASE (comportamiento global)
──────────────────────────────────────────────────────────── */

.btn {
  transition: all 0.15s ease-in-out;
  border-radius: 8px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0px);
}

.btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(99,102,241,.25) !important;
}

/* ─────────────────────────────────────────────────────────────
   PRIMARY (principal)
──────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.btn-primary:active {
  background: #4338ca !important;
  border-color: #4338ca !important;
}

/* ─────────────────────────────────────────────────────────────
   SECONDARY
──────────────────────────────────────────────────────────── */

.btn-secondary {
  background: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.btn-secondary:hover {
  background: var(--app-hover) !important;
  border-color: var(--app-border) !important;
}

/* ─────────────────────────────────────────────────────────────
   SUCCESS
──────────────────────────────────────────────────────────── */

.btn-success {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

.btn-success:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
}

/* ─────────────────────────────────────────────────────────────
   DANGER
──────────────────────────────────────────────────────────── */

.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* ─────────────────────────────────────────────────────────────
   WARNING
──────────────────────────────────────────────────────────── */

.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #111827 !important;
}

.btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
}

/* ─────────────────────────────────────────────────────────────
   INFO
──────────────────────────────────────────────────────────── */

.btn-info {
  background: #06b6d4 !important;
  border-color: #06b6d4 !important;
  color: #fff !important;
}

.btn-info:hover {
  background: #0891b2 !important;
  border-color: #0891b2 !important;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT
──────────────────────────────────────────────────────────── */

.btn-light {
  background: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.btn-light:hover {
  background: var(--app-hover) !important;
}

/* ─────────────────────────────────────────────────────────────
   OUTLINE BUTTONS (muy importantes)
──────────────────────────────────────────────────────────── */

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

.btn-outline-danger {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.btn-outline-danger:hover {
  background: #ef4444 !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

.btn-outline-secondary:hover {
  background: var(--app-hover) !important;
}

/* ─────────────────────────────────────────────────────────────
   DISABLED (para todos)
──────────────────────────────────────────────────────────── */

.btn:disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none !important;
}


 /* Loader personalizado */
.loader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:4px solid rgba(255,255,255,0.3);border-top:4px solid #fff;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS RESPONSIVE — tablet, Android, iPhone y pantallas pequeñas
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img, video, canvas, svg, iframe {
  max-width: 100%;
}

input, select, textarea, button {
  max-width: 100%;
}

#app-root,
#page-content,
#page-content > * {
  min-width: 0;
  max-width: 100%;
}

#page-content {
  overflow-x: hidden !important;
}

.table-responsive,
#page-content .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#page-content .table {
  width: 100%;
}

.modal-dialog {
  max-width: min(calc(100vw - 2rem), var(--bs-modal-width, 500px));
  margin-left: auto;
  margin-right: auto;
}

.atlas-upload-global-toast,
#toast-container {
  max-width: calc(100vw - 2rem) !important;
}

/* Mejora los objetivos táctiles sin agrandar controles compactos internos. */
@media (pointer: coarse) {
  button:not(.page-link):not(.tecla),
  .btn,
  [role="button"] {
    min-height: 42px;
  }

  input,
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important; /* evita zoom automático en iOS */
  }
}

@media (max-width: 991.98px) {
  #page-content {
    padding: 1.25rem !important;
  }

  #app-root header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #page-content .card-body {
    padding: 1rem;
  }

  #page-content .row {
    --bs-gutter-x: 1rem;
  }
}

@media (max-width: 767.98px) {
  #page-content {
    padding: .9rem !important;
  }

  #app-root header {
    height: 58px !important;
    min-height: 58px;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    gap: .5rem !important;
  }

  #user-menu-btn {
    padding-right: .25rem !important;
  }

  #user-dropdown {
    position: fixed !important;
    top: 64px !important;
    left: .75rem !important;
    right: .75rem !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
  }

  #banner-llamada {
    top: .65rem !important;
    left: .65rem !important;
    right: .65rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: .8rem !important;
    gap: .65rem !important;
  }

  .atlas-upload-global-toast {
    left: .75rem !important;
    right: .75rem !important;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #toast-container {
    left: .75rem !important;
    right: .75rem !important;
    top: .75rem !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #toast-container > div {
    width: 100%;
  }

  .modal-dialog {
    max-width: calc(100vw - 1rem);
    margin: .5rem auto;
  }

  .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
  }

  .card,
  .atlas-video-card {
    border-radius: 14px !important;
  }

  .d-flex.justify-content-between,
  .d-flex.align-items-center.justify-content-between {
    gap: .75rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 479.98px) {
  #page-content {
    padding: .65rem !important;
  }

  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.18rem; }
  h4 { font-size: 1.05rem; }

  .btn {
    white-space: normal;
  }

  .input-group {
    flex-wrap: nowrap;
  }

  .pagination {
    flex-wrap: wrap;
    gap: .2rem;
  }
}

/* Radios/checkboxes nativos siguiendo el color de marca en vez del
   default del navegador (se ve mal, tipo circulo blanco perdido, en
   tema oscuro). */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--primary, #6366f1);
}