/* MARCA · Made in SALTY! — hecha a mano a partir de su manual de identidad (rojo #E30613, rosa #FF3B80, negro #111) y de su web
   (tono cercano y directo: «Cero humo», «Bienvenidos a lo épico»).
   Se instala en /etc/secretary-saas/clientes/made-in-salty/marca/ (fuera del repositorio, no se pisa al actualizar el código).
   OJO: el alta del instalador REGENERA un marca.css solo con colores; si se vuelve a ejecutar, hay que volver a poner ESTA versión
   (copia en madeinsalty/marca/marca.css del contexto del cliente). */

:root {
  --acento: #E30613; --acento-fuerte: #B0040F; --acento-suave: #FDE8EA;
  --acento-2: #FF3B80; --acento-2-suave: #FFE3EC;
  --sidebar-bg: #E30613; --sidebar-bg-fondo: #B0040F; --lateral: #E30613;
  --foco: rgba(227, 6, 19, .18);
  --fondo: #FFF6F7; --borde: #F1DDE0; --borde-fuerte: #E4C5CA;   /* neutros con un punto rosado, como su web (en el diseño premium los fija él) */
  accent-color: var(--acento);
}
:root[data-tema="oscuro"] {
  --acento: #FF4D58; --acento-fuerte: #FF8087; --acento-suave: #2D1316;
  --acento-2: #FF6299; --acento-2-suave: #331320;
  --sidebar-bg: #5E030A; --sidebar-bg-fondo: #3F0207; --lateral: #A5040F; --foco: rgba(255, 77, 88, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --acento: #FF4D58; --acento-fuerte: #FF8087; --acento-suave: #2D1316;
    --acento-2: #FF6299; --acento-2-suave: #331320;
    --sidebar-bg: #5E030A; --sidebar-bg-fondo: #3F0207; --lateral: #A5040F; --foco: rgba(255, 77, 88, .30);
  }
}

::selection { background: var(--acento-suave); color: var(--acento-fuerte); }

/* ───────── Pantalla de entrada: panel rojo de marca con el logo en blanco y textos propios.
   El panel lateral es decorativo (aria-hidden), así que sustituir su texto por CSS no quita nada a nadie. */
.lateral { background: var(--lateral); }
.lateral .logo { filter: brightness(0) invert(1); width: 58px; height: 58px; }       /* logo rojo -> blanco sobre el panel rojo */
.marca-movil img { background: transparent !important; padding: 0 !important; width: 40px; height: 40px; }   /* móvil: logo rojo sobre fondo claro */
.lateral h2 { font-size: 0; line-height: 0; margin-bottom: 1.2rem; }
.lateral h2::before {
  content: "Bienvenidos a lo épico."; display: block; color: #fff; text-wrap: balance;
  font-size: clamp(2.5rem, 4.8vw, 4rem); line-height: .95; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase;
}
.lateral p { font-size: 0; max-width: none; }          /* el ancho en «ch» del original valdría 0 con fuente 0: el texto va en el ::before */
.lateral p::before {
  content: "Megan se ocupa del papeleo para que vosotros os centréis en crear merch que mola.";
  display: block; max-width: 32ch; font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, .94);
}
.lateral .pie { font-size: 0; }
.lateral .pie::before {
  content: "Made in SALTY! × MG Solutions"; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.nombre-cliente { color: var(--acento); font-weight: 600; }
input[type="text"]:focus-visible, input[type="password"]:focus-visible { box-shadow: 0 0 0 3px var(--foco) !important; }

/* ───────── Panel: títulos de vista en mayúsculas, como el logotipo de la marca. */
:root[data-diseno="premium"] .titulo-vista { text-transform: uppercase; font-weight: 800; letter-spacing: -0.025em; }