/* ─── Tipografía Satoshi (debe ir antes de cualquier regla) ─────────────── */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@1,500,700,300,401,400,701,501,300&display=swap');

/* ─── Variables ARKKANE ──────────────────────────────────────────────────── */
:root {
  --bg-primary:   #080B0F;
  --bg-secondary: #111315;
  --bg-card:      #171A1D;
  --text-primary: #F5F7FA;
  --text-secondary: #8B9199;
  --text-muted:   #5D636A;
  --accent:       #C98B2E;
  --accent-hover: #B07825;
  --success:      #3F7A5F;
  --danger:       #B0413E;
  --warning:      #C98B2E;
  --info:         #4A6B82;
  --border:       #2A2E33;
  --border-hover: #3D4248;
  --sidebar-w:    260px;
}

/* ─── Bootstrap dark → ARKKANE palette ──────────────────────────────────── */
[data-bs-theme="dark"] {
  /* Base */
  --bs-body-bg:                    #080B0F;
  --bs-body-bg-rgb:                8, 11, 15;
  --bs-body-color:                 #F5F7FA;
  --bs-body-color-rgb:             245, 247, 250;
  --bs-secondary-color:            #8B9199;
  --bs-emphasis-color:             #F5F7FA;
  --bs-secondary-bg:               #111315;
  --bs-tertiary-bg:                #171A1D;

  /* Links */
  --bs-link-color:                 #C98B2E;
  --bs-link-hover-color:           #B07825;
  --bs-link-color-rgb:             201, 139, 46;

  /* Borders */
  --bs-border-color:               #2A2E33;
  --bs-border-color-translucent:   rgba(42, 46, 51, .5);

  /* Cards */
  --bs-card-bg:                    #171A1D;
  --bs-card-border-color:          #2A2E33;
  --bs-card-cap-bg:                #111315;
  --bs-card-color:                 #F5F7FA;

  /* Tables */
  --bs-table-bg:                   transparent;
  --bs-table-color:                #F5F7FA;
  --bs-table-border-color:         #2A2E33;
  --bs-table-striped-bg:           rgba(17, 19, 21, .5);
  --bs-table-striped-color:        #F5F7FA;
  --bs-table-hover-bg:             rgba(201, 139, 46, .06);
  --bs-table-hover-color:          #F5F7FA;
  --bs-table-active-bg:            rgba(201, 139, 46, .1);

  /* Forms */
  --bs-form-control-bg:            #111315;
  --bs-input-bg:                   #111315;
  --bs-input-border-color:         #2A2E33;
  --bs-input-color:                #F5F7FA;
  --bs-input-focus-border-color:   #C98B2E;
  --bs-input-group-addon-bg:       #111315;
  --bs-input-group-addon-color:    #8B9199;
  --bs-input-group-addon-border-color: #2A2E33;

  /* Modals */
  --bs-modal-bg:                   #171A1D;
  --bs-modal-border-color:         #2A2E33;
  --bs-modal-header-border-color:  #2A2E33;
  --bs-modal-footer-border-color:  #2A2E33;
  --bs-modal-color:                #F5F7FA;

  /* Dropdowns */
  --bs-dropdown-bg:                #171A1D;
  --bs-dropdown-border-color:      #2A2E33;
  --bs-dropdown-link-color:        #F5F7FA;
  --bs-dropdown-link-hover-bg:     #111315;
  --bs-dropdown-link-hover-color:  #F5F7FA;
  --bs-dropdown-link-active-bg:    #C98B2E;

  /* List groups */
  --bs-list-group-bg:              #171A1D;
  --bs-list-group-border-color:    #2A2E33;
  --bs-list-group-color:           #F5F7FA;
  --bs-list-group-action-hover-bg: #111315;
  --bs-list-group-action-active-bg:#111315;

  /* Pagination */
  --bs-pagination-bg:              #111315;
  --bs-pagination-border-color:    #2A2E33;
  --bs-pagination-color:           #8B9199;
  --bs-pagination-hover-bg:        #171A1D;
  --bs-pagination-hover-color:     #F5F7FA;
  --bs-pagination-active-bg:       #C98B2E;
  --bs-pagination-active-border-color: #C98B2E;
  --bs-pagination-disabled-bg:     #111315;

  /* Alerts — usan body-color como base, heredan correctamente */
  --bs-alert-color:                #F5F7FA;

  /* Toasts / Popovers */
  --bs-toast-bg:                   rgba(23, 26, 29, .95);
  --bs-toast-border-color:         rgba(42, 46, 51, .85);
  --bs-popover-bg:                 #171A1D;
  --bs-popover-border-color:       #2A2E33;
}

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

