/* ==========================================================================
   app.css — Sistema de diseño compartido (login, dashboard, administración).

   Modo dia/noche: los valores claros se definen en :root pelado; los oscuros se
   redefinen dos veces, bajo la media query (setting del sistema) y bajo
   [data-theme="dark"] (interruptor del usuario), para que el interruptor gane
   en ambas direcciones. Los colores de serie oscuros son los mismos ocho tonos
   re-escalonados para fondo oscuro, no un volteo automatico.
   ========================================================================== */

:root {
  color-scheme: light;

  --plane:      #f7f7f5;
  --surface:    #ffffff;
  --surface-2:  #fbfbfa;
  --ink:        #0b0b0b;
  --ink-2:      #52514e;
  --muted:      #898781;
  --grid:       #e8e7e2;
  --axis:       #c9c8c2;
  --hair:       rgba(11, 11, 11, .085);
  --hair-2:     rgba(11, 11, 11, .14);
  --shadow:     0 1px 2px rgba(11,11,11,.04), 0 8px 24px rgba(11,11,11,.05);
  --shadow-pop: 0 8px 32px rgba(11,11,11,.13);
  --wash:       rgba(42, 120, 214, .07);

  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --seq-1:#cde2fb; --seq-2:#86b6ef; --seq-3:#2a78d6; --seq-4:#184f95;

  --good:#006300; --bad:#d03b3b; --warn:#8a6d1a;
  --warn-bg:#fffbeb; --warn-hair:#f0e2b4;
  --bad-bg:#fdf3f3; --bad-hair:#f0cfcf;
  --good-bg:#f1f8f1; --good-hair:#c9e2c9;

  --r:12px; --r-sm:8px; --r-xs:6px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:      #0d0d0d;
    --surface:    #161615;
    --surface-2:  #1c1c1a;
    --ink:        #ffffff;
    --ink-2:      #c3c2b7;
    --muted:      #8e8c85;
    --grid:       #2a2a28;
    --axis:       #3a3a37;
    --hair:       rgba(255,255,255,.09);
    --hair-2:     rgba(255,255,255,.16);
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --shadow-pop: 0 8px 32px rgba(0,0,0,.55);
    --wash:       rgba(57, 135, 229, .13);

    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --seq-1:#184f95; --seq-2:#256abf; --seq-3:#3987e5; --seq-4:#86b6ef;

    --good:#0ca30c; --bad:#e66767; --warn:#fab219;
    --warn-bg:#2a2410; --warn-hair:#4a3f18;
    --bad-bg:#2a1616; --bad-hair:#4a2424;
    --good-bg:#132413; --good-hair:#1f3d1f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:      #0d0d0d;
  --surface:    #161615;
  --surface-2:  #1c1c1a;
  --ink:        #ffffff;
  --ink-2:      #c3c2b7;
  --muted:      #8e8c85;
  --grid:       #2a2a28;
  --axis:       #3a3a37;
  --hair:       rgba(255,255,255,.09);
  --hair-2:     rgba(255,255,255,.16);
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
  --shadow-pop: 0 8px 32px rgba(0,0,0,.55);
  --wash:       rgba(57, 135, 229, .13);

  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --seq-1:#184f95; --seq-2:#256abf; --seq-3:#3987e5; --seq-4:#86b6ef;

  --good:#0ca30c; --bad:#e66767; --warn:#fab219;
  --warn-bg:#2a2410; --warn-hair:#4a3f18;
  --bad-bg:#2a1616; --bad-hair:#4a2424;
  --good-bg:#132413; --good-hair:#1f3d1f;
}

/* ------------------------------------------------------------ base */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--s1); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { letter-spacing: -.012em; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; }

