/* ============================================================
   PIEL DE LAS APLICACIONES REALES
   Reproduce el aspecto de los portales en producción para que la
   demo sea reconocible: lo que el visitante ve aquí es lo que se
   va a encontrar al entrar.

   Valores tomados de scrappposedores/documentos.php e
   inprogetrecyclia/dashboard_scrapp.php.
   ============================================================ */
.skin {
  --sk-green:    #14532d;
  --sk-green-2:  #0f3d22;
  --sk-green-3:  #1e7a45;
  --sk-orange:   #ff7d00;
  --sk-orange-2: #ff9a3d;
  /* El naranja de marca no llega a 4,5:1 ni con blanco ni sobre blanco:
     un tono tinta para texto sobre claro y una tinta oscura para el
     texto que va encima del relleno naranja. El color de marca se
     mantiene intacto en los rellenos. */
  --sk-orange-ink: #a34c00;   /* 4,6:1 sobre blanco */
  --sk-on-orange:  #3d1d00;   /* 7,4:1 sobre #ff7d00 */
  --sk-bg:       #f6f7fb;
  --sk-surface:  #ffffff;
  --sk-text:     #0f172a;
  --sk-text-2:   #1f2937;
  --sk-muted:    #556275;    /* 5,6:1 sobre blanco · 5,1:1 sobre #f1f5f9 */
  --sk-faint:    #5b6b7f;    /* 4,9:1 sobre blanco (antes #94a3b8, 2,6:1) */
  --sk-border:   #e6e8ef;
  --sk-line:     #edf1f5;
  --sk-zebra:    #fcfdff;
  --sk-hover:    #f8fafc;
  --sk-radius:   18px;
  --sk-shadow:   0 10px 18px rgba(15, 23, 42, 0.06);
  --sk-shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.06);

  /* Secciones de cabecera de tabla */
  --sec1-bg: #eaf7ee; --sec1-accent: #6bbf7a;
  --sec2-bg: #fff4e5; --sec2-accent: #ffb74d;
  --sec3-bg: #e8f1ff; --sec3-accent: #7aa7ff;
  --sec4-bg: #fff7da; --sec4-accent: #e7c35a;

  /* La ventana de la demo: aplicación clara con su propio chasis */
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(20, 83, 45, 0.08), transparent 55%),
    radial-gradient(900px 500px at 0% 20%, rgba(255, 125, 0, 0.07), transparent 55%),
    var(--sk-bg);
  color: var(--sk-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  container-type: inline-size;
  overflow: hidden;
}

/* ---------- Barra lateral verde ---------- */
.skin__side {
  background: linear-gradient(180deg, var(--sk-green) 0%, var(--sk-green-2) 100%);
  color: #fff;
  padding: 1.1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.skin__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.94rem;
  letter-spacing: 0.2px;
  line-height: 1.1;
}
.skin__brand b { color: #fff; font-weight: 800; }
.skin__brand i { color: #ffb066; font-style: normal; font-weight: 800; }
.skin__logo {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 9px;
  background: #fff;
  color: var(--sk-green);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
}
.skin__who {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
}
.skin__who small {
  display: block;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.78);
}
.skin__who strong { display: block; font-size: 0.95rem; font-weight: 700; margin-block: 0.1rem 0.45rem; }
.skin__role {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
}
.skin__nav { display: grid; gap: 0.2rem; margin-top: 0.15rem; }
.skin__nav a, .skin__nav button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), translate var(--dur-1) var(--ease);
}
.skin__nav a:hover, .skin__nav button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; translate: 0 -1px; }
.skin__nav [aria-current="true"] {
  background: var(--sk-orange);
  color: var(--sk-on-orange);
  box-shadow: 0 10px 18px rgba(255, 125, 0, 0.22);
}
.skin__ico { width: 1.05rem; text-align: center; flex: none; }
.skin__foot { margin-top: auto; }
.skin__mark {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: -0.02em;
}
.skin__mark span { color: var(--sk-green); }
.skin__mark em { color: var(--sk-orange-ink); font-style: normal; }

