/* myScala — estilos base. Solo variables de color por función (ver paletas.css). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-texto);
  background: var(--color-fondo);
}
a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
em, i { font-style: normal; }
:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono.chico { width: 16px; height: 16px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--color-texto-suave); }
.derecha { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* ───────── Estructura ───────── */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; transition: grid-template-columns .2s ease; }
.app.colapsada { grid-template-columns: 64px 1fr; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  background: var(--color-sidebar); color: var(--color-sidebar-texto);
  display: flex; flex-direction: column; z-index: 40;
}
.sidebar .marca {
  height: 60px; display: flex; align-items: center; gap: .6rem; padding: 0 1.1rem;
  font-weight: 700; font-size: 1.1rem; letter-spacing: .2px; white-space: nowrap; color: var(--color-sidebar-texto);
}
.sidebar .marca .logo {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: var(--color-primario); color: var(--color-texto-sobre-primario); font-weight: 800;
}
.sidebar nav { padding: .5rem .5rem 1.5rem; }
.nav-cat { margin-top: .4rem; }
.nav-cat > button {
  width: 100%; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; font-size: .78rem; font-weight: 650; letter-spacing: .6px;
  text-transform: uppercase; cursor: pointer; opacity: .78; white-space: nowrap;
}
.nav-cat > button:hover { opacity: 1; background: rgba(255,255,255,.06); }
.nav-cat > button .flecha { margin-left: auto; transition: transform .15s; }
.nav-cat.cerrada > button .flecha { transform: rotate(-90deg); }
.nav-cat.cerrada ul { display: none; }
.nav-cat ul { list-style: none; margin: 0; padding: 0; }
.nav-cat a {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem .5rem 1rem; border-radius: 8px;
  color: inherit; white-space: nowrap; text-decoration: none; opacity: .9;
}
.nav-cat a:hover { background: rgba(255,255,255,.08); opacity: 1; }
.nav-cat a.activo { background: var(--color-primario); color: var(--color-texto-sobre-primario); opacity: 1; }
.nav-inicio { margin: .2rem 0 .3rem; }
.nav-inicio a { padding-left: .7rem; }

.app.colapsada .sidebar .txt,
.app.colapsada .nav-cat > button .flecha { display: none; }
.app.colapsada .nav-cat > button { justify-content: center; padding: .55rem 0; }
.app.colapsada .nav-cat.cerrada ul { display: block; }
.app.colapsada .nav-cat a { justify-content: center; padding: .55rem 0; }
.app.colapsada .sidebar .marca { justify-content: center; padding: 0; }

.principal { min-width: 0; display: flex; flex-direction: column; }

/* Header principal: fijo */
.header {
  position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem; background: var(--color-superficie); border-bottom: 1px solid var(--color-borde);
}
.header .titulo { font-weight: 650; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header .der { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.btn-icono {
  position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: var(--color-texto); cursor: pointer;
}
.btn-icono:hover { background: var(--color-superficie-2); border-color: var(--color-borde); text-decoration: none; }
.btn-icono .punto {
  position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--color-error); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center;
}
.menu-usuario { position: relative; }
.menu-usuario > button {
  display: flex; align-items: center; gap: .55rem; padding: .3rem .6rem .3rem .35rem; border-radius: 10px;
  border: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto); font: inherit; cursor: pointer;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--color-primario); color: var(--color-texto-sobre-primario);
}
.desplegable {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; padding: .4rem; z-index: 60;
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.desplegable a, .desplegable button.item {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border-radius: 8px; border: 0;
  background: none; color: var(--color-texto); font: inherit; text-align: left; cursor: pointer; text-decoration: none;
}
.desplegable a:hover, .desplegable button.item:hover { background: var(--color-superficie-2); }
.desplegable .sep { height: 1px; background: var(--color-borde); margin: .35rem 0; }
.desplegable .cabeza { padding: .5rem .7rem; }
.desplegable .cabeza small { color: var(--color-texto-suave); display: block; }

/* Header secundario: NO fijo, con buscador de navegación */
.subheader { padding: 1rem 1.25rem 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.buscador-nav { position: relative; flex: 1; max-width: 520px; }
.buscador-nav .icono { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--color-texto-suave); }
.buscador-nav input.input { padding-left: 2.4rem; }
.buscador-nav kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); }
kbd {
  font: inherit; font-size: .72rem; padding: .05rem .4rem; border-radius: 5px; color: var(--color-texto-suave);
  border: 1px solid var(--color-borde); background: var(--color-superficie-2);
}
.migas { color: var(--color-texto-suave); font-size: .88rem; }

