/* ═══════════════════════════════════════════════════════════
   LEXpedientes – UI Shell 1.3
   Capa aditiva sobre app.css: barra superior, temas adicionales,
   escalado, sidebar compacto y panel dividido redimensionable.

   Se carga DESPUÉS de app.css y no reescribe ninguna regla
   existente: los temas 'light' y 'dark' quedan intactos.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ui-zoom: 1;
  --sidebar-w: 220px;
  --sidebar-w-compact: 62px;
  --topbar-h: 52px;
  --split-list-w: 46%;
  --splitter-w: 6px;
}

/* ─────────── Escalado (A− / A+) ───────────
   zoom por contenedor: escala texto, iconos y espaciados a la vez.
   No se aplica a los overlays fijos para que sigan cubriendo la pantalla. */
#app,
.login-card,
.modal-box,
#toast-container > * { zoom: var(--ui-zoom); }

/* ═══════════════════ Temas adicionales ═══════════════════
   Mismo contrato de variables que el bloque dark de app.css. */

/* Pizarra: gris azulado sobrio, menos contraste que el oscuro puro */
html[data-skin="slate"] {
  --bg:#eef2f7; --card:#ffffff;
  --sidebar-bg:#1e293b; --sidebar-hover:#334155;
  --sidebar-text:#a8b6c9; --sidebar-active:#f1f5f9;
  --primary:#0f766e; --primary-hover:#115e59; --primary-light:#ccfbf1;
  --text:#1e293b; --text-sec:#475569; --text-muted:#8595a9;
  --border:#d7dfe9; --border-focus:#5eead4;
  --success:#0f766e; --success-bg:#ccfbf1;
  --warning:#b45309; --warning-bg:#fef3c7;
  --danger:#be123c; --danger-bg:#ffe4e6;
  --info-bg:#ccfbf1;
}

/* Sepia: fondo cálido para sesiones largas de lectura */
html[data-skin="sepia"] {
  --bg:#f3ecdf; --card:#fdf8ef;
  --sidebar-bg:#3b3227; --sidebar-hover:#544737;
  --sidebar-text:#c2b49c; --sidebar-active:#f7f1e6;
  --primary:#9a6b28; --primary-hover:#7d5620; --primary-light:#f3e3c8;
  --text:#2f2920; --text-sec:#5c5145; --text-muted:#8d8171;
  --border:#e0d4bf; --border-focus:#c9a869;
  --success:#5c7a35; --success-bg:#e6efd6;
  --warning:#a86e12; --warning-bg:#f7e7c6;
  --danger:#a33b2a; --danger-bg:#f5dcd7;
  --info-bg:#f3e3c8;
}

/* Nocturno: azul profundo, más suave que el oscuro estándar */
html[data-skin="midnight"] {
  --bg:#0d1526; --card:#152238;
  --sidebar-bg:#0a1120; --sidebar-hover:#1c2b45;
  --sidebar-text:#94a7c4; --sidebar-active:#e8eefb;
  --primary:#818cf8; --primary-hover:#6366f1; --primary-light:rgba(129,140,248,.16);
  --text:#e8eefb; --text-sec:#b6c4dc; --text-muted:#7f90ad;
  --border:#26364f; --border-focus:#818cf8;
  --success:#4ade80; --success-bg:rgba(74,222,128,.13);
  --warning:#fbbf24; --warning-bg:rgba(251,191,36,.13);
  --danger:#fb7185; --danger-bg:rgba(251,113,133,.13);
  --info-bg:rgba(129,140,248,.16);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.16);
}

