/* FooterSoftware · Soft UI */
:root {
  --bg: #edf0f4;
  --card: #ffffff;
  --line: #e5e9f0;
  --txt: #0f172a;
  --mut: #697386;
  --soft: 0 1px 2px rgba(16,24,40,.05), 0 12px 32px -14px rgba(16,24,40,.14);
  --soft-sm: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px -6px rgba(16,24,40,.10);
}
.dark {
  --bg: #0b1220;
  --card: #151d31;
  --line: #233049;
  --txt: #e2e8f0;
  --mut: #93a4c3;
  --soft: 0 12px 32px -12px rgba(0,0,0,.6);
  --soft-sm: 0 4px 12px -6px rgba(0,0,0,.5);
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', system-ui, sans-serif;
}

.mut { color: var(--mut); }

/* Layout */
#app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
#sidebar { background: #1e293b; color: #fff; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
#main { display: flex; flex-direction: column; }
#topbar { background: var(--card); padding: 1rem 1.5rem; box-shadow: var(--soft-sm); display: flex; align-items: center; gap: 1rem; }
#content { padding: 1.5rem; flex: 1; }

/* Sidebar */
.sb-logo { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sb-logo-text { font-weight: 700; }
.sb-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; overflow-y: auto; }
.sb-section { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 1rem 0 0.5rem; padding-left: 0.75rem; }
.nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; color: #cbd5e1; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: #3b82f6; color: #fff; }
.sb-ico { width: 1.125rem; height: 1.125rem; }
.sb-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); }

/* Cards */
.card { background: var(--card); border-radius: 0.75rem; box-shadow: var(--soft); padding: 1.25rem; }

