/* panel.css — pantallas con sesión: acceso, cuenta, administración y configuración.
   Solo tokens de tokens.css (claro y oscuro salen de ahí). */

.panel {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sem-bg-hundido);
  color: var(--sem-texto-primario);
  font-family: var(--prim-font-family-base);
  font-size: var(--prim-font-size-3);
  line-height: 1.5;
}
.panel *, .panel *::before, .panel *::after { box-sizing: border-box; }
.panel a { color: var(--sem-enlace); }
.panel h1, .panel h2, .panel h3, .titulo, .h2 { font-family: var(--prim-font-family-display); letter-spacing: -0.01em; }

/* --- cabecera --- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--prim-space-4); flex-wrap: wrap;
  padding: var(--prim-space-3) var(--prim-space-6);
  background: var(--sem-cabecera-bg);
  color: var(--sem-cabecera-fg);
  border-bottom: 1px solid var(--sem-cabecera-borde);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.panel .cabecera__marca { display: flex; align-items: center; gap: var(--prim-space-2); font-weight: 700; font-size: var(--prim-font-size-4); color: var(--sem-cabecera-fg); text-decoration: none; }
.cabecera__logo {
  width: 34px; height: 34px; border-radius: var(--sem-radius-chip);
  background: var(--sem-degradado-accion); color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px var(--sem-brillo-fuerte);
}
.cabecera__nav { margin-left: auto; display: flex; align-items: center; gap: var(--prim-space-4); flex-wrap: wrap; font-size: var(--prim-font-size-2); font-weight: 600; }
.panel .cabecera__nav a { color: var(--sem-cabecera-fg-suave); text-decoration: none; transition: color var(--prim-duration-fast); }
.panel .cabecera__nav a:hover { color: #ffffff; text-shadow: 0 0 12px var(--sem-brillo-fuerte); }
.cabecera__quien { color: var(--sem-cabecera-fg-suave); font-weight: 500; }
.cabecera .enlace-boton { color: #ffffff; }
.cabecera__nav form { margin: 0; }
body[data-entorno="desarrollo"] .cabecera { padding-right: 130px; } /* deja lugar a la marca DESARROLLO */

/* --- contenido --- */
.contenido { width: 100%; max-width: 960px; margin: 0 auto; padding: var(--prim-space-6) var(--prim-space-4) var(--prim-space-10); flex: 1; }
.contenido--angosto { max-width: 440px; }
.contenido--centrado { display: flex; flex-direction: column; justify-content: center; }
.pie { text-align: center; padding: var(--prim-space-4); font-size: var(--prim-font-size-1); color: var(--sem-texto-secundario); }
.pie a { color: inherit; }

.migas { font-size: var(--prim-font-size-2); color: var(--sem-texto-secundario); margin: 0 0 var(--prim-space-2); }
.migas a { text-decoration: none; }
.titulo { font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin: 0 0 var(--prim-space-1); line-height: 1.2; }
.titulo__acento { color: var(--sem-acento-texto); }
.subtitulo { color: var(--sem-texto-secundario); margin: 0 0 var(--prim-space-6); font-size: var(--prim-font-size-2); }
.h2 { font-size: var(--prim-font-size-4); font-weight: 700; margin: var(--prim-space-8) 0 var(--prim-space-3); }
.texto-sec { color: var(--sem-texto-secundario); font-size: var(--prim-font-size-2); }
.mono { font-family: var(--prim-font-family-mono); font-size: var(--prim-font-size-2); }

