/* principalhome-modern.css
   Tema: CLARO por defecto (suave) + DARK mode opcional
   Incluye: logo empresa, botonera grande, action buttons consistentes y responsive
*/

/* =========================
   VARIABLES Y PALETA
   ========================= */
:root{
  /* Paleta clara suave (por defecto) */
  --bg-light: #f7fbff;            /* fondo general */
  --panel: #ffffff;               /* paneles / tarjetas */
  --text-dark: #10263a;           /* texto primario (gris azulado) */
  --muted-dark: #546e83;          /* texto secundario */
  --glass-border: rgba(16,38,58,0.06);
  --accent1: #7b6dff;             /* acento principal */
  --accent2: #4fc3f7;             /* acento secundario */
  --success: #16a34a;
  --shadow-soft: 0 6px 18px rgba(16,38,58,0.04);
  --shadow-strong: 0 10px 30px rgba(16,38,58,0.06);
  --radius-lg: 12px;
  --radius-sm: 8px;
  --transition-fast: 180ms ease;
}

/* =========================
   RESET / BASE
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body.modern-principal, body {
  margin:0;
  min-height:100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background: var(--bg-light);
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-left: 280px; /* espacio lateral para sidebar (si lo usas) */
  transition: background-color .25s var(--transition-fast), color .25s var(--transition-fast);
}

/* =========================
   SIDEBAR
   ========================= */
.sidebar-modern{
  position:fixed;
  left:0; top:0; bottom:0;
  width:260px;
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-right:1px solid var(--glass-border);
  z-index:1200;
}

/* Logo empresa (no distorsiona) */
.company-logo{
  display:block;
  margin:0 auto 8px;
  width:96px;
  height:96px;
  object-fit:contain;
  border-radius:10px;
  background:transparent;
}

/* Brand text */
.sidebar-modern .brand h5{
  margin:0;
  color:var(--text-dark);
  font-size:1rem;
  font-weight:600;
  text-align:center;
}
.sidebar-modern .brand small{ color:var(--muted-dark); display:block; text-align:center; margin-top:4px; }

/* Nav links */
.sidebar-modern .nav {
  display:flex; flex-direction:column; gap:.2rem;
}
.sidebar-modern .nav-link{
  color:var(--text-dark);
  padding:.6rem .75rem;
  border-radius:8px;
  display:flex;
  gap:.6rem;
  align-items:center;
  text-decoration:none;
  transition: transform .15s var(--transition-fast), background .15s var(--transition-fast);
}
.sidebar-modern .nav-link:hover{
  transform:translateY(-3px);
  background: rgba(13,110,253,0.06);
}

/* Footer area inside sidebar */
.sidebar-modern .mt-auto{ margin-top:auto; font-size:.88rem; color:var(--muted-dark); text-align:center; }

/* =========================
   MAIN AREA
   ========================= */
.main-area{
  padding:1.25rem 2rem;
  min-height:100vh;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

/* =========================
   BOTONERA PRINCIPAL
   ========================= */
.header-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
}

/* Botones ligeramente más grandes para mejor UX */
.header-buttons .btn{
  border-radius:10px;
  padding:.8rem 1.1rem;
  font-size:1rem;
  min-height:44px;
  transition: transform .15s var(--transition-fast), box-shadow .15s var(--transition-fast);
}

.header-buttons .btn:hover{ transform:translateY(-3px); }

/* Primary gradient */
.btn-primary{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff;
  border:none;
  box-shadow: var(--shadow-strong);
}

/* Outline / secondary */
.btn-outline-primary{
  border-radius:8px;
}

/* =========================
   SEARCH FORM
   ========================= */
.search-form .form-control,
.search-form .form-select{
  border-radius:10px;
  background:#fff;
  border:1px solid var(--glass-border);
  color:var(--text-dark);
}

/* =========================
   LISTADO / TARJETAS
   ========================= */
.factura-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  margin:0;
  list-style:none;
}

.factura-item{
  border-radius:var(--radius-lg);
  background: var(--panel);
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  padding:16px;
  transition: transform .12s var(--transition-fast), box-shadow .12s var(--transition-fast);
}

.factura-item:hover{
  transform:translateY(-4px);
  box-shadow: 0 12px 30px rgba(10,30,60,0.06);
}

.factura-item h5{ margin:0 0 6px 0; color:var(--text-dark); font-size:1rem; }
.factura-item p{ margin:0; color:var(--muted-dark); font-size:.95rem; }

/* =========================
   ACTION BUTTONS INSIDE CARDS (CONSISTENTES)
   ========================= */