/* ---------- Zona de contenido ---------- */
.skin__main { padding: 1.1rem 1.15rem 1.35rem; display: grid; gap: 0.85rem; align-content: start; min-width: 0; }
.skin__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.skin__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--sk-text);
  margin: 0;
}
.skin__acts { display: flex; gap: 0.45rem; flex-wrap: wrap; }

/* Botones de la aplicación */
.sbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 11px;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: var(--sk-shadow-xs);
  transition: translate var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), filter var(--dur-1) var(--ease);
}
.sbtn:hover { translate: 0 -1px; box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14); }
.sbtn:active { translate: 0 0; }
.sbtn--orange { background: linear-gradient(180deg, var(--sk-orange-2), var(--sk-orange)); color: var(--sk-on-orange); }
.sbtn--green  { background: linear-gradient(180deg, var(--sk-green-3), var(--sk-green)); }
.sbtn--ghost  { background: #fff; color: var(--sk-muted); border: 1px solid var(--sk-border); box-shadow: none; }
.sbtn--ghost:hover { color: var(--sk-text); border-color: #d7e0ea; }
.sbtn[disabled] { opacity: 0.5; cursor: not-allowed; translate: 0 0; }

/* ---------- Tarjeta ---------- */
.scard {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
  overflow: hidden;
}
.scard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
}
.scard__t {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sk-text);
}
.scard__t span { color: var(--sk-orange-ink); }
.scard__sub { font-size: 0.72rem; color: var(--sk-muted); margin: 0.1rem 0 0; }
.scard__body { padding: 0 1rem 1rem; }

