/* =========================================================
   ERP Ecuador – Theme v11
   - Sidebar FIXED sin hueco
   - Colapsado sin textos “fantasma”
   - Oscuro con inputs más legibles
   ========================================================= */

:root{
  /* tamaños */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;

  /* paleta oscura refinada */
  --bg: #0a0f1b;         /* fondo general */
  --bg-2:#0c1322;        /* fondo de capa */
  --panel:#0f192e;       /* tarjeta */
  --panel-2:#0b1327;     /* tarjeta oscura */
  --text:#e5edff;        /* texto principal */
  --muted:#a6b4d6;       /* texto secundario */
  --line:#1c2a4d;        /* líneas/bordes */

  --brand:#2a5aff;
  --brand-2:#1e40f9;
  --focus:#4f7cff;

  --ok:#21c08b;
  --warn:#f59e0b;
  --danger:#e75555;

  --shadow: 0 12px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1400px 700px at -300px -300px, #101a34 0%, transparent 65%) , linear-gradient(180deg, #0a0f1b, #070c16 60%, #060a14);
}

/* ======= LAYOUT ===================================================== */
.app{min-height:100dvh}

/* Sidebar fijo (sin huecos al final de la página) */
.sidebar{
  position:fixed; top:0; left:0; height:100vh;
  width:var(--sidebar-w);
  background: linear-gradient(180deg, #0d162b 0%, #0a0f1b 100%);
  border-right:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index:30;
  transition: width .18s ease;
}

/* Contenido desplazado por el ancho del sidebar */
.main{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  display:flex; flex-direction:column; min-width:0;
  transition: margin-left .18s ease;
}

/* Colapsado: SOLO iconos, nada de letras sueltas */
.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed)}
.sidebar-collapsed .main{margin-left:var(--sidebar-w-collapsed)}

