/* =============================================================================
   Intranet ProCarpas
   Los tokens salen del logotipo: el rojo es el de marca, muestreado del PDF.
   Los neutros llevan una leve inclinación cálida hacia ese rojo, para que no
   se vean como un gris de plantilla.
   ========================================================================== */
:root {
  --paper:      #FBF9F8;
  --surface:    #FFFFFF;
  --surface-2:  #F3EEEB;
  --ink:        #17110F;
  --ink-2:      #453936;
  --muted:      #7C6E68;
  --line:       #E4DBD7;
  --line-2:     #CFC2BC;
  --accent:     #E93418;
  --accent-ink: #B7250E;
  --ok:         #1E7A5A;
  --warn:       #B5761A;
  --info:       #35617F;

  /* El panel lateral va en blanco. Estuvo oscuro y obligaba a aclarar el
     logotipo para que se viera, que es exactamente lo que no hay que hacerle
     a una marca: el negro y el rojo del logotipo son el logotipo. Se cambia
     el fondo, no la marca. */
  --nav-bg:     #FFFFFF;
  --nav-ink:    #6B5D57;
  --nav-hi:     #17110F;
  --nav-line:   #E4DBD7;
  --nav-hover:  #F3EEEB;

  /* La pantalla de acceso conserva el fondo oscuro: ahí el logotipo va dentro
     de una tarjeta blanca, así que se ve bien, y el contraste ayuda a que la
     única pantalla pública no se confunda con la aplicación. */
  --fondo-acceso: #14100E;

  --fuente:     "Corbel", "Segoe UI", system-ui, sans-serif;
  --display:    "Bahnschrift", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --mono:       "Cascadia Mono", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--fuente); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 820px) { .app { grid-template-columns: minmax(0, 1fr); } .side { display: none; } }

.side { background: var(--nav-bg); display: flex; flex-direction: column;
        border-right: 1px solid var(--line); }