.tarjeta {
  background: var(--sem-bg-superficie);
  border: 1px solid var(--sem-borde-sutil);
  border-radius: var(--prim-radius-3);
  box-shadow: var(--sem-elevation-panel);
  padding: var(--prim-space-6);
  margin-bottom: var(--prim-space-4);
}
.tarjeta > :first-child { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta--acceso { padding: var(--prim-space-8) var(--prim-space-6); }
.tarjeta__titulo { font-size: var(--prim-font-size-4); font-weight: 700; margin: 0 0 var(--prim-space-3); }

/* --- avisos --- */
.aviso { border-radius: var(--sem-radius-control); padding: var(--prim-space-3) var(--prim-space-4); margin: 0 0 var(--prim-space-4); font-size: var(--prim-font-size-2); }
.aviso ul { margin: var(--prim-space-2) 0 0; padding-left: var(--prim-space-5); }
.aviso--ok { background: var(--sem-estado-ok-bg); color: var(--sem-estado-ok-fg); }
.aviso--error { background: var(--sem-estado-error-bg); color: var(--sem-estado-error-fg); }
.aviso--atencion { background: var(--sem-estado-atencion-bg); color: var(--sem-estado-atencion-fg); }

.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--sem-radius-chip); padding: 2px var(--prim-space-3); font-size: var(--prim-font-size-1); font-weight: 600; white-space: nowrap; }
.chip--ok { background: var(--sem-estado-ok-bg); color: var(--sem-estado-ok-fg); }
.chip--error { background: var(--sem-estado-error-bg); color: var(--sem-estado-error-fg); }
.chip--atencion { background: var(--sem-estado-atencion-bg); color: var(--sem-estado-atencion-fg); }
.chip--neutro { background: var(--sem-bg-hundido); color: var(--sem-texto-secundario); border: 1px solid var(--sem-borde-sutil); }

/* --- botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--prim-space-2);
  min-height: 42px; padding: 0 var(--prim-space-5);
  border-radius: var(--prim-radius-full); border: 1px solid var(--sem-borde-sutil);
  background: var(--sem-bg-superficie); color: var(--sem-texto-primario);
  font: inherit; font-size: var(--prim-font-size-2); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: box-shadow var(--prim-duration-base) var(--prim-easing-standard), border-color var(--prim-duration-base), transform var(--prim-duration-fast), filter var(--prim-duration-base);
}
.panel a.btn { color: var(--sem-texto-primario); }
.btn:hover { border-color: var(--sem-accion-primaria); box-shadow: 0 0 0 1px var(--sem-brillo), 0 6px 18px -8px var(--sem-brillo); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .campo__control:focus-visible, .btn-google:focus-visible { outline: none; box-shadow: var(--sem-foco); }
.btn--primario, .panel a.btn--primario {
  background: var(--sem-degradado-accion); color: #ffffff; border-color: transparent;
  box-shadow: 0 8px 22px -8px var(--sem-brillo-fuerte);
}
.btn--primario:hover { border-color: transparent; filter: saturate(1.15); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 10px 30px -6px var(--sem-brillo-fuerte); }
.btn--peligro, .panel a.btn--peligro { color: var(--sem-estado-error-fg); }
.btn--chico { min-height: 34px; padding: 0 var(--prim-space-4); font-size: var(--prim-font-size-1); }
.btn--ancho { width: 100%; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--sem-enlace); cursor: pointer; text-decoration: underline; }
.acciones { display: flex; gap: var(--prim-space-2); flex-wrap: wrap; align-items: center; margin-top: var(--prim-space-4); }
.acciones form { margin: 0; }

/* Botón de Google (pautas de marca: fondo claro, logo "G" a color, texto "Continuar con Google"). */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: var(--prim-space-3);
  width: 100%; min-height: 44px; padding: 0 var(--prim-space-4);
  border: 1px solid #747775; border-radius: var(--prim-radius-full);
  background: #ffffff; color: #1f1f1f; font-family: Roboto, var(--prim-font-family-base);
  font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.panel a.btn-google { color: #1f1f1f; }
.btn-google:hover { background: #f7f8f8; box-shadow: 0 0 0 1px var(--sem-brillo), 0 8px 24px -10px var(--sem-brillo); }
/* variante oscura oficial de Google para tema oscuro */
:root[data-theme="dark"] .btn-google, :root[data-theme="dark"] .panel a.btn-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-google, :root:not([data-theme="light"]) .panel a.btn-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
}
.btn-google svg { width: 20px; height: 20px; flex: none; }

.separador { display: flex; align-items: center; gap: var(--prim-space-3); margin: var(--prim-space-6) 0; color: var(--sem-texto-terciario); font-size: var(--prim-font-size-2); }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--sem-borde-sutil); }