/* ------------------------------------------------------------ topbar */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 40;
}
.topbar-in {
  max-width: 1680px; margin: 0 auto; padding: 13px 22px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
/* La marca es un enlace (boton de inicio), pero no tiene que verse como uno. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; border-radius: var(--r-xs); padding: 2px 4px; margin-left: -4px; }
.brand:hover { text-decoration: none; background: var(--surface-2); }
.brand:focus-visible { outline: 2px solid var(--s1); outline-offset: 1px; }
.brand strong { font-size: 15.5px; font-weight: 620; }
.brand .dot { color: var(--s1); }
/* Alto acotado: los logos los pone el usuario y vienen de cualquier tamaño. */
.brand .logo { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }
/* Separador fino entre los dos logos, y antes del nombre de la app. */
.brand .logo + .logo { border-left: 1px solid var(--hair-2); padding-left: 10px; }
.brand > strong { border-left: 1px solid var(--hair-2); padding-left: 10px; margin-left: 1px; }
.brand > .logo:first-child + strong { border-left: 0; padding-left: 0; }

/*
 * Los dos logos son monocromos y de polaridad opuesta: el de Noak esta dibujado
 * en blanco y el de Coresa en negro. Cada uno desaparece en un tema distinto,
 * asi que se invierte el que corresponda. Al ser monocromos, invertir no altera
 * ningun color de marca.
 *
 * Se repite el patron de temas del resto del archivo: por defecto claro, el
 * media query cubre el «automatico» y [data-theme] gana siempre.
 */
img[data-tinta="clara"] { filter: invert(1); }
img[data-tinta="oscura"] { filter: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) img[data-tinta="clara"] { filter: none; }
  :root:where(:not([data-theme="light"])) img[data-tinta="oscura"] { filter: invert(1); }
}
:root[data-theme="dark"] img[data-tinta="clara"] { filter: none; }
:root[data-theme="dark"] img[data-tinta="oscura"] { filter: invert(1); }
:root[data-theme="light"] img[data-tinta="clara"] { filter: invert(1); }
:root[data-theme="light"] img[data-tinta="oscura"] { filter: none; }
.topbar .meta { color: var(--ink-2); font-size: 12.5px; }
.topbar .meta b { color: var(--ink); font-weight: 600; }
.spacer { margin-left: auto; }

.navlinks { display: flex; gap: 1px; flex-wrap: wrap; }
.navlinks a {
  padding: 5px 10px; border-radius: var(--r-xs);
  color: var(--ink-2); font-size: 12.5px; font-weight: 500;
}
.navlinks a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.navlinks a.active { background: var(--wash); color: var(--s1); }

/* ------------------------------------------------------------ controles */

.btn {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--s1); color: var(--s1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--s1); border-color: var(--s1); color: #fff; font-weight: 520; }
.btn.primary:hover:not(:disabled) { filter: brightness(.93); color: #fff; }
.btn.danger { color: var(--bad); border-color: var(--bad-hair); }
.btn.danger:hover:not(:disabled) { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.icon { padding: 6px 8px; line-height: 1; }

input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  padding: 8px 11px; font: inherit; font-size: 13.5px; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--s1); box-shadow: 0 0 0 3px var(--wash);
}
label.fieldlabel {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .055em; color: var(--muted); font-weight: 640; margin-bottom: 5px;
}
.field { margin-bottom: 14px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* interruptor de tema */
.themebtn {
  background: none; border: 1px solid var(--hair-2); border-radius: 999px;
  width: 34px; height: 34px; cursor: pointer; color: var(--ink-2);
  display: grid; place-items: center; padding: 0;
  transition: border-color .12s, color .12s;
}
.themebtn:hover { border-color: var(--s1); color: var(--s1); }
.themebtn svg { width: 16px; height: 16px; }
:root:not([data-theme="dark"]) .themebtn .moon { display: none; }
:root[data-theme="dark"] .themebtn .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .themebtn .sun { display: none; }
  :root:where(:not([data-theme="light"])) .themebtn .moon { display: block; }
}
:root[data-theme="light"] .themebtn .sun { display: block; }
:root[data-theme="light"] .themebtn .moon { display: none; }

/* ------------------------------------------------------------ superficies */

.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 16px;
}
.card > h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 620; }
.card > .cs { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.45; }

.wrap { max-width: 1680px; margin: 0 auto; padding: 0 22px 72px; }

.sec-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 15px; flex-wrap: wrap; }
.sec-h h2 { font-size: 15px; margin: 0; font-weight: 640; }
.sec-h p { margin: 0; color: var(--muted); font-size: 12.5px; }

.grid { display: grid; gap: 13px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.notice {
  border-radius: var(--r-sm); padding: 10px 13px; font-size: 12.5px;
  border: 1px solid var(--warn-hair); background: var(--warn-bg); color: var(--warn);
}
.notice.err { border-color: var(--bad-hair); background: var(--bad-bg); color: var(--bad); }
.notice.ok  { border-color: var(--good-hair); background: var(--good-bg); color: var(--good); }
.notice b { font-weight: 640; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--hair); background: var(--surface-2);
  border-radius: 999px; padding: 3px 9px; font-size: 11.5px; color: var(--ink-2);
}
.pill.admin { border-color: var(--s1); color: var(--s1); background: var(--wash); }

/* ------------------------------------------------------------ tablas */

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td {
  padding: 9px 11px; border-bottom: 1px solid var(--grid); text-align: left;
}
table.tbl th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .045em;
  color: var(--muted); font-weight: 640;
}
table.tbl td.n, table.tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover td { background: var(--surface-2); }

/* ------------------------------------------------------------ utilidades */

.up { color: var(--good); } .down { color: var(--bad); } .flat { color: var(--muted); }
.muted { color: var(--muted); }
.empty {
  background: var(--surface); border: 1px dashed var(--axis);
  border-radius: var(--r); padding: 44px; text-align: center; color: var(--muted);
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}