/* Contenedor recomendado: por defecto fila en desktop */
.action-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;    /* que todos tengan la misma altura */
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Compatibilidad con markup existente (.text-end) */
.text-end {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.text-end br { display: none; } /* ocultar <br> si aún están en el HTML */

/* Botones dentro de la tarjeta: mismo tamaño y alineamiento */
.action-buttons .btn,
.text-end > .btn {
  display: inline-flex;
  align-items: center;         /* centra icono + texto verticalmente */
  justify-content: center;     /* centra texto horizontalmente */
  gap: 8px;                    /* espacio entre icono y texto */
  min-width: 150px;            /* ancho mínimo para consistencia */
  flex: 0 1 160px;             /* crecen/encogen pero mantienen proporción */
  height: 44px;                /* altura consistente */
  padding: 0 12px;             /* padding lateral */
  border-radius: 8px;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(10,30,60,0.04);
}

/* Iconos dentro de los botones (si los añades) */
.action-buttons .btn i,
.text-end > .btn i {
  font-size: 1.05em;
  margin-right: 6px;
  display: inline-block;
  line-height: 1;
}

/* Forzar que los botones ocupen toda la fila en pantallas pequeñas */
@media (max-width: 768px) {
  .action-buttons,
  .text-end {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .action-buttons .btn,
  .text-end > .btn {
    width: 100%;
    min-width: unset;
    flex: none;
  }
}

/* Si quieres forzar EXACTAMENTE el mismo ancho para todos (descomentar):
.action-buttons .btn, .text-end > .btn { width:160px; flex:none; }
*/

/* =========================
   GRÁFICOS / CONTENEDORES
   ========================= */
.charts-container{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; }
.chart-container{ flex:1; min-width:260px; background:transparent; }

/* Canvas full width */
canvas{ width:100% !important; height:auto !important; display:block; }

/* =========================
   FOOTER
   ========================= */
footer{
  margin-top:2rem;
  padding:1rem;
  text-align:center;
  color:#6b7280;
}

/* =========================
   ACCESIBILIDAD / FOCUS
   ========================= */
a:focus, button:focus, input:focus, select:focus{
  outline:3px solid rgba(123,109,255,0.14);
  outline-offset:2px;
}

/* =========================
   MISC
   ========================= */
.badge { padding:.25rem .5rem; border-radius:8px; font-weight:600; font-size:.82rem; }
.small-muted { color:var(--muted-dark); font-size:.9rem; }

/* =========================
   MODO OSCURO (activado añadiendo .dark-mode al body)
   ========================= */
body.dark-mode{
  --bg-light: linear-gradient(180deg,#071824,#0d2b3a);
  background: var(--bg-light);
  color: #e6eef8;
}

/* Sidebar oscuro */
body.dark-mode .sidebar-modern{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-right:1px solid rgba(255,255,255,0.03);
}
body.dark-mode .sidebar-modern .nav-link{ color: rgba(255,255,255,0.9); }
body.dark-mode .sidebar-modern .brand h5,
body.dark-mode .sidebar-modern .brand small { color: #eaf4ff; }

/* Tarjetas oscuro */
body.dark-mode .factura-item{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(2,6,23,0.5);
}
body.dark-mode .factura-item p{ color: rgba(235,240,255,0.8); }

/* Botones en modo oscuro */
body.dark-mode .btn-primary{ box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
body.dark-mode .btn-outline-primary{ color: #eaf4ff; border-color: rgba(255,255,255,0.06); }

/* =========================
   RESPONSIVE - OCULTAR SIDEBAR EN MOBILE
   ========================= */
@media (max-width: 992px){
  body.modern-principal{ padding-left: 0; }
  .sidebar-modern{ display:none; }
  .main-area{ padding:1rem; }
}

/* Ajustes para pantallas pequeñas: búsqueda y botones apilados */
@media (max-width: 768px){
  .search-form { gap:.5rem; flex-direction:column; align-items:stretch; display:flex; }
  .header-buttons{ gap:.5rem; }
  .header-buttons .btn{ width:100%; text-align:center; }
  .topbar{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .company-logo{ width:72px; height:72px; }
}

/* =========================
   SUTIL: sombra y elevación en hover botones
   ========================= */
.btn:hover{ box-shadow: 0 8px 18px rgba(14,30,50,0.06); transform:translateY(-2px); transition: all .15s var(--transition-fast); }


/* ------------------------------
   Estilos visibles para el toggle
   ------------------------------ */

/* Estilo base visible en modo CLARO (por defecto) */
#toggleDark {
  /* apariencia suave, visible sobre fondo claro */
  background: rgba(255,255,255,0.85);
  color: var(--text-dark);
  border: 1px solid rgba(16,38,58,0.08);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(16,38,58,0.06);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

/* Icono dentro del botón hereda el color para consistencia */
#toggleDark i { color: inherit; }

/* Hover / focus para accesibilidad */
#toggleDark:hover,
#toggleDark:focus {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.98);
  outline: none;
  box-shadow: 0 10px 26px rgba(16,38,58,0.08);
}

/* En modo oscuro invertimos colores para que siga siendo visible */
body.dark-mode #toggleDark {
  background: rgba(255,255,255,0.06);
  color: #eaf4ff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

/* Hover en dark */
body.dark-mode #toggleDark:hover,
body.dark-mode #toggleDark:focus {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

/* A11y: foco fuerte para teclado */
#toggleDark:focus-visible {
  outline: 3px solid rgba(123,109,255,0.18);
  outline-offset: 2px;
}

/* ------------------------------
   Estilos visibles para el toggle
   ------------------------------ */

/* Estilo base visible en modo CLARO (por defecto) */
#toggleDark {
  /* apariencia suave, visible sobre fondo claro */
  background: rgba(255,255,255,0.85);
  color: var(--text-dark);
  border: 1px solid rgba(16,38,58,0.08);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(16,38,58,0.06);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

/* Icono dentro del botón hereda el color para consistencia */
#toggleDark i { color: inherit; }

/* Hover / focus para accesibilidad */
#toggleDark:hover,
#toggleDark:focus {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.98);
  outline: none;
  box-shadow: 0 10px 26px rgba(16,38,58,0.08);
}

/* En modo oscuro invertimos colores para que siga siendo visible */
body.dark-mode #toggleDark {
  background: rgba(255,255,255,0.06);
  color: #eaf4ff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

/* Hover en dark */
body.dark-mode #toggleDark:hover,
body.dark-mode #toggleDark:focus {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

/* A11y: foco fuerte para teclado */
#toggleDark:focus-visible {
  outline: 3px solid rgba(123,109,255,0.18);
  outline-offset: 2px;
}

/* FIN del archivo CSS */