/* ---------- Filtros rápidos ---------- */
.sfilters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem 0.75rem;
  padding: 0 1rem 1rem;
}
.sfield { display: grid; gap: 0.25rem; min-width: 0; }
.sfield > label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sk-text-2);
}
.sfield input, .sfield select {
  width: 100%;
  min-height: 36px;
  border-radius: 11px;
  border: 1px solid #d9e2ec;
  background: #fff;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--sk-text);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.sfield input::placeholder { color: var(--sk-faint); }
.sfield input:focus, .sfield select:focus {
  outline: none;
  border-color: rgba(255, 125, 0, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 125, 0, 0.12);
}

/* ---------- Tabla de la aplicación ---------- */
/* Como en la aplicación: la tabla no se comprime, se desplaza en
   horizontal. Comprimir 11 columnas parte cada celda en tres líneas. */
.stablewrap {
  overflow-x: auto;
  border-top: 1px solid var(--sk-border);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.stable {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.stable td, .stable th { white-space: nowrap; }
/* El nombre largo sí puede recortarse en vez de ensanchar la tabla */
.stable thead th {
  padding: 0.7rem 0.6rem 0.8rem;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--sk-text-2);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.05);
}
/* Cabecera por bloques de color, como en la aplicación */
.stable thead th.sec-0 { background: linear-gradient(180deg, var(--sk-green) 0%, var(--sk-green-2) 100%); color: #fff; border-top: 4px solid var(--sk-green-3); }
.stable thead th.sec-1 { background: linear-gradient(180deg, var(--sec1-bg) 0%, #dff1e4 100%); border-top: 4px solid var(--sec1-accent); }
.stable thead th.sec-2 { background: linear-gradient(180deg, var(--sec2-bg) 0%, #ffe9ca 100%); border-top: 4px solid var(--sec2-accent); }
.stable thead th.sec-3 { background: linear-gradient(180deg, var(--sec3-bg) 0%, #dce9ff 100%); border-top: 4px solid var(--sec3-accent); }
.stable thead th.sec-4 { background: linear-gradient(180deg, var(--sec4-bg) 0%, #ffefb3 100%); border-top: 4px solid var(--sec4-accent); }

.stable tbody td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--sk-line);
  vertical-align: middle;
  color: var(--sk-text-2);
  background: #fff;
  transition: background-color var(--dur-1) var(--ease);
}
.stable tbody tr:nth-child(even) td { background: var(--sk-zebra); }
.stable tbody tr:hover td { background: var(--sk-hover); }
.stable tbody tr.is-sel td { background: #fff8f0; }
.stable tbody tr[data-pick] { cursor: pointer; }
.stable .n { font-family: var(--font-mono); font-size: 0.74rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stable .strong { font-weight: 700; color: var(--sk-text); }
.stable .sub { display: block; font-size: 0.72rem; color: var(--sk-muted); margin-top: 0.1rem; }

/* Botones de acción redondeados de la tabla */
.pills { display: inline-flex; gap: 0.3rem; }
.pill {
  width: 30px; height: 30px;
  border: 0;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: var(--sk-shadow-xs);
  transition: translate var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.pill:hover { translate: 0 -2px; box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16); }
.pill--validate { background: linear-gradient(180deg, #1e7a45, #14532d); }
.pill--edit     { background: linear-gradient(180deg, var(--sk-orange-2), var(--sk-orange)); color: var(--sk-on-orange); }
.pill--delete   { background: linear-gradient(180deg, #cc3644, #b0222a); }
.pill--anexo    { background: linear-gradient(180deg, #2f6fd8, #1b56c4); }
.pill[disabled] { opacity: 0.45; cursor: not-allowed; }
.pill--doc { background: #fff5eb; color: var(--sk-orange-ink); border: 1px solid #ffe0c2; box-shadow: none; }
.pill--clip { background: #f1f5f9; color: var(--sk-muted); border: 1px solid var(--sk-border); box-shadow: none; }

/* ---------- Etiquetas de estado de la aplicación ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip--ok    { background: #eaf7ee; color: #14532d; border-color: #c7e7d1; }
.chip--warn  { background: #fff7e0; color: #b45309; border-color: #f5dfa8; }
.chip--bad   { background: #fee2e2; color: #991b1b; border-color: #f5c2c2; }
.chip--idle  { background: #f1f5f9; color: var(--sk-muted); border-color: #e2e8f0; }
.chip--obs   { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.chip--fact  { background: #e8f1ff; color: #1e40af; border-color: #cfe0ff; }

/* ---------- Totales y paginación ---------- */
.stotal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(180deg, var(--sk-orange-2), var(--sk-orange));
  color: var(--sk-on-orange);
  border-radius: 11px;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: var(--sk-shadow-xs);
}
.spager { display: flex; gap: 0.25rem; align-items: center; }
.spager button {
  min-width: 30px; height: 30px;
  border: 1px solid var(--sk-border);
  background: #fff;
  border-radius: 9px;
  color: var(--sk-muted);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.spager button:hover { border-color: #d7e0ea; color: var(--sk-text); }
.spager button[aria-current="true"] { background: var(--sk-green); border-color: var(--sk-green); color: #fff; }
.sfootrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- KPIs de la aplicación ---------- */
.skpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
}
.skpi {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  box-shadow: var(--sk-shadow-xs);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
.skpi__l { font-size: 0.68rem; font-weight: 700; color: var(--sk-muted); }
.skpi__v {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--sk-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 0.1rem;
}
.skpi__h { font-size: 0.66rem; color: var(--sk-faint); margin-top: 0.1rem; }
.skpi__i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background: #eaf7ee;
  color: var(--sk-green);
  font-size: 0.85rem;
}
.skpi--orange .skpi__v { color: var(--sk-orange-ink); }
.skpi--orange .skpi__i { background: #fff5eb; color: var(--sk-orange-ink); }
.skpi--green .skpi__v { color: var(--sk-green-3); }

/* ---------- Panel de detalle ---------- */
.sdetail { display: grid; gap: 0.7rem; }
.sdl { margin: 0; display: grid; gap: 0; }
.sdl > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--sk-line);
}
.sdl > div:first-child { border-top: 0; }
.sdl dt { font-size: 0.72rem; font-weight: 700; color: var(--sk-muted); }
.sdl dd { margin: 0; font-size: 0.8rem; color: var(--sk-text-2); }
.sempty {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  padding: 1.5rem 1rem;
  border: 1px dashed #d9e2ec;
  border-radius: 14px;
  background: var(--sk-hover);
  text-align: center;
  color: var(--sk-muted);
  font-size: 0.8rem;
}
.sempty kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  border: 1px solid var(--sk-border);
  border-radius: 7px;
  padding: 0.15rem 0.4rem;
  background: #fff;
  color: var(--sk-text-2);
}

/* Lista de documentos del servicio */
.sdocs { list-style: none; margin: 0; padding: 0; display: grid; }
.sdocs li {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px solid var(--sk-line);
  font-size: 0.8rem;
}
.sdocs li:first-child { border-top: 0; }
.sdocs .sd-box {
  width: 1.35rem; height: 1.35rem;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  border: 1px solid var(--sk-border);
  background: #fff;
  color: transparent;
}
.sdocs li[data-st="ok"] .sd-box    { background: #14532d; border-color: #14532d; color: #fff; }
.sdocs li[data-st="warn"] .sd-box  { background: #ffb74d; border-color: #ffb74d; color: #7c2d12; }
.sdocs li[data-st="bad"] .sd-box   { background: #fee2e2; border-color: #dc3545; color: #991b1b; }
.sdocs .sd-n b { color: var(--sk-text); }
.sdocs .sd-n span { color: var(--sk-muted); }

/* ---------- Consola de sucesos (clara) ---------- */
.slog {
  background: var(--sk-hover);
  border: 1px solid var(--sk-border);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--sk-muted);
  max-height: 7rem;
  overflow-y: auto;
  display: grid;
  gap: 0.05rem;
}
.slog p { margin: 0; display: flex; gap: 0.5rem; }
.slog time { color: var(--sk-faint); flex: none; font-variant-numeric: tabular-nums; }
.slog .lg-ok { color: #14532d; }
.slog .lg-warn { color: #b45309; }
.slog .lg-bad { color: #991b1b; }
.slog .lg-acc { color: var(--sk-orange-ink); }
@media (prefers-reduced-motion: no-preference) {
  .slog p { animation: log-in 0.3s var(--ease) both; }
}

/* ---------- Barra de aviso: es una demo ---------- */
.skin__demobar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.9rem;
  background: var(--sk-green);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.skin__demobar b { color: #fff; font-weight: 500; }
.skin__demobar .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6bbf7a;
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .skin__demobar .dot { animation: pulse-dot 2.4s var(--ease-in-out) infinite; }
}
/* El acceso a la app real es .applink: ya lleva su propio marco */
.skin__demobar a:not(.applink) { margin-left: auto; color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.skin__demobar .applink { margin-left: auto; }

/* ---------- Adaptación por ancho de la ventana ---------- */
@container (max-width: 900px) {
  .skin { grid-template-columns: 1fr; }
  .skin__side {
    flex-direction: row;
    align-items: center;
    height: auto;
    overflow-x: auto;
    padding: 0.7rem 0.85rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .skin__who, .skin__foot { display: none; }
  .skin__nav { grid-auto-flow: column; gap: 0.3rem; margin: 0; }
  .skin__nav a, .skin__nav button { white-space: nowrap; }
  .skin__brand { flex: none; }
  .skin__brand .skin__brandtxt { display: none; }
}
@container (max-width: 620px) {
  .sfilters { grid-template-columns: 1fr 1fr; }
  .sdl > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------- Segunda fila de cabecera: filtros por columna ---------- */
.stable__filters th {
  padding-top: 0;
  padding-bottom: 0.55rem;
  border-top: 0 !important;
  box-shadow: none;
}
.stable__filters input, .stable__filters select {
  width: 100%;
  min-width: 4.5rem;
  min-height: 30px;
  border-radius: 9px;
  border: 1px solid #d9e2ec;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.25rem 0.45rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--sk-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.stable__filters input::placeholder { color: var(--sk-faint); }
.stable__filters input:focus, .stable__filters select:focus {
  outline: none;
  border-color: rgba(255, 125, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 125, 0, 0.12);
}
/* En la cabecera verde el campo mantiene el fondo claro */
.stable__filters th.sec-0 input, .stable__filters th.sec-0 select { background: rgba(255, 255, 255, 0.95); }

/* Pista de que la tabla se desplaza: sombra en el borde derecho */
.stablewrap {
  background:
    linear-gradient(to right, transparent 92%, rgba(15, 23, 42, 0.05)) right / 2.5rem 100% no-repeat;
}

/* ============================================================
   VARIANTE INPROGEST
   Su aplicación no comparte paleta con SCRAPP Poseedores:
   azul → teal, fondo casi blanco y el activo del menú en claro.
   Valores de inprogetrecyclia/dashboard_scrapp.php.
   ============================================================ */
.skin--ipg {
  --sk-green:    #00527a;   /* primario oscuro (arriba del gradiente) */
  --sk-green-2:  #007a6e;   /* secundario oscuro (abajo) */
  --sk-green-3:  #009889;   /* secundario */
  --sk-blue:     #006699;   /* primario */
  --sk-orange:   #009889;   /* el acento aquí es teal, no naranja */
  --sk-orange-2: #00b3a1;
  --sk-orange-ink: #00695f;
  --sk-on-orange:  #002b27;
  --sk-bg:       #f4f8fa;
  --sk-text:     #102a43;
  --sk-text-2:   #1d3b57;
  --sk-muted:    #52607a;
  --sk-faint:    #58677e;
  --sk-border:   #dde7ee;
  --sk-line:     #e8f0f5;
  --sk-zebra:    #fbfdfe;
  --sk-hover:    #f4f8fa;
  --sk-radius:   22px;
  --sk-shadow:   0 10px 24px rgba(16, 42, 67, 0.06);
  --sk-shadow-xs: 0 4px 12px rgba(16, 42, 67, 0.05);

  grid-template-columns: 248px minmax(0, 1fr);
  background:
    radial-gradient(circle at top right, rgba(0, 152, 137, 0.12), transparent 25%),
    radial-gradient(circle at left top, rgba(0, 102, 153, 0.10), transparent 28%),
    var(--sk-bg);
}
/* El activo del menú va en claro con el texto en teal */
.skin--ipg .skin__nav [aria-current="true"] {
  background: rgba(255, 255, 255, 0.92);
  color: var(--sk-green-2);
  box-shadow: 0 8px 16px rgba(16, 42, 67, 0.12);
}
.skin--ipg .skin__brand i { color: #7fe3d6; }
.skin--ipg .skin__logo { color: var(--sk-green-2); }

/* Submenú desplegado, como en la aplicación */
.skin__sub { display: grid; gap: 0.15rem; padding-left: 1.1rem; margin-block: 0.1rem 0.25rem; }
.skin__sub button {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.45rem 0.65rem;
  color: rgba(255, 255, 255, 0.82);
}
.skin__chev { margin-left: auto; opacity: 0.6; font-size: 0.7rem; }

.skin--ipg .stable thead th.sec-0,
.skin--ipg .stable thead th.sec-1,
.skin--ipg .stable thead th.sec-2,
.skin--ipg .stable thead th.sec-3,
.skin--ipg .stable thead th.sec-4 {
  background: linear-gradient(180deg, var(--sk-blue) 0%, var(--sk-green-2) 100%);
  color: #fff;
  border-top: 4px solid var(--sk-green-3);
}
.skin--ipg .stotal { background: linear-gradient(135deg, var(--sk-blue), var(--sk-green-3)); }
.skin--ipg .spager button[aria-current="true"] { background: var(--sk-green-2); border-color: var(--sk-green-2); }
.skin--ipg .skpi__i { background: linear-gradient(180deg, rgba(0,102,153,.12), rgba(0,152,137,.12)); color: var(--sk-blue); }
.skin--ipg .skpi--orange .skpi__v { color: var(--sk-orange-ink); }
.skin--ipg .skpi--green .skpi__v { color: var(--sk-blue); }
.skin--ipg .scard__t span { color: var(--sk-green-3); }
.skin--ipg .skin__demobar { background: var(--sk-green); }
.skin--ipg .skin__demobar .dot { background: #7fe3d6; }
.skin--ipg .sbtn--green { background: linear-gradient(180deg, var(--sk-green-3), var(--sk-green-2)); }
.skin--ipg .sbtn--orange { background: linear-gradient(180deg, var(--sk-blue), var(--sk-green)); }

/* ---------- Accesos rápidos (fila con scroll) ---------- */
.squick {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0 1rem 1rem;
  scrollbar-width: thin;
}
.squick__c {
  flex: 0 0 auto;
  min-width: 8.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 1px solid var(--sk-border);
  border-radius: 14px;
  box-shadow: var(--sk-shadow-xs);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: translate var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.squick__c:hover { translate: 0 -2px; box-shadow: 0 10px 18px rgba(16,42,67,.12); border-color: #c9dae6; }
.squick__i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0,102,153,.12), rgba(0,152,137,.12));
  color: var(--sk-blue);
  font-size: 0.8rem;
}
.squick__c > span:last-child { display: grid; gap: 0.05rem; min-width: 0; }
.squick__t { display: block; font-size: 0.66rem; font-weight: 700; color: var(--sk-muted); line-height: 1.15; }
.squick__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--sk-text);
  font-variant-numeric: tabular-nums;
}
.squick__s { display: block; font-size: 0.62rem; color: var(--sk-faint); }

/* ---------- Gráfico de barras por mes ---------- */
.schart { display: grid; gap: 0.5rem; }
.sbars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.3rem;
  align-items: end;
  height: 10rem;
  padding-top: 1.1rem;
}
.sbar {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.3rem;
  align-items: end;
  justify-items: center;
  height: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  border-radius: 8px 8px 0 0;
  transition: background var(--dur-1) var(--ease);
}
.sbar:hover { background: rgba(0, 152, 137, 0.06); }
.sbar__cols { display: flex; align-items: end; gap: 2px; width: 100%; height: 100%; justify-content: center; position: relative; }
/* La altura la fija el propio JS al pintar la serie. No se anima:
   el gráfico se repinta entero al filtrar, así que una transición
   sobre `height` solo costaría layout sin verse nunca. */
.sbar__a, .sbar__b {
  width: 42%;
  max-width: 15px;
  border-radius: 4px 4px 0 0;
  transition: opacity var(--dur-1) var(--ease);
}
.sbar__a { background: #a7d8e6; }
.sbar__b { background: var(--sk-green-3); }
.sbar__pct {
  position: absolute;
  top: -1rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--sk-green-2);
  font-variant-numeric: tabular-nums;
}
.sbar__m { font-size: 0.62rem; color: var(--sk-muted); font-weight: 600; }
.sbar[aria-pressed="true"] { background: rgba(0, 152, 137, 0.12); }
.sbar[aria-pressed="true"] .sbar__m { color: var(--sk-green-2); font-weight: 800; }
.sbars.has-sel .sbar:not([aria-pressed="true"]) .sbar__a,
.sbars.has-sel .sbar:not([aria-pressed="true"]) .sbar__b { opacity: 0.35; }

.slegend {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.66rem;
  color: var(--sk-muted);
}
.slegend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.slegend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---------- Donut de distribución ---------- */
.sdonutwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.sdonut {
  --p: 0;
  position: relative;
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: conic-gradient(var(--sk-green-3) calc(var(--p) * 1%), #cfe3ee 0);
  transition: --p var(--dur-3) var(--ease);
}
.sdonut::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: #fff;
}
.sdonut__c {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 1;
}
.sdonut__c b {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--sk-text);
}
.sdonut__c span { font-size: 0.6rem; color: var(--sk-muted); }
.sdlist { display: grid; gap: 0.5rem; }
.sdlist > div {
  background: #fff;
  border: 1px solid var(--sk-border);
  border-radius: 14px;
  padding: 0.6rem 0.75rem;
}
.sdlist small { display: block; font-size: 0.62rem; font-weight: 700; color: var(--sk-muted); letter-spacing: 0.02em; }
.sdlist b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--sk-text);
  font-variant-numeric: tabular-nums;
}
.sdlist em { font-style: normal; font-size: 0.66rem; color: var(--sk-faint); }

.sgrid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
@container (max-width: 900px) {
  .sgrid2, .sdonutwrap { grid-template-columns: 1fr; }
  .sbar__pct { display: none; }
}

/* ============================================================
   OBJETIVOS TÁCTILES
   En puntero grueso los controles de la aplicación alcanzan los
   44 px que pide la WCAG 2.5.8, sin engordar el diseño en ratón.
   ============================================================ */
@media (pointer: coarse) {
  .sbtn { min-height: 44px; }
  .pill { width: 44px; height: 44px; border-radius: 12px; }
  .sfilters .sfield select,
  .sfilters .sfield input { min-height: 44px; }
  .spager button { min-width: 44px; min-height: 44px; }
  .skin__nav button { min-height: 44px; }
}