/* ══════════════════════════════════════════════
   HADS365 — SOLO COLORES, VALI MANEJA ESTRUCTURA
   ══════════════════════════════════════════════ */

.app-shell { display: contents; }

/* ── SIDEBAR COLORES ── */
.app-sidebar          { background-color: #084d6e !important; }
.app-sidebar__user    { background: #053a54 !important; }
.app-sidebar__user-name        { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; }
.app-sidebar__user-designation { color: #b8d4e3 !important; font-size: 11px !important; margin: 0 !important; }

.nav-header {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  padding: 18px 20px 6px !important;
  cursor: default !important;
  pointer-events: none !important;
}

.app-menu__item {
  color: #b8d4e3 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 20px !important;
  font-weight: 500 !important;
}
.app-menu__item:hover,
.app-menu__item:focus  { background: rgba(255,255,255,0.08) !important; color: #fff !important; text-decoration: none !important; }
.app-menu__item.active { background: rgba(255,255,255,0.12) !important; color: #fff !important; border-left: 3px solid rgba(255,255,255,0.8) !important; }

.app-menu__icon {
  font-size: 24px !important;
  width: 32px !important;
  text-align: center !important;
  margin-right: 8px !important;
}
.app-menu__item.active .app-menu__icon,
.app-menu__item:hover  .app-menu__icon { color: #fff !important; }

.app-menu__label { font-size: 18px !important; font-weight: 500 !important; white-space: nowrap !important; }

.treeview-menu { background: rgba(0,0,0,0.2) !important; }

.treeview-item {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  padding: 9px 16px 9px 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.treeview-item:hover,
.treeview-item:focus  { background: rgba(255,255,255,0.08) !important; color: #fff !important; text-decoration: none !important; }
.treeview-item.active { background: rgba(255,255,255,0.1) !important; color: #fff !important; border-left: 3px solid rgba(255,255,255,0.7) !important; }
.treeview-item .icon  { font-size: 13px !important; min-width: 16px !important; }

.treeview-indicator { margin-left: auto !important; color: #b8d4e3 !important; }

/* ── HEADER COLORES ── */
.app-header         { background: #084d6e !important; border-bottom: 1px solid #053a54 !important; }
.app-header__logo   { background: #053a54 !important; color: #fff !important; font-weight: 800 !important; font-size: 17px !important; }
.app-sidebar__toggle { color: rgba(255,255,255,0.8) !important; }
.app-sidebar__toggle:hover { color: #fff !important; text-decoration: none !important; }
.app-nav__item      { color: rgba(255,255,255,0.85) !important; }
.app-nav__item:hover { color: #fff !important; background: rgba(255,255,255,0.08) !important; }

/* ── CONTENIDO — solo color de fondo ── */
.app-content { background: #eef2f7 !important; }

/* ── TILES ── */
.tile {
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid #e4e9f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}
.tile-title { font-size: 14px !important; font-weight: 600 !important; color: #1A2035 !important; margin: 0 0 16px !important; }

/* ── BOTONES ── */
.btn-primary       { background: #084d6e !important; border-color: #084d6e !important; }
.btn-primary:hover { background: #053a54 !important; border-color: #053a54 !important; }

/* ── MÓDULOS HADS365 ── */
.module         { display: flex; flex-direction: column; gap: 16px; }
.module__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.module__title  { font-size: 20px; font-weight: 700; color: #1A2035; display: flex; align-items: center; gap: 10px; }
.module__sub    { font-size: 13px; color: #6B7280; margin: 2px 0 0; }
.module__toolbar { display: flex; align-items: center; gap: 10px; }

/* ── FORMULARIOS ── */
.form-layout    { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.form-main      { display: flex; flex-direction: column; gap: 16px; }
.form-card      { background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.form-section   { margin-bottom: 24px; }
.form-section:last-child { margin-bottom: 0; }
.form-section__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #6B7280; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #e4e9f0; }
.form-grid      { display: grid; gap: 16px; }
.form-grid--2   { grid-template-columns: 1fr 1fr; }
.form-group     { display: flex; flex-direction: column; gap: 6px; }
.form-label     { font-size: 13px; font-weight: 600; color: #374151; }
.form-input     { padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 14px; font-family: inherit; color: #1A2035; background: #fff; outline: none; transition: border-color 0.2s; }
.form-input:focus { border-color: #084d6e; box-shadow: 0 0 0 3px rgba(8,77,110,0.08); }
.form-actions   { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid #e4e9f0; margin-top: 8px; }
.form-preview__header { padding: 12px 16px; border-bottom: 1px solid #e4e9f0; }
.form-preview__title  { font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.form-preview__body   { padding: 16px; }
.preview-name   { font-size: 15px; font-weight: 700; color: #1A2035; margin: 0 0 2px; }
.preview-email  { font-size: 12px; color: #6B7280; margin: 0 0 12px; }
.preview-rows   { display: flex; flex-direction: column; gap: 8px; }
.preview-row    { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.preview-label  { color: #6B7280; }
.preview-val    { font-weight: 600; color: #1A2035; }
.form-tip       { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 16px; }
.form-tip__title { font-size: 12px; font-weight: 700; color: #92400E; margin: 0 0 4px; }
.form-tip__text  { font-size: 12px; color: #78350F; margin: 0; }
.required       { color: #C0392B; }
.field-error    { font-size: 12px; color: #DC2626; margin-top: 2px; display: block; }

/* ── BOTONES SISTEMA ── */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: opacity 0.2s, transform 0.1s; text-decoration: none; }
.btn:hover  { opacity: 0.88; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: #084d6e; color: #fff; }
.btn--ghost   { background: #F0F0F0; color: #4A5568; }
.btn--danger  { background: #DC2626; color: #fff; }
.btn--sm    { padding: 6px 12px; font-size: 12px; }
.btn--lg    { padding: 12px 24px; font-size: 14px; }
.btn--block { width: 100%; justify-content: center; }

/* ── DT TABLAS ── */
.dt-btn-nuevo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #084d6e; color: #fff; border: none; border-radius: 7px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.2s; }
.dt-btn-nuevo:hover { background: #053a54; }

/* ── PAGE CONTAINER ── */
.page-container { display: flex; flex-direction: column; gap: 16px; max-width: 1300px; }

/* ── BADGES ── */
.badge--success { background: #DCFCE7; color: #166534; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge--danger  { background: #FEE2E2; color: #991B1B; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }

/* ── SKELETONS ── */
.skeleton { background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton--text  { height: 13px; width: 55%; margin-bottom: 8px; }
.skeleton--short { height: 13px; width: 30%; }
.skeleton--value { height: 28px; width: 75%; }
.skeleton--list  { height: 100px; width: 100%; }

/* ── EMPTY STATE ── */
.empty-state       { font-size: 13px; color: #6B7280; text-align: center; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-state__icon  { font-size: 2.5rem; opacity: 0.3; }
.empty-state__title { font-size: 15px; font-weight: 600; color: #374151; }
.empty-state__sub   { font-size: 13px; color: #9CA3AF; }

/* ── TOAST ── */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 9999; animation: slideIn 0.3s ease; }
.toast--success { background: #F0FFF4; color: #276749; border: 1px solid #C6F6D5; }
.toast--danger  { background: #FFF5F5; color: #C0392B; border: 1px solid #FED7D7; }
.toast--info    { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }

/* ── CAJA ── */
.caja-card          { background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 2rem; max-width: 640px; margin: 2rem auto; }
.caja-card--cerrada { border-color: #fca5a5; background: #fff5f5; text-align: center; }
.caja-card--abierta { border-color: #86efac; background: #f0fdf4; }
.caja-card__title   { font-size: 1.5rem; font-weight: 700; color: #1A2035; margin-bottom: 0.5rem; }
.caja-card__sub     { color: #6B7280; margin-bottom: 1.5rem; font-size: 0.95rem; }
.caja-card__header  { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.caja-card__actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.caja-badge         { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.caja-badge--abierta { background: #bbf7d0; color: #15803d; }
.caja-badge--cerrada { background: #f0f0f0; color: #6B7280; }
.caja-stats  { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.caja-stat   { background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 8px; padding: 0.875rem 1rem; }
.caja-stat__label { font-size: 0.78rem; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; }
.caja-stat__value { font-size: 1.1rem; font-weight: 700; color: #1A2035; }

/* ── POS ── */
.pos-wrap       { display: flex; flex-direction: column; height: calc(100vh - 50px); overflow: hidden; background: #eef2f7; }
.pos-fullscreen { display: flex; flex-direction: column; height: calc(100vh - 50px); overflow: hidden; background: #eef2f7; }
.pos-layout     { display: grid; grid-template-columns: 1fr 340px; flex: 1; overflow: hidden; }
.pos-col-left   { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid #e4e9f0; background: #eef2f7; }
.pos-col-right  { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.pos-cobrar-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: #084d6e; color: #fff; border: none; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit; transition: filter 0.15s, transform 0.1s; }
.pos-cobrar-btn:hover   { filter: brightness(1.1); }
.pos-cobrar-btn:active  { transform: scale(0.99); }
.pos-cobrar-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── DROPDOWN NAVBAR ── */
.settings-menu.show { display: block !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .form-layout    { grid-template-columns: 1fr; }
  .form-grid--2   { grid-template-columns: 1fr; }
  .pos-layout     { grid-template-columns: 1fr; }
  .pos-col-right  { max-height: 50vh; border-top: 2px solid #e4e9f0; }
  .module__header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .caja-stats     { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pos-layout { grid-template-columns: 1fr; }
}

.widget-small.primary { background: #084d6e !important; }
.widget-small.success { background: #27AE60 !important; }
.widget-small.warning { background: #F39C12 !important; }
.widget-small.danger  { background: #C0392B !important; }
.widget-small.info    { background: #2980B9 !important; }
.widget-small.coloured-icon .icon { color: rgba(255,255,255,0.4) !important; }
.widget-small .info h4 { color: rgba(255,255,255,0.85) !important; font-size: 13px !important; }
.widget-small .info p  { color: #fff !important; font-size: 18px !important; margin: 0 !important; }


/* ── POS TABS ── */
.pos-admin-tabs {
  background: #fff !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

.pos-admin-tab {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  color: #6b7280 !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s !important;
}

.pos-admin-tab:hover {
  color: #084d6e !important;
  background: #f8fafc !important;
}

.pos-admin-tab--active {
  color: #084d6e !important;
  border-bottom-color: #084d6e !important;
  background: none !important;
}

.pos-tab-badge {
  background: #C0392B !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  margin-left: 4px !important;
}

/* ── POS TICKET ── */
.pos-ticket-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 16px !important;
  min-height: 60vh !important;
}

.pos-ticket {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 36px 32px 28px !important;
  width: 480px !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}

.pos-ticket__icon--ok {
  width: 70px !important; height: 70px !important;
  border-radius: 50% !important;
  background: #EAF3DE !important; color: #3B6D11 !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; font-size: 34px !important;
}

.pos-ticket__title {
  font-size: 26px !important; font-weight: 700 !important;
  color: #111827 !important; margin: 0 !important;
}

.pos-ticket__folio {
  font-size: 15px !important; color: #6b7280 !important;
}

.ticket__rows {
  width: 100% !important;
  background: #f9fafb !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin-bottom: 10px !important;
}

.ticket__row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 15px !important;
  color: #6b7280 !important;
}

.ticket__row--total {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  padding-top: 10px !important;
  margin-top: 6px !important;
  border-top: 1px solid #e5e7eb !important;
}

.ticket__row--cambio {
  color: #0F6E56 !important;
  font-weight: 700 !important;
  font-size: 17px !important;
}

.pos-ticket__actions {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 6px !important;
}