/* PALETA.
   El violeta del logo (#7C3AED, la "i" de iShop) es el color de contraste de
   todo el sistema; el resto es negro neutro (modo oscuro) o blanco (modo claro).
   --accent-soft es el mismo violeta en version transparente: se usa para fondos
   de seleccion y avisos, asi el tinte sale de un solo lugar. */
:root {
  --bg: #0a0a0c;
  --bg-2: #121216;
  --bg-3: #1b1b21;
  --line: #2a2a33;
  --txt: #ebebf0;
  --txt-dim: #9b9baa;
  /* --accent va sobre fondo oscuro (iconos, bordes, cifras destacadas) y por eso
     es el tono claro. --accent-fill es el relleno de los botones, donde encima
     hay texto blanco: ahi hace falta el violeta mas profundo para que se lea
     bien (5,6:1 contra 4,2:1 del claro). */
  --accent: #8b5cf6;
  --accent-fill: #7c3aed;
  --accent-2: #6d28d9;
  --accent-soft: rgba(139, 92, 246, .14);
  --accent-line: rgba(139, 92, 246, .38);
  --ok: #2fbf71;
  --warn: #e6a020;
  --bad: #ec5a5a;
  /* Barras de scroll: violeta apagado en reposo, el violeta pleno al pasar el
     mouse. Sobre negro hace falta bastante opacidad o no se ve donde agarrar. */
  --scroll-thumb: rgba(139, 92, 246, .34);
  --scroll-thumb-hover: rgba(139, 92, 246, .70);
  --radius: 10px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* Escala de la interfaz. Estos valores se reducen mas abajo por media query
     para que el sistema entre completo en pantallas 1366x768 o mas chicas. */
  --sidebar-w: 232px;
  --pad-view: 20px 22px 40px;
  --pad-topbar: 16px 22px;
  --gap: 14px;
  --fs-base: 14px;
}

/* Modo claro: el mismo violeta, pero sobre blanco en lugar de negro. */
:root[data-theme="light"] {
  --bg: #f6f5f9;
  --bg-2: #ffffff;
  --bg-3: #efedf5;
  --line: #e0dce9;
  --txt: #16151a;
  --txt-dim: #64606f;
  --accent: #7c3aed;
  --accent-fill: #7c3aed;
  --accent-2: #6127c9;
  --accent-soft: rgba(124, 58, 237, .10);
  --accent-line: rgba(124, 58, 237, .32);
  --ok: #1f9d5c;
  --warn: #b9740c;
  --bad: #d64545;
  --scroll-thumb: rgba(124, 58, 237, .30);
  --scroll-thumb-hover: rgba(124, 58, 237, .62);
}