/* Alto contraste: para pantallas malas o vista cansada */
html[data-skin="contrast"] {
  --bg:#ffffff; --card:#ffffff;
  --sidebar-bg:#000000; --sidebar-hover:#1f1f1f;
  --sidebar-text:#d4d4d4; --sidebar-active:#ffffff;
  --primary:#0000cc; --primary-hover:#000099; --primary-light:#dbeafe;
  --text:#000000; --text-sec:#1f1f1f; --text-muted:#4b4b4b;
  --border:#000000; --border-focus:#0000cc;
  --success:#006400; --success-bg:#d7f5d7;
  --warning:#8a5a00; --warning-bg:#ffeec2;
  --danger:#a80000; --danger-bg:#ffd9d9;
  --info-bg:#dbeafe;
  --shadow:0 0 0 1px #000;
}
html[data-skin="contrast"] .btn,
html[data-skin="contrast"] .card,
html[data-skin="contrast"] input,
html[data-skin="contrast"] select,
html[data-skin="contrast"] textarea { border-width:2px; }

/* Los temas oscuros reutilizan los ajustes de formulario del dark de app.css */
html[data-skin="midnight"] input,
html[data-skin="midnight"] select,
html[data-skin="midnight"] textarea { background:#101c30; color:var(--text); border-color:var(--border); }
html[data-skin="midnight"] input::placeholder,
html[data-skin="midnight"] textarea::placeholder { color:#75879f; }
html[data-skin="midnight"] .btn.secondary,
html[data-skin="midnight"] .page-btn { background:#1a2941; color:var(--text); border-color:var(--border); }
html[data-skin="midnight"] .data-table tbody tr:nth-child(even) { background:rgba(255,255,255,.025); }
html[data-skin="midnight"] .data-table tbody tr:hover { background:rgba(129,140,248,.1); }
html[data-skin="midnight"] .modal-close { color: rgba(255,255,255,.55); }
html[data-skin="midnight"] .modal-close:hover { background: rgba(255,255,255,.08); color: #fff; }

html[data-skin="sepia"] .data-table tbody tr:nth-child(even) { background:rgba(120,90,40,.045); }
html[data-skin="sepia"] .data-table tbody tr:hover { background:rgba(154,107,40,.1); }

/* app.css usa grises fríos fijos (#f8fafc, #f1f5f9…) para fondos sutiles.
   Sobre el fondo cálido de Sepia desentonan, así que se re-tiñen. Es un ajuste
   estético: la legibilidad ya era correcta. */
html[data-skin="sepia"] .detail-field,
html[data-skin="sepia"] .totals { background:#f7f0e3; }
html[data-skin="sepia"] .btn.secondary:hover,
html[data-skin="sepia"] .btn.ghost:hover,
html[data-skin="sepia"] .page-btn:hover,
html[data-skin="sepia"] .modal-close:hover,
html[data-skin="sepia"] .recent-item:hover { background:#ede2cd; }
html[data-skin="sepia"] .stat-track { background:#e3d6bd; }
html[data-skin="sepia"] .badge.closed,
html[data-skin="sepia"] .badge.cancelled,
html[data-skin="sepia"] .badge.archived,
html[data-skin="sepia"] .badge.draft { background:#e8dcc4; color:var(--text-sec); }

/* Pizarra: el gris fijo de las fichas se alinea con su fondo azulado */
html[data-skin="slate"] .detail-field,
html[data-skin="slate"] .totals { background:#f5f8fb; }

/* ═══════════════════ Estructura con barra superior ═══════════════════ */

/* Dentro de un elemento con `zoom`, las unidades vh se escalan también, así que
   100vh acabaría midiendo 100vh × zoom y desbordaría la pantalla. Se divide
   entre --ui-zoom para que el resultado renderizado sea exactamente 100vh. */
#app.lex-shell {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  min-height: calc(100vh / var(--ui-zoom));
}
#app.lex-shell #sidebar {
  grid-row: 2;
  height: calc(100vh / var(--ui-zoom) - var(--topbar-h));
  top: var(--topbar-h);
}
#app.lex-shell #main {
  grid-row: 2;
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Sidebar compacto: solo iconos */
#app.lex-shell.sidebar-compact { --sidebar-w: var(--sidebar-w-compact); }
#app.sidebar-compact #sidebar { padding-left:8px; padding-right:8px; overflow-x:hidden; }
#app.sidebar-compact .brand-name,
#app.sidebar-compact #nav a span,
#app.sidebar-compact .theme-label,
#app.sidebar-compact .sidebar-company,
#app.sidebar-compact #logout-name { display:none; }
#app.sidebar-compact #nav a {
  justify-content:center; padding-left:0; padding-right:0;
  font-size:0; gap:0;
}
#app.sidebar-compact #nav a svg { width:20px; height:20px; }
#app.sidebar-compact .side-brand { justify-content:center; padding-left:0; padding-right:0; }
#app.sidebar-compact .side-footer .btn,
#app.sidebar-compact .theme-toggle { justify-content:center; padding-left:0; padding-right:0; }

/* Sidebar oculto del todo.
   FUERA del ciclo del botón: este alterna solo completo ↔ compacto.
   Queda accesible por código con LexUI.setSidebar('hidden'). */
#app.lex-shell.sidebar-hidden { grid-template-columns: 0 1fr; }
#app.sidebar-hidden #sidebar { display:none; }

/* ═══════════════════ Barra superior ═══════════════════ */

#lex-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: var(--topbar-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.lex-tb-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.lex-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-sec);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.lex-tb-btn:hover { background: var(--primary-light); color: var(--primary); }
.lex-tb-btn[aria-pressed="true"] { background: var(--primary); color:#fff; }
.lex-tb-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }

#lex-zoom-value {
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sec);
  cursor: pointer;
}

.lex-tb-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin-right: auto;
}
.lex-tb-title strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lex-tb-title span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Selector de tema */
.lex-theme-wrap { position: relative; }
#lex-theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 186px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  z-index: 80;
}
#lex-theme-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}
#lex-theme-menu button:hover { background: var(--primary-light); color: var(--primary); }
#lex-theme-menu button[aria-checked="true"] { font-weight: 700; color: var(--primary); }
.lex-swatch {
  width: 15px; height: 15px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid rgba(127,127,127,.45);
}

/* ═══════════════════ Panel dividido ═══════════════════ */

#main.lex-split-host {
  padding: 0;
  max-width: none;
  height: calc(100vh / var(--ui-zoom) - var(--topbar-h));  /* ver nota sobre zoom+vh arriba */
  min-height: 0;
}

.lex-split {
  display: grid;
  grid-template-columns: var(--split-list-w) var(--splitter-w) 1fr;
  height: 100%;
  min-height: 0;
}
.lex-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 22px 24px;
}
.lex-pane-detail { background: var(--bg); }