.contenido { padding: 1.1rem 1.25rem 3rem; max-width: 1400px; width: 100%; }

/* ───────── Componentes ───────── */
.tarjeta {
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 14px; padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-bottom: .85rem; }
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabecera p { margin: .2rem 0 0; color: var(--color-texto-suave); }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.span-todo { grid-column: 1 / -1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem 1rem; min-height: 40px;
  border-radius: 9px; border: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; background: var(--color-superficie-2); }
.btn-primario { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-texto-sobre-primario); }
.btn-primario:hover { background: var(--color-primario); filter: brightness(1.08); }
.btn-peligro { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-borde)); }
.btn-peligro:hover { background: color-mix(in srgb, var(--color-error) 10%, var(--color-superficie)); }
.btn-chico { padding: .3rem .65rem; min-height: 32px; font-size: .87rem; }
.btn[disabled], .btn.deshabilitado { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-grande { min-height: 48px; padding: .7rem 1.4rem; font-size: 1.02rem; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem;
  font-weight: 650; white-space: nowrap; border: 1px solid transparent;
}
.etiqueta.exito  { color: var(--color-exito);  background: color-mix(in srgb, var(--color-exito) 13%, transparent); }
.etiqueta.alerta { color: var(--color-alerta); background: color-mix(in srgb, var(--color-alerta) 14%, transparent); }
.etiqueta.error  { color: var(--color-error);  background: color-mix(in srgb, var(--color-error) 12%, transparent); }
.etiqueta.info   { color: var(--color-info);   background: color-mix(in srgb, var(--color-info) 12%, transparent); }
.etiqueta.neutro { color: var(--color-texto-suave); background: var(--color-superficie-2); border-color: var(--color-borde); }

.aviso {
  display: flex; gap: .6rem; align-items: flex-start; padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem;
  border: 1px solid var(--color-borde); background: var(--color-superficie);
}
.aviso.exito  { border-color: color-mix(in srgb, var(--color-exito) 45%, transparent);  background: color-mix(in srgb, var(--color-exito) 9%, var(--color-superficie)); }
.aviso.error  { border-color: color-mix(in srgb, var(--color-error) 45%, transparent);  background: color-mix(in srgb, var(--color-error) 8%, var(--color-superficie)); }
.aviso.alerta { border-color: color-mix(in srgb, var(--color-alerta) 45%, transparent); background: color-mix(in srgb, var(--color-alerta) 9%, var(--color-superficie)); }
.aviso.info   { border-color: color-mix(in srgb, var(--color-info) 40%, transparent);   background: color-mix(in srgb, var(--color-info) 7%, var(--color-superficie)); }

/* Tablas */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-superficie); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { padding: .62rem .8rem; text-align: left; border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
.tabla th { font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-texto-suave); background: var(--color-superficie-2); font-weight: 650; white-space: nowrap; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--color-primario) 4%, transparent); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { font-weight: 700; background: var(--color-superficie-2); border-top: 1px solid var(--color-borde); }
.tabla tr.anulado td { color: var(--color-texto-suave); text-decoration: line-through; }
.vacio { padding: 2.2rem 1rem; text-align: center; color: var(--color-texto-suave); }

