/* Lo común a todas las secciones del sistema. Cada página tiene además sus propios estilos. */
@font-face {
  font-family: "Source Sans 3";
  src: url("source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --fondo: #fff;
  --lateral: #f4f5f5;
  --tinta: #16181a;
  --tinta-2: #5c6268;
  --apagado: #697076;
  --linea: #e3e5e6;
  --linea-2: #c6c9cc;
  --gris: #eceded;
  --pizarra: #33404d;
  --asfalto: #15171a;
  --asfalto-2: #3a3f45;
  --sobre-asfalto: #f6f7f7;
  --sobre-asfalto-2: #b9bec2;
  --verde: #1d6f42;
  --verde-2: #175a36;
  --verde-suave: #e6f2ea;
  --amarillo: #ffd900;
  --amarillo-suave: #fff6bf;
  --rojo: #c4161f;
  --rojo-suave: #fbeaea;
  --ambar: #8a5a00;
  --radio: 4px;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

[hidden] { display: none !important; }

/* Menú de secciones, en el riel oscuro */
.secciones { display: grid; gap: .75rem; padding-bottom: .875rem; }
.secciones[hidden] { display: none; }
.secciones ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.secciones a { display: inline-block; padding: .25rem 0; color: var(--sobre-asfalto-2); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.secciones a:hover { color: #fff; }
.secciones a[aria-current="page"] { color: #fff; border-bottom-color: var(--amarillo); }
.secciones .quien { margin: 0; color: var(--sobre-asfalto); font-weight: 600; }
.secciones .quien span { margin-left: .5rem; color: var(--sobre-asfalto-2); font-weight: 400; }
.secciones .prueba { display: flex; align-items: center; gap: .5rem; color: var(--amarillo); font-size: .9375rem; }
.secciones .prueba select { padding: .125rem .25rem; background: var(--asfalto-2); color: var(--sobre-asfalto); border: 1px solid var(--asfalto-2); border-radius: var(--radio); font: inherit; }

.secciones .cuenta { display: flex; gap: 1rem; margin: 0; }
.secciones .cuenta button { padding: 0; background: none; border: 0; color: var(--sobre-asfalto-2); font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.secciones .cuenta button:hover { color: #fff; }

.sin-acceso { max-width: 32rem; margin: 20vh auto; padding: 0 1.5rem; font-family: var(--sans); color: var(--tinta); }
.sin-acceso h1 { margin: 0 0 .5rem; font-size: 2rem; }
.sin-acceso p { color: var(--tinta-2); font-size: 1.125rem; }
.entrada { max-width: 24rem; margin-top: 16vh; }
.entrada .empresa { margin: 0 0 .25rem; color: var(--tinta-2); font-size: .9375rem; font-weight: 700; letter-spacing: .02em; }
.entrada h1 { margin-bottom: 1.5rem; }
.entrada form, .dialogo-clave form { display: grid; gap: .875rem; }
.entrada label, .dialogo-clave label { display: grid; gap: .25rem; font-weight: 600; }
.entrada input, .dialogo-clave input { min-height: 2.75rem; padding: .375rem .75rem; border: 1px solid var(--linea-2); border-radius: var(--radio); font: 400 1.0625rem/1.2 var(--sans); color: var(--tinta); }
.entrada input:focus-visible, .dialogo-clave input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.entrada .problema, .dialogo-clave .problema { margin: 0; color: var(--rojo); font-size: 1rem; font-weight: 600; }
.entrada .problema:empty, .dialogo-clave .problema:empty { display: none; }
.entrada button[type="submit"], .dialogo-clave button[type="submit"] { min-height: 2.75rem; padding: .5rem 1.25rem; background: var(--verde); color: #fff; border: 1px solid var(--verde); border-radius: var(--radio); font: 600 1.0625rem/1.2 var(--sans); cursor: pointer; }
.entrada button[type="submit"]:hover { background: var(--verde-2); }
.entrada button:disabled { opacity: .6; cursor: progress; }
.entrada .nota { margin-top: 1.25rem; font-size: 1rem; }
.dialogo-clave { width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--linea-2); border-radius: var(--radio); font-family: var(--sans); color: var(--tinta); }
.dialogo-clave::backdrop { background: rgb(21 23 26 / .5); }
.dialogo-clave h2 { margin: 0 0 .25rem; font-size: 1.375rem; }
.dialogo-clave div { display: flex; justify-content: flex-end; gap: .5rem; }
.dialogo-clave button[value="no"] { min-height: 2.75rem; padding: .5rem 1rem; background: var(--fondo); border: 1px solid var(--linea-2); border-radius: var(--radio); font: 600 1rem/1.2 var(--sans); cursor: pointer; }

/* Páginas de sección (metas, administración): riel oscuro a la izquierda y el trabajo a la derecha */
.seccion-pagina { margin: 0; display: grid; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); min-height: 100vh; background: var(--fondo); color: var(--tinta); font: 400 1.0625rem/1.45 var(--sans); }
.seccion-pagina *, .seccion-pagina *::before, .seccion-pagina *::after { box-sizing: border-box; }
.riel { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 2rem; padding: 2rem 1.75rem; background: var(--asfalto); color: var(--sobre-asfalto); }
.riel :focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.riel .logo { display: block; width: 100%; max-width: 15rem; padding: .5rem .75rem; background: #fff; border-radius: var(--radio); }
.riel .logo img { display: block; width: 100%; height: auto; }
.riel h1 { align-self: center; margin: 0; color: #fff; font-size: clamp(2.25rem, 3vw, 3rem); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; }
.riel h1 span { display: block; font-weight: 300; }
.riel .sub { margin: .75rem 0 0; color: var(--amarillo); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.seccion-pagina {
  .trabajo { min-width: 0; padding: 1.5rem clamp(1.25rem, 3vw, 3rem) 3rem; }
  .filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linea); }
  .filtros label { display: grid; gap: .25rem; color: var(--tinta-2); font-size: .9375rem; font-weight: 600; }
  .campo, .filtros input, .filtros select { min-height: 2.5rem; padding: .375rem .625rem; background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea-2); border-radius: var(--radio); font: 400 1.0625rem/1.2 var(--sans); }
  .campo:focus-visible, .filtros :is(input, select):focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
  .pestanas { display: flex; flex-wrap: wrap; gap: 1px; width: fit-content; max-width: 100%; background: var(--linea-2); border: 1px solid var(--linea-2); border-radius: var(--radio); overflow: hidden; }
  .pestana { padding: .4375rem .875rem; background: var(--fondo); color: var(--tinta); border: 0; font: 600 1rem/1.25 var(--sans); cursor: pointer; transition: background-color .15s; }
  .pestana:hover { background: var(--lateral); }
  .pestana[aria-selected="true"] { background: var(--pizarra); color: #fff; }
  .boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; padding: .375rem 1.125rem; background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea-2); border-radius: var(--radio); font: 600 1rem/1.2 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
  .boton:hover:not(:disabled) { background: var(--lateral); border-color: var(--tinta-2); }
  .boton:active:not(:disabled) { transform: scale(.97); }
  .boton:disabled { background: var(--gris); border-color: var(--gris); color: #62686e; cursor: not-allowed; }
  .boton.principal { background: var(--verde); border-color: var(--verde); color: #fff; }
  .boton.principal:hover:not(:disabled) { background: var(--verde-2); border-color: var(--verde-2); }
  .enlace { padding: 0; background: none; border: 0; color: var(--tinta-2); font: inherit; text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 3px; cursor: pointer; }
  .enlace:hover { color: var(--tinta); text-decoration-color: currentColor; }
  .nota { margin: 0; color: var(--tinta-2); font-size: 1rem; }
  .nota:empty, .problema:empty { display: none; }
  .problema { margin: 0; color: var(--rojo); font-weight: 600; }
  .rotulo { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 600; }
  .desliza { max-width: 100%; overflow-x: auto; }
  .tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .tabla th, .tabla td { padding: .375rem .625rem; border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
  .tabla thead th { position: sticky; top: 0; background: var(--fondo); color: var(--tinta-2); font-size: .9375rem; font-weight: 600; border-bottom: 1px solid var(--linea-2); }
  .tabla .num { text-align: right; }
  .tabla tfoot th, .tabla tfoot td { font-weight: 700; border-top: 1px solid var(--tinta); border-bottom: 0; }
  .tabla .si { color: var(--verde); font-weight: 600; }
  .tabla .no { color: var(--rojo); font-weight: 600; }
  .tabla .cero { color: var(--linea-2); }
}

@media (max-width: 56rem) {
  .seccion-pagina { grid-template-columns: 1fr; }
  .riel { position: static; height: auto; grid-template-rows: auto; gap: 1.25rem; padding: 1.25rem 1rem; }
  .riel h1 { font-size: 2rem; }
  .trabajo { padding: 1rem 1rem 2.5rem; }
}