/* --- formularios --- */
.formulario { display: flex; flex-direction: column; gap: var(--prim-space-4); }
.campo { display: flex; flex-direction: column; gap: var(--prim-space-1); }
.campo__etiqueta { font-size: var(--prim-font-size-2); font-weight: 600; }
.campo__obligatorio { color: var(--sem-estado-error-fg); }
.campo__ayuda { font-size: var(--prim-font-size-1); color: var(--sem-texto-secundario); margin: 0; }
.campo__error { font-size: var(--prim-font-size-1); color: var(--sem-estado-error-fg); margin: 0; font-weight: 600; }
.campo__control {
  width: 100%; min-height: var(--cmp-input-min-height);
  padding: var(--prim-space-2) var(--prim-space-3);
  border: 1px solid var(--sem-borde-sutil); border-radius: var(--sem-radius-control);
  background: var(--sem-bg-superficie); color: var(--sem-texto-primario);
  font: inherit; font-size: var(--prim-font-size-3); font-weight: 500;
  transition: border-color var(--prim-duration-base), box-shadow var(--prim-duration-base);
}
.campo__control:hover { border-color: var(--prim-neutral-300); }
.campo__control:focus { border-color: var(--sem-accion-primaria); }
textarea.campo__control { min-height: 96px; resize: vertical; line-height: 1.5; }
textarea.campo__control--alto { min-height: 260px; }
.campo--error .campo__control { border-color: var(--sem-estado-error-fg); }
.campo__contador { font-size: var(--prim-font-size-1); color: var(--sem-texto-terciario); text-align: right; margin: 0; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--prim-space-4); }
.grupo { border: 1px solid var(--sem-borde-sutil); border-radius: var(--sem-radius-control); padding: var(--prim-space-4); margin: 0; }
.grupo > legend { font-weight: 700; font-size: var(--prim-font-size-2); padding: 0 var(--prim-space-2); }
.casilla { display: flex; align-items: center; gap: var(--prim-space-2); font-size: var(--prim-font-size-2); }

/* horario: una fila por día */
.horario { display: grid; grid-template-columns: 110px 1fr 1fr; gap: var(--prim-space-2) var(--prim-space-3); align-items: center; }
.horario__dia { font-weight: 600; font-size: var(--prim-font-size-2); }
.horario__franja { display: flex; align-items: center; gap: var(--prim-space-2); }
.horario__franja .campo__control { min-height: 38px; padding: var(--prim-space-1) var(--prim-space-2); }
.horario__cabecera { font-size: var(--prim-font-size-1); color: var(--sem-texto-secundario); }

/* --- listas --- */
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple > li { display: flex; align-items: center; gap: var(--prim-space-3); flex-wrap: wrap; padding: var(--prim-space-3) 0; border-bottom: 1px solid var(--sem-borde-sutil); }
.lista-simple > li:last-child { border-bottom: 0; }
.lista-simple__principal { flex: 1 1 240px; min-width: 0; }
.lista-simple__titulo { font-weight: 700; text-decoration: none; }
.lista-simple__meta { font-size: var(--prim-font-size-1); color: var(--sem-texto-secundario); }

.secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--prim-space-4); }
.seccion-tarjeta {
  display: flex; flex-direction: column; gap: var(--prim-space-2);
  padding: var(--prim-space-5); border-radius: 20px;
  background: var(--sem-bg-superficie); border: 1px solid var(--sem-borde-sutil);
  box-shadow: var(--sem-elevation-panel);
  text-decoration: none; color: var(--sem-texto-primario);
  transition: transform var(--prim-duration-base) var(--prim-easing-standard), box-shadow var(--prim-duration-base), border-color var(--prim-duration-base);
}
.panel a.seccion-tarjeta { color: var(--sem-texto-primario); }
.seccion-tarjeta:hover { transform: translateY(-2px); border-color: var(--sem-accion-primaria); box-shadow: 0 0 0 1px var(--sem-brillo), 0 16px 36px -14px var(--sem-brillo-fuerte); }
.seccion-tarjeta--error { border-color: var(--sem-estado-error-fg); }
.seccion-tarjeta__titulo { font-weight: 700; display: flex; justify-content: space-between; gap: var(--prim-space-2); align-items: flex-start; }
.seccion-tarjeta__desc { font-size: var(--prim-font-size-2); color: var(--sem-texto-secundario); margin: 0; }
.seccion-tarjeta__meta { font-size: var(--prim-font-size-1); color: var(--sem-texto-terciario); margin-top: auto; }
.seccion-tarjeta__error { font-size: var(--prim-font-size-1); color: var(--sem-estado-error-fg); margin: 0; }