/* KPIs */
.kpi { display: flex; flex-direction: column; gap: .2rem; }
.kpi .valor { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .rotulo { color: var(--color-texto-suave); font-size: .85rem; }

/* ───────── Formularios ───────── */
.campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.campo > label, .campo > .rotulo { font-size: .86rem; font-weight: 600; color: var(--color-texto); }
.campo .ayuda { font-size: .8rem; color: var(--color-texto-suave); }
.campo .msj-error { font-size: .8rem; color: var(--color-error); }
.input, input.input, textarea.input {
  width: 100%; min-height: 42px; padding: .55rem .8rem; border-radius: 9px; border: 1px solid var(--color-borde);
  background: var(--color-superficie); color: var(--color-texto); font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
textarea.input { min-height: 84px; resize: vertical; }
.input::placeholder { color: var(--color-texto-suave); opacity: .8; }
.input:hover { border-color: color-mix(in srgb, var(--color-primario) 35%, var(--color-borde)); }
.input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 22%, transparent); }
.input.con-error, .campo.con-error .input, .campo.con-error .sel-boton, .campo.con-error .fecha-wrap { border-color: var(--color-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent); }
.input:disabled, .input[readonly] { background: var(--color-superficie-2); color: var(--color-texto-suave); cursor: not-allowed; }
.input.importe { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.form-pie { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }

/* Toggle (Contado / Crédito, etc.) */
.toggle-grupo { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--color-borde); border-radius: 10px; padding: 3px; background: var(--color-superficie-2); }
.toggle-grupo button {
  border: 0; background: transparent; color: var(--color-texto-suave); font: inherit; font-weight: 600; padding: .45rem .95rem;
  border-radius: 7px; cursor: pointer; min-height: 36px;
}
.toggle-grupo button:hover { color: var(--color-texto); }
.toggle-grupo button[aria-pressed="true"] { background: var(--color-primario); color: var(--color-texto-sobre-primario); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.toggle-grupo.bloque { display: flex; }
.toggle-grupo.bloque { flex-wrap: nowrap; }
.toggle-grupo.bloque button { flex: 1; min-width: 0; padding-inline: .5rem; white-space: nowrap; }

/* Interruptor (checkbox propio) */
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .pista { width: 40px; height: 22px; border-radius: 999px; background: var(--color-borde); position: relative; transition: background .15s; flex: none; }
.switch .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + .pista { background: var(--color-primario); }
.switch input:checked + .pista::after { transform: translateX(18px); }
.switch input:focus-visible + .pista { outline: 2px solid var(--color-primario); outline-offset: 2px; }

/* Select propio */
.sel { position: relative; }
.sel-boton {
  width: 100%; min-height: 42px; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; text-align: left;
  border-radius: 9px; border: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto);
  font: inherit; cursor: pointer;
}
.sel-boton:hover { border-color: color-mix(in srgb, var(--color-primario) 35%, var(--color-borde)); }
.sel.abierto .sel-boton, .sel-boton:focus-visible { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 22%, transparent); }
.sel-boton .valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-boton .valor.vacio-sel { color: var(--color-texto-suave); }
.sel-boton .icono { color: var(--color-texto-suave); transition: transform .15s; }
.sel.abierto .sel-boton .icono { transform: rotate(180deg); }
.sel.deshabilitado .sel-boton { background: var(--color-superficie-2); cursor: not-allowed; color: var(--color-texto-suave); }
.sel-panel, .fecha-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 70; background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.2); overflow: hidden;
}
.sel-panel .sel-buscar { padding: .5rem; border-bottom: 1px solid var(--color-borde); }
.sel-panel .sel-buscar input { min-height: 36px; }
.sel-lista { max-height: 280px; overflow-y: auto; padding: .3rem; margin: 0; list-style: none; }
.sel-lista li { padding: .5rem .65rem; border-radius: 7px; cursor: pointer; display: flex; flex-direction: column; }
.sel-lista li small { color: var(--color-texto-suave); }
.sel-lista li.activa { background: color-mix(in srgb, var(--color-primario) 12%, transparent); }
.sel-lista li[aria-selected="true"] { font-weight: 650; color: var(--color-primario); }
.sel-lista li.sin-resultados { color: var(--color-texto-suave); cursor: default; }

