:root {
  --c-sup: #ffffff;
  --c-sup2: #fafbfd;
  --c-campo: #f6f8fb;
  --c-cab: #f4f7fb;
  --c-chip: #eef1f6;
  --c-hover: #f1f4f8;
  --c-hover2: #e9edf3;
  --c-lin2: #edf1f6;
  --c-tot: #f1f6fc;
  --c-btot: #dfe8f3;
  --c-bfuerte: #c9d2de;
  --c-bsuave: #e1e6ee;
  --c-azbg: #ebf5fe;
  --c-aztx: #0b4986;
  --c-nabg: #fdf3ea;
  --c-nabg2: #ffe9d2;
  --c-namarca: #ffe2c2;
  --c-naborde: #fbd9b8;
  --c-natx: #c24d00;
  --c-rjbg: #fdecec;
  --c-rjtx: #a12222;
  --c-vebg: #e3f1dc;
  --c-vetx: #2a5f19;
  --c-t2: #52627a;
  --c-t3: #6a778c;
  --c-t4: #8793a6;
  --c-sombra: rgba(8, 32, 58, 0.12);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --pt-fondo: #0a1424;
  --pt-blanco: #111f35;
  --pt-linea: #243750;
  --pt-ink: #e7edf6;
  --pt-texto: #a9b7cb;
  --c-sup: #111f35;
  --c-sup2: #0e1b2f;
  --c-campo: #0c182a;
  --c-cab: #162a45;
  --c-chip: #1b3050;
  --c-hover: #182d49;
  --c-hover2: #23395a;
  --c-lin2: #1b2e48;
  --c-tot: #13273f;
  --c-btot: #28435f;
  --c-bfuerte: #365274;
  --c-bsuave: #27415d;
  --c-azbg: #10304e;
  --c-aztx: #8ec5f5;
  --c-nabg: #35210f;
  --c-nabg2: #44290f;
  --c-namarca: #6b4219;
  --c-naborde: #5c3b1d;
  --c-natx: #ffb67d;
  --c-rjbg: #3a181b;
  --c-rjtx: #ff9fa0;
  --c-vebg: #15301c;
  --c-vetx: #9ad884;
  --c-t2: #b0bdd1;
  --c-t3: #94a4bb;
  --c-t4: #7b8ba2;
  --c-sombra: rgba(0, 0, 0, 0.5);
}

:root[data-tema="oscuro"] .portal-tarjeta { --tinte: #2b1c10; --circulo: #4a2d16; }
:root[data-tema="oscuro"] .portal-tarjeta--naranjo { --acento: #ff8a3d; --tinte: #2b1c10; --circulo: #4a2d16; }
:root[data-tema="oscuro"] .portal-tarjeta--azul { --acento: #6cb4f0; --tinte: #10263d; --circulo: #17426a; }
:root[data-tema="oscuro"] .portal-tarjeta--verde { --acento: #86cc6c; --tinte: #14281a; --circulo: #214a2a; }
:root[data-tema="oscuro"] .portal-tarjeta--pizarra { --acento: #a3b8d6; --tinte: #15233a; --circulo: #243a5a; }
:root[data-tema="oscuro"] .portal-tarjeta--gris { --acento: #b6bccb; --tinte: #1a2030; --circulo: #2c3448; }
:root[data-tema="oscuro"] .portal-tarjeta--turquesa { --acento: #5cc7d0; --tinte: #0f2a2d; --circulo: #17484d; }
:root[data-tema="oscuro"] .portal-tarjeta--indigo { --acento: #93a3ea; --tinte: #181f3e; --circulo: #2a3566; }

:root[data-tema="oscuro"] .portal-superior { box-shadow: 0 1px 0 var(--pt-linea); }
:root[data-tema="oscuro"] .portal-tarjeta:hover,
:root[data-tema="oscuro"] .portal-opcion:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45); }
:root[data-tema="oscuro"] .portal-notif-icono--inventario { color: #a3b8d6; }
:root[data-tema="oscuro"] .portal-volver { background: transparent; color: #ff8a3d; border-color: #ff8a3d; }
:root[data-tema="oscuro"] .portal-volver:hover { background: var(--pt-naranjo-fuerte); color: #fff; }

.portal-tema {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 64px;
  height: 34px;
  padding: 0;
  margin-right: 16px;
  border: 1.5px solid var(--pt-linea);
  border-radius: 999px;
  background: var(--c-chip);
  cursor: pointer;
  flex: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.portal-tema:focus-visible { outline: 2px solid var(--pt-naranjo); outline-offset: 3px; }

.portal-tema-icono {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  stroke: var(--c-t3);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.2s ease;
}

.portal-tema-icono--sol { left: 9px; }
.portal-tema-icono--luna { right: 9px; }

.portal-tema-perilla {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pt-naranjo-fuerte);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s ease;
}

.portal-tema-perilla svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.portal-tema-perilla .portal-tema-luna { display: none; }

:root[data-tema="oscuro"] .portal-tema { background: #0c182a; }
:root[data-tema="oscuro"] .portal-tema-perilla { transform: translateX(30px); background: #f8750d; }
:root[data-tema="oscuro"] .portal-tema-perilla .portal-tema-sol { display: none; }
:root[data-tema="oscuro"] .portal-tema-perilla .portal-tema-luna { display: block; }
:root[data-tema="oscuro"] .portal-tema-icono--luna,
:root:not([data-tema="oscuro"]) .portal-tema-icono--sol { opacity: 0; }

.portal-tema-flotante { position: fixed; top: 16px; right: 16px; z-index: 80; margin: 0; background: var(--pt-blanco); box-shadow: 0 6px 18px rgba(8, 32, 58, 0.18); }

@media (max-width: 640px) {
  .portal-tema { margin-right: 6px; width: 58px; height: 32px; }
  .portal-tema-perilla { width: 22px; height: 22px; }
  :root[data-tema="oscuro"] .portal-tema-perilla { transform: translateX(26px); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-tema, .portal-tema-perilla, .portal-tema-icono { transition: none; }
}

.portal-superior > .portal-tema { margin-left: auto; }
.portal-tema + .portal-campana-caja,
.portal-tema + .portal-usuario { margin-left: 0; }

@media (max-width: 900px) {
  .portal-superior > .portal-tema { margin-left: 0; }
}

@media (max-width: 559px) {
  .portal-superior { gap: 2px; padding: 0 8px 0 2px; }
  .portal-hamburguesa { width: 38px; height: 38px; }
  .portal-hamburguesa svg { width: 24px; height: 24px; }
  .portal-superior-logo { height: 27px; margin-left: 2px; min-width: 0; }
  .portal-tema { width: 50px; height: 28px; margin-right: 0; }
  .portal-tema-icono { width: 13px; height: 13px; margin-top: -6.5px; }
  .portal-tema-icono--sol { left: 7px; }
  .portal-tema-icono--luna { right: 7px; }
  .portal-tema-perilla { width: 20px; height: 20px; top: 2px; left: 2px; }
  .portal-tema-perilla svg { width: 12px; height: 12px; }
  :root[data-tema="oscuro"] .portal-tema-perilla { transform: translateX(22px); }
  .portal-campana { width: 38px; height: 38px; }
  .portal-campana-caja { margin-right: 0; }
  .portal-usuario-boton { padding: 4px 0 4px 2px; gap: 2px; }
  .portal-avatar { width: 34px; height: 34px; font-size: 13px; }
  .portal-usuario-boton svg { width: 16px; height: 16px; }
  .portal-pagina { padding-left: 14px; padding-right: 14px; }
}

.portal-migas { flex-wrap: wrap; row-gap: 4px; }