.lote { position: relative; overflow: hidden; padding-left: calc(var(--prim-space-6) + 4px); }
.lote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sem-degradado-accion); box-shadow: 0 0 14px var(--sem-brillo-fuerte); }
.lote--inactivo { opacity: .78; }
.lote--inactivo::before { background: var(--sem-borde-sutil); box-shadow: none; }
.lote__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--prim-space-3); flex-wrap: wrap; }
.lote__titulo { margin: 0; font-size: var(--prim-font-size-3); }
.lote__contenido {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--prim-space-3) 0 0;
  font-size: var(--prim-font-size-2); max-height: 220px; overflow: auto;
  background: var(--sem-bg-hundido); border-radius: var(--sem-radius-control); padding: var(--prim-space-3);
}
.medidor { height: 8px; border-radius: var(--prim-radius-full); background: var(--sem-bg-hundido); border: 1px solid var(--sem-borde-sutil); overflow: hidden; }
.medidor__barra { height: 100%; background: var(--sem-degradado-accion); box-shadow: 0 0 10px var(--sem-brillo-fuerte); border-radius: inherit; }
.medidor--lleno .medidor__barra { background: var(--sem-estado-error-fg); }
.w-0 { width: 0; } .w-10 { width: 10%; } .w-20 { width: 20%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; }
.w-60 { width: 60%; } .w-70 { width: 70%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; }