/* ======= Sidebar interior ========================================== */
.sidebar-inner{height:100%; display:flex; flex-direction:column}
.brand{display:flex; align-items:center; gap:12px; padding:18px 18px 12px}
.brand-logo{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background: linear-gradient(135deg,#2f6aff 0%,#1c3ed7 100%);
  color:#fff;font-weight:800;letter-spacing:.4px;
  box-shadow:0 10px 20px rgba(33,83,246,.35)
}
.brand-title{font-weight:700}
.brand-muted{font-size:12px;color:var(--muted)}
.brand-text{min-width:0}

/* Ocultar textos al colapsar (sin overflow extraño) */
.sidebar-collapsed .brand-text{display:none}

.menu{padding:8px 10px 14px; overflow:auto; height:calc(100vh - 74px)}
.menu-section{color:var(--muted); font-size:12px; margin:16px 8px 6px}
.menu-item{
  display:flex; align-items:center; gap:12px;
  color:var(--text); text-decoration:none;
  padding:10px 12px; margin:4px 2px;
  border-radius:12px; border:1px solid transparent;
  background: transparent; transition:border-color .15s, background .15s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu-item .icon{width:22px; display:grid; place-items:center; opacity:.95; flex:0 0 auto}
.menu-item .label{flex:1 1 auto; min-width:0}

.menu-item:hover{background:rgba(255,255,255,.04); border-color:var(--line)}
.menu-item.is-active{
  background: linear-gradient(180deg, rgba(42,90,255,.20), rgba(42,90,255,.10));
  border-color: rgba(42,90,255,.48);
  box-shadow: inset 0 0 0 1px rgba(42,90,255,.32);
}

/* Colapsado: sólo icono centrado */
.sidebar-collapsed .menu{padding-left:12px; padding-right:12px}
.sidebar-collapsed .menu-section{display:none}
.sidebar-collapsed .menu-item{justify-content:center; padding:10px}
.sidebar-collapsed .menu-item .label{display:none}

/* ======= Topbar ===================================================== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px;
  background: linear-gradient(180deg, rgba(13,22,43,.86), rgba(10,15,27,.86));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(6px);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--line); color:var(--text);
  background: linear-gradient(180deg, #111a31, #0e162a);
}
.btn:hover{border-color:#3456ff4f}
.btn.brand{background: linear-gradient(180deg, #2a5aff, #2247f0); border-color:#2d55ff}
.btn.ghost{background:transparent}

/* Migas */
.crumbs{display:flex; align-items:center; gap:8px; font-weight:600}
.crumbs .crumb-sep{opacity:.4}

/* ======= Contenido ================================================== */
.content{flex:1; padding:20px 18px 28px}
.container{max-width:1200px; margin:0 auto}
h1,h2,h3{margin:0 0 14px} h1{font-size:26px} h2{font-size:20px} h3{font-size:16px}

/* Tarjetas */
.card{
  background: linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:16px;
}
.card + .card{margin-top:14px}
.card-title{font-size:18px; font-weight:700; margin-bottom:12px}

/* ======= Formularios (más legibles en oscuro) ======================= */
label{font-size:12px; color:var(--muted); margin-bottom:6px; display:block}
input[type="text"], input[type="password"], select, textarea{
  width:100%; color:var(--text);
  background: linear-gradient(180deg,#131d36 0%, #0f1a33 100%);
  border:1px solid #27365c;
  outline:none; border-radius:12px; padding:12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder{color:#b2c0e24d}

input:focus, select:focus, textarea:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(79,124,255,.25);
}

/* Select con chevron */
select{
  appearance:none;
  background-image:
     linear-gradient(45deg,transparent 50%, #9fb6ff 50%),
     linear-gradient(135deg, #9fb6ff 50%, transparent 50%);
  background-position:calc(100% - 14px) 18px, calc(100% - 9px) 18px;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
}

/* Grid helpers */
.row{display:grid; gap:14px}
.row-2{grid-template-columns:repeat(2,1fr)}
.row-3{grid-template-columns:repeat(3,1fr)}
.row-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1200px){ .row-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 900px){
  .row-3,.row-2,.row-4{grid-template-columns:1fr}
  .topbar{padding-left:12px}
}

/* Tablas */
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{font-size:12px; color:var(--muted); text-align:left; padding:0 10px 6px}
.table td{
  background: linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid var(--line);
  padding:12px 10px; border-right:0; border-left:0
}
.table tr td:first-child{border-left:1px solid var(--line); border-radius:12px 0 0 12px}
.table tr td:last-child{border-right:1px solid var(--line); border-radius:0 12px 12px 0}

/* Badges */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:12px; border:1px solid #2b3b67; background:#111c38}
.badge.ok{border-color:#1fa977; background:#102b22}
.badge.warn{border-color:var(--warn); background:#2a1f0f}
.badge.danger{border-color:var(--danger); background:#2a1210}

/* Footer */
.footer{padding:20px 18px; border-top:1px solid var(--line); color:var(--muted)}

/* =========================================================
   CONTENIDO EN TEMA CLARO (sidebar se mantiene oscuro)
   ========================================================= */
:root{
  /* variables para el área de contenido (derecha) – Light */
  --c-bg:      #f5f7fb;
  --c-panel:   #ffffff;
  --c-panel-2: #fcfdff;
  --c-text:    #172036;
  --c-muted:   #64708a;
  --c-line:    #e3e9f3;
  --c-input:   #ffffff;
  --c-shadow:  0 10px 24px rgba(10,28,80,.08);
}

/* Fondo general del contenido */
.main{ background: var(--c-bg); }

/* Tipografía del contenido */
.content{ color: var(--c-text); }

/* Tarjetas claras */
.card{
  background: var(--c-panel);
  border-color: var(--c-line);
  box-shadow: var(--c-shadow);
}

/* Etiquetas */
label{ color: var(--c-muted); }

/* Controles claros */
input[type="text"], input[type="password"], select, textarea{
  background: var(--c-input);
  color: var(--c-text);
  border:1px solid var(--c-line);
  box-shadow:none;
}
input::placeholder, textarea::placeholder{ color:#95a1b5; }
input:focus, select:focus, textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(42,90,255,.15);
}

/* Tablas claras */
.table td{
  background:#fff;
  border-color:var(--c-line);
}
.table tr td:first-child{ border-left:1px solid var(--c-line); border-radius:12px 0 0 12px }
.table tr td:last-child{ border-right:1px solid var(--c-line); border-radius:0 12px 12px 0 }

/* Footer en claro */
.footer{
  border-top:1px solid var(--c-line);
  color:var(--c-muted);
}

/* ============================================
   OPCIONAL: contenido en oscuro si body.content-dark
   ============================================ */
body.content-dark .main{ background: transparent; }

body.content-dark .card{
  background: linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

body.content-dark input[type="text"],
body.content-dark input[type="password"],
body.content-dark select,
body.content-dark textarea{
  background: linear-gradient(180deg,#131d36 0%, #0f1a33 100%);
  border:1px solid #27365c;
  color: var(--text);
}

body.content-dark .footer{
  border-top:1px solid var(--line);
  color:var(--muted);
}

/* --------- Chips / Badges (píldoras) --------- */
.badge, .pill, .tag {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .7rem; border-radius:999px;
  font-weight:600; font-size:.88rem; letter-spacing:.2px;
  background:#eaf1ff; color:#17305f; /* claro */
  border:1px solid rgba(23,48,95,.08);
}
.content-dark .badge, 
.content-dark .pill, 
.content-dark .tag {
  background:#13223e; color:#e9f2ff;  /* oscuro: texto claro */
  border-color:#27365c;
}

/* --------- Botones: aseguremos contraste --------- */
.btn, button, input[type=submit] {
  color:var(--text);
}
.btn.primary, .btn-primary { 
  background:#2254f5; color:#fff; border:1px solid #1c46ca;
}
.btn.dark, .btn-secondary, .btn-dark { 
  background:#0f1a33; color:#fff; border:1px solid #27365c;
}
.btn.danger, .btn-danger {
  background:#e03131; color:#fff; border:1px solid #b12828;
}
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* Hover/focus un poco más visibles */
.btn.primary:hover { filter:brightness(1.05); }
.btn.dark:hover, .btn-secondary:hover { filter:brightness(1.1); }
.btn.danger:hover { filter:brightness(1.05); }

/* --------- Inputs & selects: placeholders legibles --------- */
input[type="text"], input[type="password"], select, textarea {
  color:var(--text);
}
::placeholder { color:#7a8aaa; opacity:1; }
.content-dark ::placeholder { color:#aeb9d1; }

/* En oscuro, que los controles mantengan contraste */
.content-dark input[type="text"],
.content-dark input[type="password"],
.content-dark select, 
.content-dark textarea {
  background:linear-gradient(180deg,#131d36 0%, #0f1a33 100%);
  border:1px solid #27365c;
  color:#e9f2ff;
}

/* Cartas en oscuro con mejor lectura */
.content-dark .card{
  background:linear-gradient(180deg, #0e1730 0%, #0b142a 100%);
  border:1px solid #27365c;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}

/* Ajustes a contadores/etiquetas en el encabezado de las tarjetas */
.card .badge.count {
  background:#0f1a33; color:#e9f2ff; border-color:#27365c;
}

/* === Reforzar layout y colapso (sin “fantasmas”) =================== */

/* Sidebar ya está fixed/100vh en tu tema, solo reforzamos la estructura interna */
.sidebar-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Navegación: scroll propio; deja espacio para el bloque account inferior */
.menu{
  padding:8px 10px 14px;
  overflow:auto;
  height:calc(100vh - 74px - 64px); /* 74 aprox brand, 64 aprox account */
}

/* Bloque de cuenta fijo al fondo de la barra */
.account{
  margin-top:auto;
  padding:10px;
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, #0c1427, #0a0f1b);
}

/* Botón "Cerrar sesión" con mismo look que los items */
.account .menu-item{
  width:100%;
  justify-content:flex-start;
  gap:12px;
}

/* Ocultar textos en colapsado (sin que asomen letras) */
.sidebar-collapsed .brand-text{ display:none; }

.sidebar-collapsed .menu-section{ display:none; }

.sidebar-collapsed .menu-item{
  justify-content:center;
  padding:10px;
}

.sidebar-collapsed .menu-item .label{
  display:none !important;    /* <- elimina “fantasmas” */
  width:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
}

.sidebar-collapsed .account .menu-item{
  justify-content:center;     /* ícono centrado también en la cuenta */
}

/* ====== OVAL + LEGIBLE EN TODAS LAS CAJAS ====== */
:root{
  --pill-radius: 22px;      /* curva consistente con el select de Ambiente */
  --pill-height: 48px;      /* altura mínima cómoda */
}

/* Inputs y selects con el mismo look tipo “pill” */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
  border-radius: var(--pill-radius) !important;
  min-height: var(--pill-height);
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.2;
}

/* Tema claro (área de contenido): mejor contraste */
.main input[type="text"],
.main input[type="email"],
.main input[type="password"],
.main input[type="number"],
.main select,
.main textarea{
  background: var(--c-input);
  color: var(--c-text);               /* texto fuerte */
  border: 1px solid var(--c-line);
}

.main ::placeholder{
  color: #8d98b1;                     /* placeholder legible */
  opacity: 1;
}

/* En foco, anillo visible */
.main input:focus,
.main select:focus,
.main textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(42,90,255,.15);
  outline: none;
}

/* Tema oscuro para contenido si lo activas */
body.content-dark input[type="text"],
body.content-dark input[type="email"],
body.content-dark input[type="password"],
body.content-dark input[type="number"],
body.content-dark select,
body.content-dark textarea{
  background: linear-gradient(180deg,#131d36 0%, #0f1a33 100%);
  border:1px solid #27365c;
  color:#e9f2ff;
}

body.content-dark ::placeholder{
  color:#aeb9d1;
}

/* Card de cabecera más limpia */
.card--lookup{
  border-radius: 24px;
  padding: 18px 18px 12px;
}
.card--lookup h2{
  font-size: 22px;
  margin: 0 0 8px;
}