.side-brand { padding: .95rem 1rem .85rem; border-bottom: 1px solid var(--nav-line); }
.side-brand img { display: block; width: 138px; height: auto; }
.side-brand .txt {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  color: #fff; letter-spacing: .04em; text-transform: uppercase;
}
.side-brand .txt span { color: var(--accent); }
.side-nav { padding: .7rem 0; display: grid; gap: .06rem; align-content: start; flex: 1; }
.side-grp {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .15em; font-size: .6rem; color: #A2938C;
  padding: .8rem .95rem .35rem;
}
.side a {
  display: flex; align-items: center; gap: .55rem; margin: 0 .5rem;
  padding: .4rem .55rem; border-radius: 7px; font-size: .87rem;
  color: var(--nav-ink); text-decoration: none;
}
.side a:hover { background: var(--nav-hover); color: var(--nav-hi); }
.side a.on { background: var(--accent); color: #fff; font-weight: 600; }

/* Los iconos son lo que separa un módulo, que se puede abrir, del título del
   grupo, que no. Heredan el color del enlace con currentColor: por eso no
   hace falta una versión clara para la sección activa. */
.side a .ic {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .62;
}
.side a:hover .ic { opacity: .85; }
.side a.on .ic { opacity: 1; }
/* El grupo se sangra a la altura del texto de los módulos, no del icono: así
   los rótulos quedan alineados en una sola columna. */
.side-grp { padding-left: 1.5rem; }
.side a .cnt {
  margin-left: auto; font-family: var(--mono); font-size: .66rem;
  background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: .02rem .36rem;
}
/* Marca de lo que aún no está construido. Va apagada a propósito: tiene que
   leerse como una nota al margen y no competir con las secciones que sí
   funcionan. */
.side a .etapa {
  margin-left: auto; font-family: var(--display); font-size: .58rem;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  color: #9C8D86; border: 1px solid var(--line);
  border-radius: 999px; padding: .04rem .38rem;
}
.side a.on .etapa { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); }
.side-foot { border-top: 1px solid var(--nav-line); padding: .7rem .85rem; display: flex; align-items: center; gap: .55rem; }
.avatar {
  width: 27px; height: 27px; border-radius: 50%; flex: none; background: var(--accent);
  color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .68rem;
}
.side-foot .who { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.side-foot .who b { color: var(--nav-hi); font-size: .78rem; font-weight: 600; }
.side-foot .who span { color: var(--muted); font-size: .68rem; }
.side-foot button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: .72rem; font-family: var(--fuente); padding: .2rem; text-decoration: underline;
}
.side-foot button:hover { color: var(--accent-ink); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .8rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.crumb { margin-right: auto; min-width: 0; }
.crumb .up { font-family: var(--mono); font-size: .68rem; color: var(--muted); display: block; }
.crumb h1 {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .01em;
}
.canvas { padding: 1.1rem 1.2rem 2rem; display: grid; gap: 1rem; align-content: start; }

/* ---------- controles ---------- */
.btn {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: .7rem; padding: .45rem .8rem; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.pri:hover { background: var(--accent-ink); color: #fff; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface);
  padding: .42rem .6rem; font-size: .9rem; font-family: var(--fuente); color: var(--ink);
  width: 100%;
}
textarea { min-height: 76px; resize: vertical; }
label.campo { display: grid; gap: .25rem; min-width: 0; }
label.campo > span {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .62rem; color: var(--muted);
}
.campo .error { color: var(--accent-ink); font-size: .78rem; font-family: var(--fuente); text-transform: none; letter-spacing: 0; }
input.malo, select.malo { border-color: var(--accent); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem 1rem; }

/* ---------- tarjetas y datos ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.card-h {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .65rem .9rem; border-bottom: 1px solid var(--line);
}
.card-h h2 {
  margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .11em; font-size: .68rem; color: var(--muted);
}
.card-b { padding: .9rem; display: grid; gap: .8rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .7rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: .75rem .85rem; display: grid; gap: .3rem; }
.kpi .lbl { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .11em; font-size: .62rem; color: var(--muted); }
.kpi .val { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .foot { font-family: var(--mono); font-size: .69rem; color: var(--muted); }
.kpi.alerta { border-color: var(--accent); }
.kpi.alerta .val { color: var(--accent); }

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
thead th {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .64rem; color: var(--muted);
  background: var(--surface-2); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); white-space: nowrap; }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

.pill {
  display: inline-flex; align-items: center; gap: .32rem; font-size: .72rem; font-weight: 600;
  padding: .1rem .5rem; border: 1px solid; border-radius: 999px; white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.ok   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, transparent);   background: color-mix(in srgb, var(--ok) 10%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pill.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 42%, transparent); background: color-mix(in srgb, var(--info) 11%, transparent); }
.pill.mut  { color: var(--muted); border-color: var(--line-2); background: transparent; }
.pill.mut::before { display: none; }

.aviso { padding: .65rem .9rem; border-radius: 9px; border: 1px solid; font-size: .9rem; }
.aviso.ok    { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.aviso.error { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

.vacio { padding: 2.2rem 1rem; text-align: center; color: var(--muted); }
.vacio p { margin: 0 0 .8rem; }
.mut { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); font-size: .85em; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.filtros label.campo { min-width: 150px; }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--fondo-acceso); }
.acceso-caja { width: 100%; max-width: 370px; background: var(--surface); border-radius: 14px; padding: 1.8rem 1.6rem; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); display: grid; gap: 1rem; }
.acceso-caja .marca { text-align: center; display: grid; gap: .5rem; justify-items: center; }
.acceso-caja .marca img { width: 168px; }
.acceso-caja .marca .txt { font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }
.acceso-caja .marca .txt span { color: var(--accent); }
.acceso-caja .marca small { color: var(--muted); font-size: .82rem; }
.acceso-caja form { display: grid; gap: .8rem; }

/* Fila de una cuenta desactivada: sigue a la vista porque su historial importa,
   pero apagada para que no se confunda con las que pueden entrar. */
tr.apagada td { opacity: .5; }

/* El nombre del pie es ahora un enlace a la propia cuenta. Sin esto heredaría
   el aspecto de los enlaces del menú —margen, relleno y fondo al pasar por
   encima— y descuadraría la fila entera. */
.side-foot a.avatar, .side-foot a.who { margin: 0; padding: 0; border-radius: 0; }

/* El avatar pasó de <span> a <a> para llevar a «Mi cuenta», y con eso empezó a
   heredar de `.side a`, que tiene más especificidad que `.avatar`: le pisaba el
   display:grid que centraba las iniciales, el tamaño de letra y le metía un
   gap. El resultado era una letra grande pegada a la izquierda del círculo.
   Se repite aquí lo que el avatar necesita, con la especificidad suficiente. */
.side-foot a.avatar {
  border-radius: 50%;
  display: grid; place-items: center; gap: 0;
  font-family: var(--display); font-weight: 700; font-size: .68rem;
  line-height: 1; letter-spacing: .02em;
  color: #fff;
}
.side-foot a.avatar:hover { color: #fff; }
.side-foot a.who { color: inherit; text-decoration: none; }
.side-foot a.who:hover, .side-foot a.avatar:hover { background: none; }
.side-foot a.who:hover b { color: var(--accent-ink); text-decoration: underline; }