/* Selector de fecha propio */
.fecha { position: relative; }
.fecha-wrap { display: flex; align-items: center; border: 1px solid var(--color-borde); border-radius: 9px; background: var(--color-superficie); min-height: 42px; }
.fecha-wrap:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 22%, transparent); }
.fecha-wrap input { border: 0; background: transparent; color: var(--color-texto); font: inherit; padding: .5rem .75rem; flex: 1; min-width: 0; outline: none; font-variant-numeric: tabular-nums; }
.fecha-wrap button { border: 0; background: transparent; color: var(--color-texto-suave); padding: 0 .7rem; height: 40px; cursor: pointer; display: grid; place-items: center; }
.fecha-wrap button:hover { color: var(--color-primario); }
.fecha-panel { right: auto; width: 296px; padding: .7rem; }
.fecha-cab { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.fecha-cab .mes { flex: 1; text-align: center; font-weight: 650; text-transform: capitalize; }
.fecha-cab button { min-width: 32px; height: 32px; padding: 0 2px; border-radius: 8px; border: 0; background: transparent; color: var(--color-texto); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fecha-cab button .icono + .icono { margin-left: -10px; }
.fecha-cab button:hover { background: var(--color-superficie-2); }
.fecha-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.fecha-grilla .dsem { font-size: .72rem; color: var(--color-texto-suave); font-weight: 650; padding: .25rem 0; }
.fecha-grilla button {
  height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--color-texto); font: inherit; font-size: .9rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.fecha-grilla button:hover { background: var(--color-superficie-2); }
.fecha-grilla button.otro-mes { color: var(--color-texto-suave); opacity: .55; }
.fecha-grilla button.hoy { box-shadow: inset 0 0 0 1.5px var(--color-primario); font-weight: 700; }
.fecha-grilla button.foco { background: color-mix(in srgb, var(--color-primario) 14%, transparent); }
.fecha-grilla button.elegida { background: var(--color-primario); color: var(--color-texto-sobre-primario); font-weight: 700; }
.fecha-grilla button:disabled { opacity: .3; cursor: not-allowed; background: transparent; }
.fecha-pie { display: flex; justify-content: space-between; margin-top: .5rem; }
.fecha-pie button { border: 0; background: none; color: var(--color-primario); font: inherit; font-weight: 600; cursor: pointer; padding: .3rem .4rem; border-radius: 6px; }
.fecha-pie button:hover { background: var(--color-superficie-2); }

/* Filtros sobre tablas */
.filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros .campo { min-width: 170px; }
.filtros .campo.ancho { flex: 1; min-width: 220px; }

/* ───────── Modal, paleta Ctrl+K, toasts ───────── */
.velo { position: fixed; inset: 0; background: rgba(8, 12, 20, .55); z-index: 100; display: grid; place-items: start center; padding: 10vh 1rem 1rem; }
.modal {
  width: min(520px, 100%); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); padding: 1.3rem 1.4rem;
}
.modal h2 { margin-bottom: .5rem; }
.modal .form-pie { margin-top: 1.2rem; }
.modal.ancho { width: min(760px, 100%); }
.paleta-k { width: min(620px, 100%); padding: 0; overflow: hidden; }
.paleta-k .buscar { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--color-borde); }
.paleta-k .buscar input { border: 0; outline: none; background: transparent; color: var(--color-texto); font: inherit; font-size: 1.05rem; flex: 1; }
.paleta-k ul { list-style: none; margin: 0; padding: .4rem; max-height: 52vh; overflow-y: auto; }
.paleta-k li a { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 9px; color: var(--color-texto); text-decoration: none; }
.paleta-k li a small { margin-left: auto; color: var(--color-texto-suave); }
.paleta-k li.activa a { background: color-mix(in srgb, var(--color-primario) 13%, transparent); }
.paleta-k .pie { padding: .5rem 1rem; border-top: 1px solid var(--color-borde); font-size: .8rem; color: var(--color-texto-suave); display: flex; gap: 1rem; }
.resultados-nav {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 50; background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.2); padding: .35rem; list-style: none; margin: 0;
}
.resultados-nav li a { display: flex; gap: .6rem; padding: .55rem .7rem; border-radius: 8px; color: var(--color-texto); text-decoration: none; }
.resultados-nav li a small { margin-left: auto; color: var(--color-texto-suave); }
.resultados-nav li.activa a { background: color-mix(in srgb, var(--color-primario) 13%, transparent); }