.lex-splitter {
  position: relative;
  cursor: col-resize;
  background: var(--border);
  transition: background .15s;
}
.lex-splitter::after {
  content: "";
  position: absolute;
  inset: 0 -4px;            /* zona de agarre más ancha que la línea visible */
}
.lex-splitter:hover,
.lex-splitter.dragging { background: var(--primary); }

/* Mientras se arrastra: sin selección de texto ni parpadeo del cursor */
body.lex-resizing { user-select: none; cursor: col-resize; }
body.lex-resizing iframe { pointer-events: none; }

/* Apilado en ventana estrecha: el divisor deja de tener sentido */
@media (max-width: 1080px) {
  .lex-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lex-splitter { display: none; }
  .lex-pane-list { max-height: 42vh; border-bottom: 1px solid var(--border); }
}

/* Marcador de posición cuando no hay nada seleccionado */
.lex-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  height: 100%;
  padding: 30px;
  color: var(--text-muted);
  text-align: center;
}
.lex-empty svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .5; }
.lex-empty p { font-size: 13px; max-width: 260px; }

/* Fila seleccionada en la lista mientras su detalle está abierto */
.lex-split .data-table tbody tr.lex-row-active {
  background: var(--primary-light) !important;
  box-shadow: inset 3px 0 0 var(--primary);
}

/* En pantalla dividida el detalle no necesita su botón «Atrás» */
.lex-pane-detail .detail-header .btn.ghost.sm[onclick*="history.back"] { display: none; }

@media print {
  #lex-topbar, .lex-splitter, #sidebar { display: none !important; }
  #main.lex-split-host { height: auto; }
  .lex-split { display: block; }
  .lex-pane { overflow: visible; height: auto; }
}