:root[data-theme="light"] .auth { background: radial-gradient(1200px 600px at 50% -10%, #ebe3fd, var(--bg)); }
:root[data-theme="light"] .alert.err { color: #a32b2b; }
:root[data-theme="light"] .alert.warn { color: #8a5a06; }
:root[data-theme="light"] .alert.info { color: #5b21b6; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  font-size: var(--fs-base);
  overflow: hidden;
}
/* ---------- barras de scroll ----------
   Las de Windows son grises y anchas y cortaban el diseno en cada tabla. Estas
   siguen la paleta y valen igual para el scroll vertical y el horizontal.
   El "borde" transparente con background-clip deja aire a los costados: sin eso
   la barra queda pegada al contenido y parece parte de la tabla.
   El celular no las dibuja (iOS usa barras flotantes), asi que no molesta. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: content-box; }
/* El cuadradito donde se cruzan las dos barras: sin esto queda blanco. */
::-webkit-scrollbar-corner { background: transparent; }

.hidden { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: var(--fs-base); }

/* ---------- barra de titulo propia (solo escritorio) ----------
   La clase has-titlebar la pone la pantalla cuando corre dentro de Electron.
   En el navegador del celular nada de esto se aplica.

   El padding de la derecha deja libre el lugar donde Windows dibuja los tres
   botones: env(titlebar-area-width) es el ancho que queda para nosotros, asi
   que la resta da justo el ancho de los botones. Si el navegador no conoce esa
   variable (el celular), la cuenta da 8px y no molesta. */
.titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px;
  padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 8px);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  -webkit-app-region: drag;
  user-select: none;
}
.titlebar .logo-mark { height: 17px; }
.titlebar-name { color: var(--txt-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar-menu { margin-left: auto; position: relative; -webkit-app-region: no-drag; }
.tb-btn {
  background: transparent; border: 0; color: var(--txt-dim); font-size: 12px;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.tb-btn:hover { background: var(--bg-3); color: var(--txt); }
.tb-btn.open { background: var(--accent-soft); color: var(--accent); }
.tb-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.45); z-index: 95;
}
.tb-dropdown button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--txt); padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.tb-dropdown button:hover { background: var(--bg-3); }
.tb-dropdown button.danger { color: var(--bad); }
.tb-sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* Con la barra propia, las tres pantallas arrancan mas abajo. */
:root.has-titlebar { --titlebar-h: 36px; }
:root.has-titlebar .boot,
:root.has-titlebar .auth,
:root.has-titlebar .app {
  height: calc(100% - var(--titlebar-h));
  margin-top: var(--titlebar-h);
}

/* ---------- animaciones ----------
   Cortas a proposito: esto es una caja registradora, no una presentacion. Nada
   pasa de 220 ms, y todo se hace con opacity y transform, que son las dos
   propiedades que el navegador mueve sin volver a dibujar la pantalla.

   Se apagan enteras de dos formas: con la opcion de Windows "mostrar
   animaciones" (prefers-reduced-motion, la que usa quien se marea con el
   movimiento) o desde Configuracion, que le pone data-anim="0" al documento. */
@keyframes ish-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ish-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ish-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ish-slide-left { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Entrada del login y del sistema */
.auth-card { animation: ish-pop .22s ease-out both; }
.app:not(.hidden) { animation: ish-fade .18s ease-out both; }
/* La barra lateral entra un pelin despues que el resto: da sensacion de armado */
.app:not(.hidden) .sidebar { animation: ish-fade .26s ease-out both; }

/* Salida: la pone el JS antes de esconder la pantalla que se va. */
.screen-leaving {
  opacity: 0;
  transform: scale(.99);
  transition: opacity .16s ease-in, transform .16s ease-in;
  pointer-events: none;
}

/* Cada vez que se cambia de seccion, el contenido sube un poco al entrar. */
.view.view-enter { animation: ish-rise .2s ease-out both; }

/* Modales y avisos */
.modal-bg { animation: ish-fade .14s ease-out both; }
.modal { animation: ish-pop .18s ease-out both; }
.toast { animation: ish-slide-left .2s ease-out both; }

/* Realce corto cuando un numero cambia solo (la cotizacion del dolar). */
@keyframes ish-flash { 0% { color: var(--accent); } 100% { color: inherit; } }
.fx-box strong.cambio { animation: ish-flash 1.2s ease-out; }

/* Sin animaciones: por preferencia del sistema o por configuracion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
:root[data-anim="0"] *, :root[data-anim="0"] *::before, :root[data-anim="0"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

/* ---------- boot ---------- */
.boot { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--txt-dim); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- auth ---------- */
/* overflow-y:auto + margin auto en la tarjeta: queda centrada cuando hay lugar,
   pero si la pantalla es baja se puede scrollear en vez de cortarse. */
.auth { height: 100%; display: flex; overflow-y: auto; padding: 20px; background: radial-gradient(1200px 600px at 50% -10%, #241a3d, var(--bg)); }
.auth-card { width: 420px; max-width: 100%; margin: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.auth-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.auth-brand h1 { font-size: 19px; }
.auth-brand p { color: var(--txt-dim); font-size: 13px; }
.logo { display: flex; align-items: center; color: var(--txt); }
.logo-mark { height: 26px; width: auto; display: block; }
.auth-brand .logo-mark { height: 34px; }
.auth-foot { margin-top: 18px; color: var(--txt-dim); font-size: 12px; text-align: center; line-height: 1.6; }

/* ---------- layout ---------- */
.app { height: 100%; display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
.sidebar { background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; gap: 10px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; overflow: hidden; }
.brand-text strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: 11px; color: var(--txt-dim); }
nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 8px; }
nav button { width: 100%; text-align: left; background: transparent; border: 0; color: var(--txt-dim); padding: 9px 12px; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
nav button:hover { background: var(--bg-3); color: var(--txt); }
nav button.active { background: var(--accent-fill); color: #fff; }
nav .nav-ico { width: 18px; height: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; }
nav .nav-ico svg { width: 18px; height: 18px; }
/* El pie de la barra lateral (cotizacion, tema, usuario) no se puede comprimir:
   es lo primero que quedaba fuera de pantalla en monitores bajos. */
.side-foot { border-top: 1px solid var(--line); padding: 12px; flex-shrink: 0; }
.theme-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; padding: 8px; }
.theme-toggle svg { width: 15px; height: 15px; }
.fx-box { background: var(--bg-3); border-radius: 8px; padding: 10px; font-size: 12px; margin-bottom: 10px; }
.fx-box strong { font-size: 15px; display: block; }
.fx-box small { color: var(--txt-dim); }
.fx-stale { color: var(--warn); }
.fx-auto { display: block; color: var(--txt-dim); font-size: 11px; margin-top: 2px; }
.user-box { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.user-box strong { display: block; font-size: 13px; }
.user-box span { font-size: 11px; color: var(--txt-dim); }

.main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: var(--pad-topbar); border-bottom: 1px solid var(--line); background: var(--bg-2); flex-shrink: 0; flex-wrap: wrap; row-gap: 10px; }
.topbar h2 { font-size: 17px; }
.topbar p { color: var(--txt-dim); font-size: 12px; margin-top: 2px; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.view { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--pad-view); }

/* ---------- componentes ---------- */
.btn, .btn-ghost, .btn-danger, .btn-soft {
  border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid transparent; font-weight: 500;
}
.btn { background: var(--accent-fill); color: #fff; }
.btn:hover { background: var(--accent-2); }
.btn-soft { background: var(--bg-3); color: var(--txt); border-color: var(--line); }
.btn-soft:hover { border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--txt-dim); border-color: var(--line); }
.btn-ghost:hover { color: var(--txt); }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(236,90,90,.4); }
.btn-danger:hover { background: rgba(236,90,90,.12); }
.btn:disabled, .btn-soft:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; overflow-x: auto; min-width: 0; }
.grid { display: grid; gap: var(--gap); }
/* minmax(0,1fr) en lugar de 1fr: sin eso una tabla ancha estira la columna y
   desborda toda la pagina hacia los costados. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Los KPI se mantienen en 4 columnas mientras entren: apilarlos antes de tiempo
   alarga la pagina justo en las pantallas donde falta alto. */
@media (max-width: 1150px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
}

.kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi span { color: var(--txt-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.kpi strong { display: block; font-size: 22px; margin-top: 6px; }
.kpi small { color: var(--txt-dim); font-size: 12px; }
.kpi.ok strong { color: var(--ok); }
.kpi.warn strong { color: var(--warn); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--txt-dim); padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--bg-3); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { padding: 34px; text-align: center; color: var(--txt-dim); }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--txt-dim); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line); color: var(--txt);
  border-radius: 8px; padding: 9px 11px; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
/* Los checkboxes (ej: permisos extra) no deben heredar el ancho/fondo de los inputs de texto,
   si no quedan agrandados y tapan la etiqueta de al lado. */
.field input[type="checkbox"] { width: auto; padding: 0; background: none; border: none; border-radius: 0; margin: 0 6px 0 0; vertical-align: middle; }
.field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.field-row-3 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr 1fr; }
.hint { font-size: 11px; color: var(--txt-dim); margin-top: 4px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; border: 1px solid var(--line); color: var(--txt-dim); }
.badge.ok { color: var(--ok); border-color: rgba(47,191,113,.4); }
.badge.warn { color: var(--warn); border-color: rgba(230,160,32,.4); }
.badge.bad { color: var(--bad); border-color: rgba(236,90,90,.4); }

.alert { border-radius: 8px; padding: 11px 13px; font-size: 13px; margin-bottom: 14px; border: 1px solid; }
.alert.err { background: rgba(236,90,90,.1); border-color: rgba(236,90,90,.35); color: #ffb4b4; }
.alert.warn { background: rgba(230,160,32,.1); border-color: rgba(230,160,32,.35); color: #ffd89b; }
.alert.info { background: var(--accent-soft); border-color: var(--accent-line); color: #d3c2ff; }

/* ---------- alertas del dashboard ----------
   Una fila por alerta: icono, texto, y el boton para ir a la seccion. El
   detalle va adentro de un <details> para que 20 equipos parados no empujen
   todo el resto del dashboard fuera de la pantalla. */
.alert-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.alert-row:last-child { border-bottom: 0; padding-bottom: 0; }
.alert-row-ico { font-size: 14px; line-height: 1.5; flex-shrink: 0; }
.alert-row-body { flex: 1; min-width: 0; }
.alert-row-body strong { font-size: 13.5px; font-weight: 500; }
.alert-row.bad .alert-row-body strong { color: var(--bad); }
.alert-row summary { cursor: pointer; color: var(--txt-dim); font-size: 12px; margin-top: 4px; }
.alert-row ul { margin: 6px 0 0; padding-left: 18px; color: var(--txt-dim); font-size: 12px; line-height: 1.7; }
.alert-row > button { flex-shrink: 0; }

/* ---------- listas de ranking ----------
   El numero de puesto lo pone el <ol>: asi el 1, 2, 3 no se puede desincronizar
   del orden real de la lista. */
.rank-list { list-style: none; counter-reset: rank; margin: 0; padding: 0; }
.rank-list li {
  counter-increment: rank;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list li::before {
  content: counter(rank);
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: var(--bg-3); color: var(--txt-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.rank-list li:nth-child(1)::before { background: var(--accent-fill); color: #fff; }
.rank-list li:nth-child(2)::before, .rank-list li:nth-child(3)::before { background: var(--accent-soft); color: var(--accent); }
.rank-main { flex: 1; min-width: 0; }
.rank-main strong { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-main small { color: var(--txt-dim); font-size: 11.5px; }
.rank-right { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent); }

/* ---------- oferta del dia ---------- */
.daily-card { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), transparent 120px), var(--bg-2); }
.daily-block h4 { font-size: 13px; margin-bottom: 8px; color: var(--accent); }
.daily-items { list-style: none; margin: 0; padding: 0; }
.daily-items li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.daily-items li:last-child { border-bottom: 0; }
.daily-price s { color: var(--txt-dim); font-size: 12px; }
.daily-price strong { color: var(--accent); }

/* ---------- centro de tareas (que hacer hoy) ---------- */
.todo-card.urgente { border-left: 3px solid var(--bad); }
.todo-card.hoy { border-left: 3px solid var(--warn); }
.todo-card.auto { border-left: 3px solid var(--ok); }
.todo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.todo-row:last-child { border-bottom: 0; padding-bottom: 0; }
.todo-body { flex: 1; min-width: 0; }
.todo-body strong { display: block; font-size: 13.5px; font-weight: 500; }
.todo-body small { display: block; color: var(--txt-dim); font-size: 11.5px; margin-top: 2px; }
.todo-row > button { flex-shrink: 0; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input, .toolbar select { background: var(--bg-3); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 8px 11px; }
.toolbar .grow { flex: 1; min-width: 180px; }

/* Buscador grande: para pantallas donde elegir bien (marca/modelo) importa mas que ser compacto */
.search-lg { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; padding: 18px; }
.search-lg .field { margin-bottom: 0; flex: 1; min-width: 220px; }
.search-lg .field label { font-size: 13px; margin-bottom: 8px; }
.search-lg .field select, .search-lg .field input { padding: 13px 14px; font-size: 15px; border-radius: 10px; }
.search-lg .btn { padding: 13px 22px; font-size: 14px; white-space: nowrap; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 60; }
.modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; width: 620px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; min-height: 0; }
.modal-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; }
/* min-height:0 es lo que permite que el cuerpo scrollee dentro del flex en vez
   de empujar el pie del modal fuera de la pantalla. */
.modal-body { padding: 18px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.modal-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.modal.wide { width: 860px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 11px 14px; border-radius: 8px; max-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }

/* ---------- ventas ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 16px; align-items: start; }
@media (max-width: 1150px) { .pos { grid-template-columns: minmax(0, 1fr); } }
/* Antes eran 420px fijos: en una pantalla de 768px de alto la lista sola ya
   ocupaba mas que la vista. Ahora se adapta al alto disponible. */
.pos-results { max-height: min(420px, 46vh); overflow-y: auto; }
.cart-line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cart-line small { color: var(--txt-dim); display: block; }
.cart-total { display: flex; justify-content: space-between; padding: 6px 0; }
.cart-total.big { font-size: 19px; font-weight: 600; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
/* Promocion enganchada por el carrito: se ve antes de cobrar, no despues. */
.cart-promo { color: var(--accent); font-size: 13px; }
.qty-input { width: 62px; text-align: center; background: var(--bg-3); border: 1px solid var(--line); color: var(--txt); border-radius: 6px; padding: 4px; }

/* ---------- accesos de la seccion Celulares ----------
   El panel de la derecha es mas angosto que el carrito del punto de venta: aca
   lo que importa es que la tabla del stock (que tiene muchas columnas) entre
   entera. Debajo de 1280px se apila: no hay ancho para las dos cosas. */
.pos-stock { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
@media (max-width: 1280px) { .pos-stock { grid-template-columns: minmax(0, 1fr); } }

/* Acciones de cada fila: una debajo de la otra, pegadas a la derecha. En fila
   se salian del ancho de la tabla y el ultimo boton quedaba cortado. */
td.row-actions { white-space: nowrap; }
td.row-actions button { display: block; width: 100%; margin: 0 0 4px auto; }
td.row-actions button:last-child { margin-bottom: 0; }


/* ---------- accesos con iconos ----------
   Antes cada acceso era un boton ancho con titulo y descripcion; tres de esos
   se comian media pantalla. Ahora es un icono con su cartelito al pasar el
   mouse, y la seccion queda mucho mas compacta.

   El cartelito es CSS puro (sin Javascript no se traba). En pantallas tactiles
   no hay mouse que pasar por arriba, asi que ahi el nombre se ve siempre. */
.icon-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.icon-action {
  position: relative; flex: 1 1 74px; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 8px; cursor: pointer; color: var(--txt); font-family: inherit; transition: .12s;
}
.icon-action:hover { border-color: var(--accent); background: var(--accent-soft); }
.icon-action-ico {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); flex-shrink: 0;
}
.icon-action:hover .icon-action-ico { background: var(--accent-fill); color: #fff; }
.icon-action-ico svg { width: 21px; height: 21px; }
/* El nombre debajo del icono solo se muestra donde no hay tooltip posible. */
.icon-action-label { display: none; font-size: 11px; color: var(--txt-dim); text-align: center; line-height: 1.3; }

/* POR QUE EL CARTELITO ABRE PARA ABAJO.
   Antes abria para arriba (bottom: 100%). El problema: .view es un contenedor
   con scroll (overflow-y: auto), asi que RECORTA todo lo que se dibuje arriba
   de su borde, y los iconos estan pegados al techo de la vista. El cartelito
   quedaba cortado contra la topbar y contra la barra de titulo; peor todavia
   en el escritorio, porque los botones de minimizar/maximizar/cerrar los pinta
   Windows POR ENCIMA de la pagina (y ahi tampoco llega el mouse), asi que nada
   de lo que dibujemos en esa franja se puede ver ni usar.
   Abajo siempre hay lugar: debajo de los iconos viene el panel de la seccion.
   La clase tip-up la pone iconActions() solo si abajo no entra y arriba si,
   midiendo contra .view y nunca contra la ventana. Si el Javascript no corre,
   el cartelito igual funciona: para abajo. */
.icon-action-tip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bg-3); border: 1px solid var(--accent-line); border-radius: 8px;
  padding: 8px 10px; min-width: 150px; max-width: 230px; text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); z-index: 30;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
}
.icon-action.tip-up .icon-action-tip { top: auto; bottom: calc(100% + 8px); }
/* Cerca de los bordes laterales el cartelito se sale del ancho de la vista, que
   ademas tiene overflow-x: hidden y lo cortaria. Se ancla al borde del boton. */
.icon-action.tip-left .icon-action-tip { left: 0; transform: none; }
.icon-action.tip-right .icon-action-tip { left: auto; right: 0; transform: none; }
.icon-action-tip strong { display: block; font-size: 12.5px; color: var(--txt); }
.icon-action-tip small { display: block; margin-top: 2px; font-size: 11px; color: var(--txt-dim); line-height: 1.4; }
.icon-action:hover .icon-action-tip, .icon-action:focus-visible .icon-action-tip { opacity: 1; visibility: visible; }

/* Sin mouse el cartelito no se puede ver: el nombre va fijo abajo del icono. */
@media (hover: none) {
  .icon-action-tip { display: none; }
  .icon-action-label { display: block; }
  .icon-action { flex: 1 1 96px; min-height: 44px; }
}

.phone-actions { display: grid; gap: 10px; }
.action-tile {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; cursor: pointer; color: var(--txt); font-family: inherit; transition: .12s;
}
.action-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.action-tile strong { display: block; font-size: 14px; }
.action-tile small { color: var(--txt-dim); font-size: 12px; }
.action-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent);
}
.action-ico svg { width: 22px; height: 22px; }

/* Buscador de repuestos: tipos a la izquierda, precios a la derecha. */
.parts-picker { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
.parts-picker > .choice-group { grid-template-columns: 1fr; }
.parts-results { max-height: min(340px, 42vh); overflow-y: auto; }
.parts-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.parts-row:last-child { border-bottom: 0; }
@media (max-width: 700px) { .parts-picker { grid-template-columns: minmax(0, 1fr); } }

/* Equipo que entrega el cliente como parte del pago. */
.trade-in-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 12px; }
.trade-in-box.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }

/* ---------- cotizador de equipos ---------- */
.choice-group { display: grid; gap: 8px; }
.choice {
  border: 1px solid var(--line); background: var(--bg-3); border-radius: 8px; padding: 9px 10px;
  font-size: 12.5px; cursor: pointer; text-align: left; color: var(--txt-dim); line-height: 1.35;
  font-family: inherit; transition: .12s;
}
.choice small { display: block; color: var(--txt-dim); font-size: 11px; margin-top: 2px; }
.choice:hover { border-color: var(--txt-dim); }
.choice.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--txt); }
.choice.selected small { color: var(--accent); }
.choice.bad-selected { border-color: var(--bad); background: rgba(236,90,90,.1); color: var(--txt); }
.choice.bad-selected small { color: var(--bad); }
.grade-badge {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0; border: 2px solid var(--accent); color: var(--accent);
}
.grade-badge.bad { border-color: var(--bad); color: var(--bad); }

/* ---------- pantallas chicas de escritorio (notebooks) ----------
   El sistema se diseno mirando un monitor 1920x1080. En 1366x768 (o con la
   ventana a media pantalla) hay que recuperar espacio: barra lateral mas
   angosta, menos aire vertical y tipografia un punto mas chica. */
@media (max-width: 1500px) {
  :root { --sidebar-w: 208px; --pad-view: 18px 18px 32px; --pad-topbar: 14px 18px; --gap: 12px; }
}

@media (max-width: 1280px) {
  :root { --sidebar-w: 190px; --fs-base: 13px; --pad-view: 16px 16px 28px; --pad-topbar: 12px 16px; --gap: 11px; }
  .kpi strong { font-size: 19px; }
  .topbar h2 { font-size: 16px; }
  th, td { padding: 8px; }
  .field-row-3 { grid-template-columns: 1fr 1fr; }
}

/* Alto: lo critico cuando "no se ve lo de abajo". Achicamos margenes verticales
   para que entre mas contenido antes de tener que scrollear. */
@media (max-height: 820px) {
  :root { --pad-view: 14px 18px 28px; --pad-topbar: 10px 18px; }
  .brand { padding: 12px; }
  .side-foot { padding: 10px; }
  .fx-box { padding: 8px; margin-bottom: 8px; }
  .theme-toggle { padding: 6px; margin-bottom: 8px; }
  nav button { padding: 7px 12px; }
  .kpi { padding: 10px 12px; }
  .kpi strong { font-size: 19px; margin-top: 4px; }
  .card { padding: 13px; }
  .field { margin-bottom: 10px; }
  .search-lg { padding: 14px; gap: 14px; margin-bottom: 14px; }
  .search-lg .field select, .search-lg .field input { padding: 10px 12px; font-size: 14px; }
  .search-lg .btn { padding: 10px 18px; }
}

@media (max-height: 680px) {
  :root { --pad-view: 12px 16px 24px; --pad-topbar: 8px 16px; }
  .topbar p { display: none; }
  .fx-box strong { font-size: 13px; }
  .auth-card { padding: 20px; }
  .auth-brand { margin-bottom: 16px; }
}

/* ---------- celular (iPhone en el mismo WiFi) ---------- */
#btnMenu { display: none; font-size: 20px; line-height: 1; padding: 6px 10px; }
.sidebar-overlay { display: none; }

@media (max-width: 720px) {
  #btnMenu { display: inline-flex; align-items: center; justify-content: center; }

  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 50;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .app.sidebar-open .sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40;
  }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }

  /* Objetivo tactil de iOS (~44px) y font-size 16px para que Safari no haga zoom al enfocar un campo. */
  .btn, .btn-soft, .btn-ghost, .btn-danger { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .field input, .field select, .field textarea, .toolbar input, .toolbar select { font-size: 16px; }

  .topbar { flex-wrap: wrap; row-gap: 10px; padding: 12px 14px; }
  .top-actions { width: 100%; }
}