.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }
.toast {
  padding: .75rem 1rem; border-radius: 12px; background: var(--color-superficie); border: 1px solid var(--color-borde);
  box-shadow: 0 10px 30px rgba(0,0,0,.2); border-left: 4px solid var(--color-info); animation: entra .2s ease;
}
.toast.exito { border-left-color: var(--color-exito); }
.toast.error { border-left-color: var(--color-error); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.inactividad .cuenta { font-size: 2.6rem; font-weight: 800; color: var(--color-alerta); font-variant-numeric: tabular-nums; text-align: center; margin: .5rem 0; }

/* ───────── Dashboard ───────── */
.widgets { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.widget { margin: 0; }
.widget h3 { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.widget h3 .icono { color: var(--color-primario); }
.widget ul.lista { list-style: none; margin: .4rem 0 0; padding: 0; }
.widget ul.lista li { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--color-borde); font-size: .92rem; }
.atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.atajos a {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .4rem; border-radius: 11px; text-align: center;
  border: 1px solid var(--color-borde); color: var(--color-texto); font-size: .82rem; font-weight: 600; text-decoration: none;
}
.atajos a:hover { border-color: var(--color-primario); color: var(--color-primario); }
.tarea { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; border-top: 1px solid var(--color-borde); }
.tarea.hecha .t { text-decoration: line-through; color: var(--color-texto-suave); }
.tarea .t { flex: 1; min-width: 0; }
.tarea form { display: inline; margin: 0; }
.check-btn { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--color-borde); background: var(--color-superficie); display: grid; place-items: center; cursor: pointer; color: var(--color-texto-sobre-primario); padding: 0; }
.check-btn.on { background: var(--color-primario); border-color: var(--color-primario); }

/* Paletas en preferencias */
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.paleta-op { border: 2px solid var(--color-borde); border-radius: 12px; padding: .7rem; cursor: pointer; background: var(--color-superficie); text-align: left; font: inherit; color: var(--color-texto); }
.paleta-op[aria-pressed="true"] { border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 20%, transparent); }
.paleta-op .muestras { display: flex; gap: 4px; margin-bottom: .5rem; }
.paleta-op .muestras span { flex: 1; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); }
.orden-widgets { list-style: none; padding: 0; margin: 0; }
.orden-widgets li { display: flex; align-items: center; gap: .75rem; padding: .6rem .2rem; border-top: 1px solid var(--color-borde); }
.orden-widgets li .info { flex: 1; }

/* Cobros */
.venta-cobro { border: 1px solid var(--color-borde); border-radius: 14px; background: var(--color-superficie); margin-bottom: 1rem; overflow: hidden; }
.venta-cobro .cab { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; }
.venta-cobro .cab .datos { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.venta-cobro .cuerpo { border-top: 1px solid var(--color-borde); padding: 1rem 1.2rem; background: var(--color-superficie-2); }
.reparto { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .9rem; }
.reparto li { display: flex; justify-content: space-between; padding: .25rem 0; }
.dato small { display: block; color: var(--color-texto-suave); font-size: .78rem; }
.dato strong { font-variant-numeric: tabular-nums; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--color-fondo); }
.login .caja { width: min(400px, 100%); }
.login .marca-login { display: flex; align-items: center; gap: .7rem; justify-content: center; margin-bottom: 1.25rem; font-size: 1.35rem; font-weight: 750; }
.login .marca-login .logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--color-primario); color: var(--color-texto-sobre-primario); }