body {
  font-family: 'Satoshi Variable', 'Satoshi', 'Inter', -apple-system, system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  min-height: 100vh;
}

/* ─── Headings: Satoshi Variable ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.page-title,
.card-title,
.section-title,
.nav-section,
.modal-title {
  font-family: 'Satoshi Variable', 'Satoshi', -apple-system, system-ui, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ─── Layout: sidebar + main ─────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform .25s ease;
  overflow-y: auto;
}

.main-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
}

/* ─── Sidebar header ─────────────────────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  min-height: 64px;
}

/* ─── ARKKANE brand (sidebar header) ────────────────────────────────────── */
.arkkane-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.brand-org {
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-separator {
  color: var(--text-muted);
  flex-shrink: 0;
}
.brand-arkkane {
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  flex-shrink: 0;
}

.btn-sidebar-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem .5rem;
}

/* ─── Sidebar nav ────────────────────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  padding: .5rem 0 1rem;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.25rem;
  color: var(--text-secondary);
  font-size: .875rem;
  font-weight: 500;
  border-radius: 0;
  transition: background .15s, color .15s;
}

.sidebar-nav .nav-link i {
  font-size: 1.05rem;
  flex-shrink: 0;
  width: 1.2rem;
  text-align: center;
}

.sidebar-nav .nav-link:hover {
  background: rgba(201,139,46,.08);
  color: var(--text-primary);
}

.sidebar-nav .nav-link.active {
  background: rgba(201,139,46,.15);
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

.sidebar-nav .nav-link.disabled-link {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: auto;
}

/* ─── Tabs de configuración ──────────────────────────────────────────────── */
.config-tabs { border-bottom: 1px solid var(--border); }
.config-tabs .nav-link {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 20px;
  font-weight: 500;
}
.config-tabs .nav-link:hover {
  color: var(--text-primary);
  background: rgba(201,139,46,.05);
}
.config-tabs .nav-link.active {
  color: var(--accent);
  background: transparent;
  border-bottom: 2px solid var(--accent);
}
.config-tabs .nav-link i { margin-right: 6px; }

.nav-section {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 1rem 1.25rem .35rem;
}

/* ─── Overlay móvil ──────────────────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1039;
}

/* ─── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
  height: 60px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.btn-hamburger {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: .25rem .5rem;
  display: none;
}

.topbar-info { flex: 1; }

.topbar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.bg-role {
  background: rgba(201,139,46,.2);
  color: var(--accent);
  font-size: .7rem;
}

/* ─── Flash messages ─────────────────────────────────────────────────────── */
.flash-container {
  padding: .75rem 1.25rem 0;
}

.flash-container .alert {
  border-radius: .5rem;
  font-size: .875rem;
}

/* ─── Contenido de página ────────────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 1.5rem 1.25rem;
}

/* ─── Cards de habitación ────────────────────────────────────────────────── */
.grid-habitaciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.card-habitacion {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem 1rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: default;
  transition: border-color .2s, transform .1s;
  position: relative;
}

.card-habitacion:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card-habitacion .numero {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.card-habitacion .tipo {
  font-size: .75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.card-habitacion .estado-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 999px;
  margin-top: .25rem;
}

/* Estados */
.card-habitacion--disponible { border-color: var(--success); }
.card-habitacion--disponible .estado-badge {
  background: rgba(22,163,74,.2);
  color: #4ade80;
}

.card-habitacion--ocupada { border-color: var(--danger); }
.card-habitacion--ocupada .estado-badge {
  background: rgba(220,38,38,.2);
  color: #f87171;
}

.card-habitacion--limpieza { border-color: var(--warning); }
.card-habitacion--limpieza .estado-badge {
  background: rgba(201,139,46,.2);
  color: var(--accent);
}

.card-habitacion--mantenimiento { border-color: var(--text-secondary); }
.card-habitacion--mantenimiento .estado-badge {
  background: rgba(148,163,184,.15);
  color: var(--text-secondary);
}

/* ─── Separador de piso ──────────────────────────────────────────────────── */
.piso-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: .5rem 0 .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}

/* ─── Página de login ────────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: 1rem;
}

.login-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
}

.login-logo {
  display: block;
  margin: 0 auto .75rem;
  height: 60px;
  width: auto;
}

.login-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: .85rem;
  margin-bottom: 1.75rem;
}

/* Logo en sidebar */
.arkkane-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