.detalles > summary { cursor: pointer; font-weight: 600; font-size: var(--prim-font-size-2); }
.previa { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--prim-font-family-mono); font-size: var(--prim-font-size-1); line-height: 1.6; margin: 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--prim-font-size-2); }
.tabla th, .tabla td { text-align: left; padding: var(--prim-space-2); border-bottom: 1px solid var(--sem-borde-sutil); vertical-align: top; }
.tabla th { font-size: var(--prim-font-size-1); color: var(--sem-texto-secundario); font-weight: 600; }
.qr { display: flex; justify-content: center; margin: var(--prim-space-4) 0; }
.qr svg { width: 200px; height: 200px; background: #ffffff; border-radius: var(--prim-radius-2); padding: var(--prim-space-2); }
.qr svg path { fill: #000000; }
.enlace-copiar { display: flex; gap: var(--prim-space-2); }
.enlace-copiar .campo__control { font-family: var(--prim-font-family-mono); font-size: var(--prim-font-size-1); }

/* --- pantallas de acceso: página completa a dos columnas --- */
.acceso { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; min-height: 100vh; }
.acceso__marca {
  background: linear-gradient(155deg, #1a0633 0%, #3f1474 45%, #6b1a8f 100%);
  color: #ece4fb;
  padding: var(--prim-space-10) clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; gap: var(--prim-space-8);
}
.acceso__marca > :not(.acceso__mancha) { position: relative; z-index: 1; }
.acceso__mancha { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); animation: mancha-flotar 14s ease-in-out infinite alternate; }
.acceso__mancha--1 { width: 360px; height: 360px; top: -120px; right: -140px; background: radial-gradient(circle at 35% 35%, #e879f9, #c026d3 45%, transparent 70%); opacity: .55; }
.acceso__mancha--2 { width: 220px; height: 220px; bottom: 8%; left: -90px; background: radial-gradient(circle at 35% 35%, #ffc107, #ff864c 50%, transparent 72%); opacity: .5; animation-delay: -5s; }
.acceso__mancha--3 { width: 150px; height: 150px; top: 38%; right: 8%; background: radial-gradient(circle at 35% 35%, #7df3ff, #1293c8 55%, transparent 74%); opacity: .45; animation-delay: -9s; }
@keyframes mancha-flotar { to { transform: translate(-18px, 22px) scale(1.06); } }
.acceso__destacado { background: var(--sem-degradado-calido); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel .acceso__marca a { color: inherit; }
.acceso__logo { display: inline-flex; align-items: center; gap: var(--prim-space-2); font-weight: 700; font-size: var(--prim-font-size-4); text-decoration: none; }
.acceso__logo .cabecera__logo { background: var(--sem-degradado-accion); color: #ffffff; }
.acceso__mensaje { display: flex; flex-direction: column; gap: var(--prim-space-3); margin-top: auto; }
.acceso__titular { margin: 0; font-family: var(--prim-font-family-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; color: #ffffff; }
.acceso__bajada { margin: 0; color: #d4c4f2; max-width: 44ch; font-weight: 500; }
.acceso__puntos { margin: 0 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--prim-space-2); font-size: var(--prim-font-size-2); font-weight: 600; color: #e2d6f8; }
.acceso__puntos li { display: flex; gap: var(--prim-space-2); }
.acceso__puntos li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--sem-degradado-calido); box-shadow: 0 0 10px rgba(255, 134, 76, .8); }

.demo { background: rgba(255, 255, 255, 0.97); color: #1b0f2e; border-radius: var(--prim-radius-3); padding: var(--prim-space-4); display: flex; flex-direction: column; gap: var(--prim-space-3); max-width: 420px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 40px rgba(217, 70, 239, .45), 0 30px 60px -24px rgba(0, 0, 0, .6); }
.demo__cabecera { display: flex; align-items: center; gap: var(--prim-space-3); padding-bottom: var(--prim-space-3); border-bottom: 1px solid var(--prim-neutral-100); }
.demo__cabecera span:last-child { display: flex; flex-direction: column; line-height: 1.3; font-size: var(--prim-font-size-2); }
.demo__cabecera small { color: #0f7b52; font-size: var(--prim-font-size-1); font-weight: 600; }
.demo__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sem-degradado-calido); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.demo__burbuja { margin: 0; padding: var(--prim-space-2) var(--prim-space-3); border-radius: var(--prim-radius-3); font-size: var(--prim-font-size-2); max-width: 85%; line-height: 1.45; }
.demo__burbuja--cliente { align-self: flex-end; background: var(--sem-degradado-accion); color: #ffffff; border-bottom-right-radius: 6px; }
.demo__burbuja--agente { align-self: flex-start; background: #efe9f8; border-bottom-left-radius: 6px; }
.demo__nota { margin: 0; font-size: var(--prim-font-size-1); color: #7a6e90; }

.acceso__principal { background: var(--sem-bg-superficie); display: flex; flex-direction: column; padding: var(--prim-space-10) var(--prim-space-6) var(--prim-space-4); }
.acceso__contenido { flex: 1; display: flex; align-items: center; justify-content: center; }
.acceso__formulario { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--prim-space-4); }
.acceso__formulario > * { margin: 0; }
.acceso__formulario .titulo { font-size: clamp(26px, 3vw, 32px); }
.acceso__formulario .subtitulo { margin: 0; }
.acceso__formulario .separador { margin: var(--prim-space-2) 0; }
.acceso__formulario .qr { margin: 0; }
.acceso__pie { text-align: center; font-size: var(--prim-font-size-1); color: var(--sem-texto-secundario); padding-top: var(--prim-space-6); }
.panel .acceso__pie a { color: inherit; }
body.acceso[data-entorno="desarrollo"] .acceso__principal { padding-top: var(--prim-space-16); }

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acceso__marca { padding: var(--prim-space-6) var(--prim-space-4); gap: var(--prim-space-3); }
  .acceso__mensaje { margin-top: var(--prim-space-2); }
  .acceso__titular { font-size: 22px; }
  .acceso__bajada, .demo, .acceso__puntos { display: none; }
  .acceso__principal { padding: var(--prim-space-8) var(--prim-space-4) var(--prim-space-4); }
  body.acceso[data-entorno="desarrollo"] .acceso__principal { padding-top: var(--prim-space-8); }
  .acceso__contenido { align-items: flex-start; }
}

@media (max-width: 600px) {
  .cabecera { padding: var(--prim-space-3) var(--prim-space-4); }
  .contenido { padding: var(--prim-space-4) var(--prim-space-4) var(--prim-space-10); }
  .tarjeta { padding: var(--prim-space-4); }
  body[data-entorno="desarrollo"] .cabecera { padding-right: var(--prim-space-4); padding-top: var(--prim-space-8); }
  .horario { grid-template-columns: minmax(0, 1fr); }
  .horario > span:first-child { display: none; }
  .horario__dia { margin-top: var(--prim-space-2); }
  .horario__cabecera { display: none; }
  .horario__franja .campo__control { flex: 1 1 0; min-width: 0; }
}

/* ======================================================================================
   Color en todo: la paleta se nota en campos, contenedores, títulos, listas y avisos,
   sin perder la sobriedad. Solo tokens (claro y oscuro salen de tokens.css).
   ====================================================================================== */

.panel { background: var(--sem-fondo-pagina); background-attachment: fixed; }
.acceso__principal { background: var(--sem-fondo-pagina); }

/* --- títulos --- */
.titulo {
  background: var(--sem-titulo); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 2px;
}
.h2, .tarjeta__titulo { display: flex; align-items: center; gap: var(--prim-space-2); }
.h2::before, .tarjeta__titulo::before {
  content: ""; flex: none; width: 6px; height: 1.05em; border-radius: var(--prim-radius-full);
  background: var(--sem-degradado-accion); box-shadow: 0 0 10px var(--sem-brillo);
}
details > summary.tarjeta__titulo { display: list-item; }
details > summary.tarjeta__titulo::before { display: inline-block; vertical-align: -2px; margin-right: var(--prim-space-2); }
.subtitulo, .texto-sec { color: var(--sem-texto-secundario); }
.migas a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--prim-space-3); border-radius: var(--prim-radius-full);
  background: var(--sem-tinte); color: var(--sem-enlace); font-weight: 700;
}
.panel a:not(.btn):not(.btn-google):not(.seccion-tarjeta):not(.cabecera__marca):not(.lista-simple__titulo) {
  text-decoration-color: rgba(192, 38, 211, 0.45); text-underline-offset: 3px;
}

/* --- contenedores: borde con degradado y un lavado de color en la esquina --- */
.tarjeta, .seccion-tarjeta {
  border: 1px solid transparent;
  background:
    radial-gradient(420px 180px at 100% 0%, var(--sem-tinte-2), transparent 70%) padding-box,
    radial-gradient(360px 160px at 0% 100%, var(--sem-tinte), transparent 70%) padding-box,
    linear-gradient(var(--sem-bg-superficie), var(--sem-bg-superficie)) padding-box,
    var(--sem-borde-color) border-box;
}
.seccion-tarjeta--error {
  background:
    linear-gradient(var(--sem-bg-superficie), var(--sem-bg-superficie)) padding-box,
    linear-gradient(135deg, var(--sem-estado-error-fg), rgba(255, 134, 76, 0.6)) border-box;
}
.seccion-tarjeta__titulo { color: var(--sem-etiqueta); }
.seccion-tarjeta:hover { border-color: transparent; }
.lote {
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, var(--sem-tinte), transparent 40%) padding-box,
    linear-gradient(var(--sem-bg-superficie), var(--sem-bg-superficie)) padding-box,
    var(--sem-borde-color) border-box;
}
.lote__titulo { color: var(--sem-etiqueta); }
.lote__contenido { background: var(--sem-campo-bg); border: 1px solid var(--sem-campo-borde); border-left: 3px solid var(--prim-magenta-500); }
.grupo { border: 1px dashed var(--sem-campo-borde); background: linear-gradient(135deg, var(--sem-tinte), transparent 60%); border-radius: var(--prim-radius-2); }
.grupo > legend { color: var(--sem-etiqueta); background: var(--sem-bg-superficie); border-radius: var(--prim-radius-full); padding: 2px var(--prim-space-3); border: 1px solid var(--sem-campo-borde); }

/* --- campos de texto --- */
.campo__etiqueta { color: var(--sem-etiqueta); font-weight: 700; letter-spacing: 0.01em; }
.campo__obligatorio { color: var(--sem-acento); }
.campo__ayuda { color: var(--sem-texto-secundario); }
.campo__control {
  background: var(--sem-campo-bg);
  border: 1.5px solid var(--sem-campo-borde);
  border-radius: var(--prim-radius-2);
}
.campo__control::placeholder { color: var(--sem-texto-terciario); opacity: 1; }
.campo__control:hover { border-color: var(--prim-violeta-300); }
.campo__control:focus, .campo__control:focus-visible {
  outline: none;
  border-color: transparent;
  background:
    linear-gradient(var(--sem-bg-superficie), var(--sem-bg-superficie)) padding-box,
    var(--sem-borde-color-fuerte) border-box;
  box-shadow: 0 0 0 4px var(--sem-tinte-2), 0 8px 24px -10px var(--sem-brillo-fuerte);
}
.campo--error .campo__control { border-color: var(--sem-estado-error-fg); background-color: var(--sem-estado-error-bg); }
select.campo__control {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--prim-violeta-500) 50%), linear-gradient(135deg, var(--prim-violeta-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
select.campo__control:focus { background-image: linear-gradient(45deg, transparent 50%, var(--prim-magenta-500) 50%), linear-gradient(135deg, var(--prim-magenta-500) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
input[type="time"].campo__control, input[type="date"].campo__control { color-scheme: inherit; }
.campo__contador { color: var(--sem-texto-terciario); font-weight: 600; }
.horario__dia { color: var(--sem-etiqueta); }

/* --- avisos: franja de color a la izquierda --- */
.aviso { border-left: 4px solid currentColor; border-radius: var(--prim-radius-2); font-weight: 600; }
.aviso--ok { background: linear-gradient(90deg, var(--sem-estado-ok-bg), var(--sem-tinte)); }
.aviso--error { background: linear-gradient(90deg, var(--sem-estado-error-bg), var(--sem-tinte-3)); }
.aviso--atencion { background: linear-gradient(90deg, var(--sem-estado-atencion-bg), var(--sem-tinte-3)); }

/* --- chips --- */
.chip { font-weight: 700; letter-spacing: 0.01em; }
.chip--ok { box-shadow: 0 0 0 1px rgba(15, 123, 82, 0.15), 0 0 12px rgba(74, 222, 128, 0.25); }
.chip--error { box-shadow: 0 0 12px rgba(251, 113, 133, 0.3); }
.chip--atencion { background: var(--sem-degradado-calido); color: #3a1700; }
.chip--neutro { background: var(--sem-tinte); border-color: var(--sem-campo-borde); color: var(--sem-etiqueta); }

/* --- listas y tablas --- */
.lista-simple > li { border-bottom: 1px solid var(--sem-campo-borde); border-radius: var(--prim-radius-2); padding-left: var(--prim-space-2); padding-right: var(--prim-space-2); transition: background var(--prim-duration-base); }
.lista-simple > li:hover { background: linear-gradient(90deg, var(--sem-tinte), var(--sem-tinte-2)); }
.lista-simple__titulo, .panel a.lista-simple__titulo { color: var(--sem-etiqueta); }
.tabla th { background: var(--sem-tinte); color: var(--sem-etiqueta); }
.tabla th:first-child { border-top-left-radius: var(--prim-radius-1); }
.tabla th:last-child { border-top-right-radius: var(--prim-radius-1); }
.detalles > summary { color: var(--sem-enlace); }
.previa { color: var(--sem-texto-primario); }
.medidor { background: var(--sem-tinte); border-color: var(--sem-campo-borde); }
.separador::before, .separador::after { border-top: 1px solid transparent; border-image: var(--sem-borde-color) 1; }

/* --- cabecera: línea de luz inferior --- */
.cabecera::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, #7c3aed, #d946ef, #ff864c, transparent);
  opacity: 0.8;
}

/* --- saldo del negocio (ESPEC-SALDO) --- */
.saldo-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.saldo-cifras > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--sem-tinte); }
.saldo-cifras strong { font-size: 1.05rem; color: var(--sem-texto-primario); }
.saldo-medidor { display: block; width: 100%; height: 14px; margin: 6px 0 8px; }
.saldo-grafica { display: block; width: 100%; height: auto; max-height: 180px; }
.saldo-grafica rect { fill: var(--sem-accion-primaria); }
.saldo-grafica rect:hover { fill: var(--sem-estado-error-fg); }
.saldo-grafica line { stroke: var(--sem-borde-sutil); stroke-width: 1; }