/* ───────── Responsive ───────── */
.solo-movil { display: none; }
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app, .app.colapsada { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-100%); transition: transform .2s ease; }
  .app.menu-abierto .sidebar { transform: none; box-shadow: 0 0 50px rgba(0,0,0,.4); }
  .app.colapsada .sidebar .txt { display: inline; }
  .app.colapsada .nav-cat > button { justify-content: flex-start; padding: .55rem .7rem; }
  .app.colapsada .nav-cat a { justify-content: flex-start; padding: .5rem .7rem .5rem 1rem; }
  .solo-movil { display: inline-grid; }
  .solo-escritorio { display: none !important; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .header { padding: 0 .75rem; }
  .subheader, .contenido { padding-left: .85rem; padding-right: .85rem; }
  .menu-usuario .nombre { display: none; }
  .fecha-panel { width: min(296px, calc(100vw - 2rem)); }
}
.cortina { display: none; }
@media (max-width: 900px) { .app.menu-abierto .cortina { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.4); } }

/* Caja: lista de movimientos */
.lista-movs { list-style: none; margin: 0; padding: 0; }
.lista-movs li { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: .65rem 0; border-top: 1px solid var(--color-borde); }
.lista-movs li:first-child { border-top: 0; }
.lista-movs .txt { min-width: 0; }
.lista-movs .txt small { display: block; color: var(--color-texto-suave); font-size: .82rem; }
.lista-movs .txt small.obs-alerta { color: var(--color-alerta); }
.lista-movs .monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-movs .monto.entra { color: var(--color-exito); }
.lista-movs .monto.sale { color: var(--color-error); }
.billetes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-top: .6rem; }
@media (max-width: 900px) { .billetes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
details.desplegar > summary { cursor: pointer; color: var(--color-primario); font-weight: 600; font-size: .9rem; }
.dif { font-weight: 650; margin-top: .4rem; }
.dif.exito { color: var(--color-exito); } .dif.alerta { color: var(--color-alerta); } .dif.error { color: var(--color-error); }

/* Logo de Scala */
.sidebar .marca .logo-img { height: 38px; width: auto; display: block; }
.sidebar .marca .solo-colapsada { display: none; }
.app.colapsada .sidebar .marca .solo-colapsada { display: grid; }
@media (max-width: 900px) { .app.colapsada .sidebar .marca .solo-colapsada { display: none; } }
.marca-login img { height: 70px; width: auto; }
.marca-login .logo-noche, [data-modo="oscuro"] .marca-login .logo-dia { display: none; }
[data-modo="oscuro"] .marca-login .logo-noche { display: block; }

/* Modo demostración */
.franja-demo { padding: .45rem 1.25rem; font-size: .85rem; font-weight: 600; color: var(--color-alerta); background: color-mix(in srgb, var(--color-alerta) 12%, var(--color-superficie)); border-bottom: 1px solid color-mix(in srgb, var(--color-alerta) 35%, var(--color-borde)); }
.franja-demo code { font-size: .8rem; }

/* Header secundario: buscador a la izquierda, modo noche y notificaciones a la derecha */
.subheader { justify-content: space-between; }
.sub-acciones { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.flyout-titulo { display: none; }

/* Barra plegada: solo categorías; sus módulos se abren en un panel flotante */
@media (min-width: 901px) {
  .app.colapsada .nav-cat:not(.nav-inicio) ul,
  .app.colapsada .nav-cat.cerrada:not(.nav-inicio) ul { display: none; }
  .app.colapsada .nav-cat.cat-activa > button { background: var(--color-primario); color: var(--color-texto-sobre-primario); opacity: 1; }
  .app.colapsada .nav-cat.flyout > ul {
    display: block; position: fixed; left: 64px; min-width: 230px; z-index: 80; padding: .4rem;
    background: var(--color-sidebar); color: var(--color-sidebar-texto); border-radius: 0 12px 12px 0;
    box-shadow: 10px 10px 30px rgba(0,0,0,.3);
  }
  .app.colapsada .nav-cat.flyout > ul .txt { display: inline; }
  .app.colapsada .nav-cat.flyout > ul a { justify-content: flex-start; padding: .5rem .8rem; }
  .app.colapsada .nav-cat.flyout .flyout-titulo { display: block; padding: .45rem .8rem .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .7; }
}

/* Inicio: grilla de 4 columnas con rectángulos (2) y cuadrados (1) intercalados */
.widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: stretch; }
.widget.w-completo { grid-column: 1 / -1; }
.widget.w-ancho { grid-column: span 2; }
.widget.w-cuadrado { grid-column: span 1; }
.cab-widget { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.cab-widget h3 { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.kpi-tile { display: flex; flex-direction: column; gap: .2rem; padding: .35rem 1rem; border-left: 1px solid var(--color-borde); min-width: 0; }
.kpi-tile:first-child { border-left: 0; padding-left: 0; }
.kpi-tile .valor { font-size: 1.45rem; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.kpi-tile .rotulo { font-size: .8rem; color: var(--color-texto-suave); }
.kpi-tile .delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; font-weight: 600; color: var(--color-texto-suave); }
.kpi-tile .delta.sube { color: var(--color-exito); }
.kpi-tile .delta.baja { color: var(--color-error); }
@media (max-width: 1200px) { .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .widget.w-ancho { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .widgets { grid-template-columns: 1fr; }
  .widget.w-ancho, .widget.w-cuadrado { grid-column: auto; }
  .kpi-tile { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-borde); padding-top: .6rem; }
}

/* Fotos de cédula */
.fotos-cedula { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.foto-caja { display: flex; flex-direction: column; border: 1.5px dashed var(--color-borde); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--color-superficie-2); transition: border-color .15s; }
.foto-caja:hover, .foto-cedula input:focus-visible + .foto-caja { border-color: var(--color-primario); }
.foto-cedula input:focus-visible + .foto-caja { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 22%, transparent); }
.foto-vista { height: 150px; display: grid; place-items: center; color: var(--color-texto-suave); background: center / contain no-repeat; }
.foto-vista .icono { width: 34px; height: 34px; }
.foto-cedula.lista .foto-vista .icono { display: none; }
.foto-cedula.lista .foto-caja { border-style: solid; border-color: color-mix(in srgb, var(--color-exito) 55%, var(--color-borde)); }
.foto-cedula.con-error .foto-caja { border-color: var(--color-error); }
.foto-txt { display: flex; flex-direction: column; padding: .55rem .8rem; border-top: 1px solid var(--color-borde); background: var(--color-superficie); }
.foto-info { font-size: .8rem; color: var(--color-texto-suave); }
.cedula-ver { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.cedula-ver a { display: block; border: 1px solid var(--color-borde); border-radius: 10px; overflow: hidden; background: var(--color-superficie-2); }
.cedula-ver img { display: block; width: 100%; height: 170px; object-fit: contain; }
.cedula-ver small { display: block; padding: .35rem .6rem; color: var(--color-texto-suave); border-top: 1px solid var(--color-borde); background: var(--color-superficie); }
@media (max-width: 600px) { .fotos-cedula, .cedula-ver { grid-template-columns: 1fr; } }

/* Cobros: selector de créditos */
.selector-ventas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; margin: .6rem 0 1rem; }
.opcion-venta {
  display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: .9rem 1rem; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto); font: inherit;
}
.opcion-venta:hover { border-color: color-mix(in srgb, var(--color-primario) 45%, var(--color-borde)); }
.opcion-venta.elegida { border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent); }
.ov-producto { font-weight: 650; }
.ov-meta { font-size: .82rem; color: var(--color-texto-suave); }
.ov-datos { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .86rem; }
.ov-avance { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-primario) 15%, var(--color-superficie-2)); overflow: hidden; }
.ov-avance span { display: block; height: 100%; border-radius: 999px; background: var(--color-primario); }
.ov-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }

/* ───────── Gráficos (skill dataviz: paleta validada en claro y oscuro) ───────── */
:root {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a;
  --rampa-1: #86b6ef; --rampa-2: #5598e7; --rampa-3: #2a78d6; --rampa-4: #1c5cab; --rampa-5: #104281;
  --estado-bien: #0ca30c; --estado-alerta: #fab219; --estado-serio: #ec835a; --estado-critico: #d03b3b;
}
[data-modo="oscuro"] {
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
  --rampa-1: #184f95; --rampa-2: #256abf; --rampa-3: #3987e5; --rampa-4: #6da7ec; --rampa-5: #9ec5f4;
}
.grid-viz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-viz .tarjeta { margin: 0; }
.grid-viz .w-ancho { grid-column: 1 / -1; }
@media (max-width: 900px) { .grid-viz { grid-template-columns: 1fr; } }
.viz h2 { margin-bottom: .1rem; }
.viz-cont { margin-top: .6rem; }
.viz-svg { display: block; max-width: 100%; overflow: visible; }
.viz-grilla { stroke: var(--color-borde); stroke-width: 1; }
.viz-base { stroke: color-mix(in srgb, var(--color-texto-suave) 45%, var(--color-borde)); stroke-width: 1; }
.viz-eje { fill: var(--color-texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-etq { fill: var(--color-texto); font-size: 12.5px; }
.viz-valor { fill: var(--color-texto); font-size: 12px; font-weight: 600; }
.viz-col { outline: none; cursor: default; }
.viz-col:hover .viz-marca, .viz-col:focus-visible .viz-marca { filter: brightness(1.12); }
.viz-col:focus-visible .viz-etq { text-decoration: underline; }
.viz-leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--color-texto-suave); }
.viz-leyenda > span { display: inline-flex; align-items: center; gap: .4rem; }
.viz-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.viz-tip {
  position: fixed; z-index: 300; pointer-events: none; min-width: 160px; padding: .5rem .7rem; border-radius: 10px;
  background: var(--color-superficie); color: var(--color-texto); border: 1px solid var(--color-borde); box-shadow: 0 10px 28px rgba(0,0,0,.2); font-size: .85rem;
}
.viz-tip-titulo { font-size: .78rem; color: var(--color-texto-suave); margin-bottom: .2rem; }
.viz-tip-fila { display: flex; align-items: center; gap: .45rem; }
.viz-tip-fila strong { font-variant-numeric: tabular-nums; }
.viz-tip-fila span:last-child { color: var(--color-texto-suave); }
.viz-tip-clave { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.viz-tabla { margin-top: .6rem; }
.viz-tabla summary { cursor: pointer; color: var(--color-primario); font-size: .85rem; font-weight: 600; }
.viz-tabla .tabla-wrap { margin-top: .5rem; }

/* Menú lateral: módulos con sangría y letra más chica que su categoría */
.nav-cat:not(.nav-inicio) > ul { margin: .1rem 0 .35rem 1.45rem; padding-left: .55rem; border-left: 1px solid rgba(255,255,255,.14); }
.nav-cat:not(.nav-inicio) > ul a { font-size: .86rem; padding: .38rem .6rem; gap: .55rem; opacity: .82; }
.nav-cat:not(.nav-inicio) > ul a .icono { width: 16px; height: 16px; }
.nav-cat:not(.nav-inicio) > ul a.activo { opacity: 1; }
.nav-cat > button { font-size: .8rem; opacity: .95; }
@media (min-width: 901px) {
  .app.colapsada .nav-cat:not(.nav-inicio) > ul { margin: 0; padding-left: .4rem; border-left: 0; }
}

/* Foto del producto: caja de carga, miniatura del listado y vista previa */
.foto-producto { max-width: 340px; }
.foto-producto .foto-vista { height: 220px; }
.prod-mini { width: 48px; height: 48px; padding: 0; border: 1px solid var(--color-borde); border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--color-superficie-2); color: var(--color-texto-suave); cursor: pointer; }
.prod-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-mini:hover, .prod-mini:focus-visible { border-color: var(--color-primario); }
.btn-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.btn-link:hover strong, .btn-link:focus-visible strong { color: var(--color-primario); text-decoration: underline; }
.vista-producto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.vp-foto { border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; background: var(--color-superficie-2); }
.vp-foto img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #fff; }
.vp-sin { height: 260px; display: grid; place-content: center; justify-items: center; gap: .4rem; color: var(--color-texto-suave); }
.vp-sin .icono { width: 40px; height: 40px; }
.vp-datos h2 { margin: 0 0 .25rem; }
.vp-datos .kpi { margin: .8rem 0; }
@media (max-width: 700px) { .vista-producto { grid-template-columns: 1fr; } .vp-foto img { max-height: 45vh; } }