/* ─── Bootstrap overrides (dark) ─────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-primary);
  border-color: var(--border);
  color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
  background: var(--bg-primary);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 0 0 .2rem rgba(201,139,46,.25);
}

.form-control::placeholder { color: var(--text-secondary); }

.form-label {
  color: var(--text-secondary);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .35rem;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f172a;
  font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #0f172a;
}

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

.btn-outline-secondary:hover {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}

.alert-success  { background: rgba(22,163,74,.15);  border-color: var(--success); color: #4ade80; }
.alert-danger   { background: rgba(220,38,38,.15);  border-color: var(--danger);  color: #f87171; }
.alert-warning  { background: rgba(201,139,46,.15); border-color: var(--warning); color: var(--accent); }
.alert-info     { background: rgba(59,130,246,.15); border-color: var(--info);    color: #93c5fd; }

.btn-close { filter: invert(1) brightness(.6); }

/* ─── Página de error ────────────────────────────────────────────────────── */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}

.error-code {
  font-size: 6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .btn-hamburger {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   M2 — Tablero funcional: timers, modales, botones de acción
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Timer display ──────────────────────────────────────────────────────── */
.timer-display {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  margin: .4rem 0 .1rem;
}

.timer-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: .3rem;
}

.timer-normal { color: #4ade80; }
.timer-alerta { color: var(--warning); }
.timer-extra  { color: var(--danger); }

/* ─── Card states adicionales ─────────────────────────────────────────────── */
.card-habitacion--alerta {
  border-color: var(--warning) !important;
  animation: pulso-alerta 1.5s ease-in-out infinite;
}
.card-habitacion--alerta .estado-badge {
  background: rgba(201,139,46,.2);
  color: var(--accent);
}

.card-habitacion--hora-extra {
  border-color: var(--danger) !important;
  animation: pulso-extra 1s ease-in-out infinite;
}
.card-habitacion--hora-extra .estado-badge {
  background: rgba(220,38,38,.2);
  color: #f87171;
}

@keyframes pulso-alerta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,139,46,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(201,139,46,0); }
}
@keyframes pulso-extra {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* ─── Botones de acción en cards ─────────────────────────────────────────── */
.card-buttons {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
  margin-top: .5rem;
}

.card-buttons .btn {
  font-size: .72rem;
  font-weight: 600;
  padding: .35rem .6rem;
  border-radius: .4rem;
  width: 100%;
  white-space: nowrap;
}

.btn-entrada   { background: var(--success);  border-color: var(--success);  color: #fff; }
.btn-checkout  { background: var(--danger);   border-color: var(--danger);   color: #fff; }
.btn-limpia    { background: var(--warning);  border-color: var(--warning);  color: #0f172a; }
.btn-mantto    { background: var(--bg-card);  border-color: var(--border);   color: var(--text-secondary); }
.btn-disponible-mantto { background: var(--info); border-color: var(--info); color: #fff; }

.card-buttons .btn:hover { opacity: .85; transform: none; }

/* ─── Modales — tema oscuro ──────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.modal-header {
  border-bottom: 1px solid var(--border);
}
.modal-footer {
  border-top: 1px solid var(--border);
}
.modal-title { font-weight: 700; }

/* ─── Tabla de resumen en checkout ─────────────────────────────────────────── */
.tabla-resumen {
  width: 100%;
  font-size: .875rem;
}
.tabla-resumen td {
  padding: .3rem 0;
  vertical-align: top;
}
.tabla-resumen td:last-child {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}
.tabla-resumen .fila-total td {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  border-top: 1px solid var(--border);
  padding-top: .6rem;
}
.tabla-resumen .fila-subtil td {
  color: var(--text-secondary);
  font-size: .8rem;
}

/* ─── Badge de total en checkout ─────────────────────────────────────────── */
.total-badge {
  background: rgba(201,139,46,.15);
  border: 1px solid var(--accent);
  border-radius: .75rem;
  padding: .75rem 1rem;
  text-align: center;
  margin-top: .75rem;
}
.total-badge .total-label {
  font-size: .75rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.total-badge .total-valor {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

/* ─── Spinner de carga en modal ──────────────────────────────────────────── */
.modal-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

/* ─── Info de habitación en modal ────────────────────────────────────────── */
.hab-info-box {
  background: var(--bg-card);
  border-radius: .5rem;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.hab-info-box .hab-numero-modal {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.hab-info-box .hab-detalle {
  font-size: .8rem;
  color: var(--text-secondary);
}
.hab-info-box .hab-detalle strong {
  color: var(--text-primary);
  display: block;
}