/* Inputs */
.inp { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); color: var(--txt); font-size: 0.875rem; }
.inp:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.lbl { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--mut); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.2s; }
.btn-primary { background: #3b82f6; color: #fff; }
.btn-primary:hover { background: #2563eb; }
.btn-success { background: #10b981; color: #fff; }
.btn-success:hover { background: #059669; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; color: var(--txt); }
.btn-ghost:hover { background: var(--bg); }

/* Chips */
.chip { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.chip-blue { background: #dbeafe; color: #1e40af; }
.chip-green { background: #d1fae5; color: #065f46; }
.chip-red { background: #fee2e2; color: #991b1b; }
.chip-amber { background: #fef3c7; color: #92400e; }
.chip-slate { background: var(--bg); color: var(--mut); }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th { text-align: left; padding: 0.75rem; border-bottom: 2px solid var(--line); font-weight: 600; color: var(--mut); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tbl td { padding: 0.75rem; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: none; }

/* Modal */
#modal-root { display: flex; align-items: center; justify-content: center; }
#modal-root.hidden { display: none !important; }
#modal-card { position: relative; z-index: 10; max-height: 90vh; overflow-y: auto; }

/* Toasts */
#toasts { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; }
.toast { background: var(--card); color: var(--txt); padding: 0.875rem 1rem; border-radius: 0.5rem; box-shadow: var(--soft); display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; animation: slideIn 0.3s ease; }
.toast.toast-error { border-left: 4px solid #ef4444; }
.toast.toast-success { border-left: 4px solid #10b981; }
.toast.toast-info { border-left: 4px solid #3b82f6; }

/* Icons */
.icon-btn { padding: 0.5rem; border-radius: 0.5rem; background: transparent; border: none; cursor: pointer; color: var(--mut); }
.icon-btn:hover { background: var(--bg); color: var(--txt); }

/* Dropdown */
.dropdown { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; background: var(--card); border-radius: 0.5rem; box-shadow: var(--soft); overflow: hidden; z-index: 50; min-width: 12rem; }
.dd-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; width: 100%; background: transparent; border: none; cursor: pointer; font-size: 0.875rem; color: var(--txt); }
.dd-item:hover { background: var(--bg); }
.dd-sep { height: 1px; background: var(--line); margin: 0.375rem 0; }

/* User pill */
.user-pill { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: var(--bg); cursor: pointer; }

/* Caja chip */
.caja-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.caja-chip.abierta { background: #d1fae5; color: #065f46; }
.caja-chip.cerrada { background: #fee2e2; color: #991b1b; }

/* Tasa badge */
.tasa-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: var(--bg); font-size: 0.75rem; cursor: pointer; }

/* Badge dot */
.badge-dot { position: absolute; top: 0.25rem; right: 0.25rem; width: 1rem; height: 1rem; background: #ef4444; color: #fff; border-radius: 9999px; font-size: 0.625rem; display: flex; align-items: center; justify-content: center; }

/* KPI */
.kpi-num { font-size: 1.875rem; font-weight: 800; }
.kpi-ico { width: 3rem; height: 3rem; border-radius: 0.75rem; background: var(--bg); display: flex; align-items: center; justify-content: center; color: #3b82f6; }
.kpi-foot { font-size: 0.75rem; color: var(--mut); margin-top: 0.5rem; }

/* Delta */
.delta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; }
.delta.up { color: #10b981; }
.delta.down { color: #ef4444; }

/* Quantity buttons */
.qty-btn { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; background: var(--bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--txt); }
.qty-btn:hover { background: var(--line); }

/* Switch */
.switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; }
.switch input { opacity: 0; width: 0; height: 0; }
.sl { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--line); transition: 0.3s; border-radius: 1.5rem; }
.sl:before { position: absolute; content: ""; height: 1.125rem; width: 1.125rem; left: 0.1875rem; bottom: 0.1875rem; background-color: white; transition: 0.3s; border-radius: 50%; }
input:checked + .sl { background-color: #3b82f6; }
input:checked + .sl:before { transform: translateX(1.25rem); }

/* Animations */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes popIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.anim-pop { animation: popIn 0.2s ease; }
.anim-in { animation: popIn 0.3s ease; }

/* Spin */
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Drawer */
.drawer-open #sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; }
.drawer-open #overlay { display: block; }

/* Responsive */
@media (max-width: 1024px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { display: none; }
  .drawer-open #sidebar { display: flex; }
}

/* Login background */
.login-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== COLAPSO SIDEBAR (modo mini) · escritorio · riel 64px con iconos ===== */
@media (min-width: 1024px) {
  /* Estrecha la 1ª columna del grid para que #main ocupe todo el ancho liberado */
  body.sidebar-mini #app { grid-template-columns: 64px 1fr; }

  /* Sidebar angosto con riel de 64px */
  body.sidebar-mini #sidebar {
    width: 64px; min-width: 64px; max-width: 64px;
    padding-left: 0.5rem; padding-right: 0.5rem; overflow: hidden;
    transition: width 0.2s ease;
  }

  /* Oculta textos del logo y secciones */
  body.sidebar-mini #sidebar .sb-logo-text,
  body.sidebar-mini #sidebar .sb-section,
  body.sidebar-mini #sidebar .sb-label,
  body.sidebar-mini #sidebar .sb-footer { display: none; }

  /* Centra iconos de cada item del menú */
  body.sidebar-mini #sidebar .nav-item {
    justify-content: center; padding-left: 0; padding-right: 0;
  }
  body.sidebar-mini #sidebar .sb-ico { margin: 0; }

  /* Logo centrado arriba */
  body.sidebar-mini #sidebar .sb-logo { justify-content: center; padding: 0; }
}
/* ===== Sidebar v5: transiciones de layout + icono animado del botón ===== */
@media (min-width: 1024px) {
  #app { transition: grid-template-columns .25s ease; }
  #sidebar { transition: width .25s ease, min-width .25s ease, max-width .25s ease, padding .25s ease; }
}
#btn-collapse svg.sbx { width: 20px; height: 20px; display: block; transition: transform .15s ease; }
#btn-collapse:hover svg.sbx { transform: scale(1.1); }
#btn-collapse .sbx-frame { fill: none; stroke: currentColor; stroke-width: 2; }
#btn-collapse .sbx-panel { fill: currentColor; transition: width .25s ease, x .25s ease; }
body.sidebar-mini #btn-collapse .sbx-panel { width: 2.5px; x: 5px; }
@keyframes sbx-pop { 0% { transform: scale(1); } 40% { transform: scale(.82) rotate(-6deg); } 100% { transform: scale(1); } }
#btn-collapse.pop svg.sbx { animation: sbx-pop .3s ease; }
/* ===== COLAPSO SIDEBAR (modo mini) · escritorio · riel 64px con iconos ===== */
@media (min-width: 1024px) {
  /* Estrecha la 1ª columna del grid para que #main ocupe todo el ancho liberado */
  body.sidebar-mini #app { grid-template-columns: 64px 1fr; }

  /* Sidebar angosto con riel de 64px */
  body.sidebar-mini #sidebar {
    width: 64px; min-width: 64px; max-width: 64px;
    padding-left: 0.5rem; padding-right: 0.5rem; overflow: hidden;
    transition: width 0.25s ease;
  }

  /* Oculta textos del logo y secciones */
  body.sidebar-mini #sidebar .sb-logo-text,
  body.sidebar-mini #sidebar .sb-section,
  body.sidebar-mini #sidebar .sb-label,
  body.sidebar-mini #sidebar .sb-footer { display: none; }

  /* Centra iconos de cada item del menú */
  body.sidebar-mini #sidebar .nav-item {
    justify-content: center; padding-left: 0; padding-right: 0;
  }
  body.sidebar-mini #sidebar .sb-ico { margin: 0; }

  /* Logo centrado arriba */
  body.sidebar-mini #sidebar .sb-logo { justify-content: center; padding: 0; }

  /* Transiciones suaves del layout */
  #app { transition: grid-template-columns 0.25s ease; }
}

/* ===== Sidebar: icono animado del botón de colapsar ===== */
#btn-collapse svg.sbx { width: 20px; height: 20px; display: block; transition: transform 0.15s ease; }
#btn-collapse:hover svg.sbx { transform: scale(1.1); }
#btn-collapse .sbx-frame { fill: none; stroke: currentColor; stroke-width: 2; }
#btn-collapse .sbx-panel { fill: currentColor; transition: width 0.25s ease, x 0.25s ease; }
body.sidebar-mini #btn-collapse .sbx-panel { width: 2.5px; x: 5px; }
@keyframes sbx-pop { 0% { transform: scale(1); } 40% { transform: scale(0.82) rotate(-6deg); } 100% { transform: scale(1); } }
#btn-collapse.pop svg.sbx { animation: sbx-pop 0.3s ease; }

/* Oculta el panel admin hasta que se confirme la sesión */