/*
 * EL SISTEMA DE DISEÑO DEL PLANNER STUDIO (T1, módulo 1.4.1).
 *
 * Qué es: las tipografías alojadas, la paleta y los componentes que repiten
 * las maquetas del diseño «Planner Studio» (docs/superpowers/specs/
 * 2026-09-29-planner-studio/diseno/*.dc.html). Lo usan las pantallas propias
 * del Studio y del portal; el TEMA que viste a todo Perfex vive aparte, en
 * tema.css, y se apoya en las variables de aquí.
 *
 * REGLAS DE ESTE FICHERO, Y POR QUÉ:
 *
 *  1. NI UNA SOLA ETIQUETA SUELTA. Todo va detrás de una clase «ls-» («LOVIA
 *     Studio»). Esta hoja se carga en TODAS las páginas de Perfex (admin y
 *     área de clientes); una regla sobre `h1` o `table` a secas cambiaría
 *     pantallas del núcleo que nadie ha pedido tocar. Lo que sí cambia Perfex
 *     entero es tema.css, y se puede apagar con la opción
 *     `lovia_tema_global` sin apagar esto.
 *
 *  2. NADA DE TERCEROS. Las cuatro familias (Jost, Cormorant Garamond, Bodoni
 *     Moda, Italiana) están en fuentes/, descargadas de Google Fonts tal cual
 *     las sirve Google, con su licencia OFL al lado (R2). Las páginas
 *     públicas comparten origen con el CRM, así que un @import o una url()
 *     hacia fuera sería un tercero leyendo cada visita. El verificador mira
 *     que no haya ninguna.
 *
 *  3. LA PALETA ES LA DE R3, CON SUS NOMBRES: tinta, grafito, cacao, piedra,
 *     filete, fondo suave y blanco. Las demás variables (filete suave, gris
 *     de punto) salen de las maquetas y NO llevan texto encima.
 *
 *  4. CONTRASTE AA EN TODO TEXTO. Medido con la fórmula de WCAG 2.x (el
 *     verificador la EJECUTA sobre estos mismos valores): tinta, grafito y
 *     cacao pasan de 4,5:1 sobre blanco y sobre el fondo suave. PIEDRA NO
 *     (≈3,7:1 sobre blanco): por eso piedra nunca es el `color:` de un texto
 *     en este fichero ni en tema.css, solo filetes y puntos.
 *
 *  5. EL TONO DE LA PLANNER (Brand Kit, T6) SOLO PINTA NUMERALES, FILETES Y
 *     SELECCIONES (R3). Hay dos variables y no una, por el punto 4:
 *       --ls-tono        lo que no lleva texto: filetes, barras, puntos.
 *       --ls-tono-texto  lo que SÍ lleva texto o lleva texto encima:
 *                        numerales «01 —» y el fondo de una pestaña o
 *                        botón elegido con letra blanca.
 *     Si la planner elige Piedra, T6 pone Piedra en --ls-tono y deja
 *     --ls-tono-texto en un tono que pase AA (cacao). Las dos nacen en tinta.
 *
 * Cómo se usa (clases, carcasa, menú): el contrato de T1 en
 * .superpowers/sdd/2026-09-29-planner-studio/t1-contrato.md y el muestrario
 * vivo en /admin/lovia/studio/muestrario (solo administradores).
 */

/* ═══ LAS TIPOGRAFÍAS ═══
 *
 * Una @font-face por familia, estilo y juego de caracteres («latin» y
 * «latin-ext», los dos que necesita el castellano y los nombres propios de
 * los invitados). Las de Google son VARIABLES: un fichero cubre todo el
 * rango de pesos que se declara (p. ej. Jost 300–700), por eso el peso va
 * como intervalo. `font-display: swap`: mientras llega la letra se lee con
 * la del sistema; nunca una página en blanco esperando una tipografía.
 *
 * DE DÓNDE SALEN (29/09/2026): los .woff2, byte a byte como los sirve
 * Google Fonts (la API css2 de fonts.googleapis.com, pedida con un
 * navegador moderno: Jost 300–700, Cormorant Garamond 300–500 redonda y
 * cursiva, Bodoni Moda 400–600 redonda y cursiva, Italiana 400), sin
 * tocarlos ni recortarlos nosotros; las licencias, de github.com/google/
 * fonts (ofl/<familia>/OFL.txt). Las cuatro son SIL Open Font License 1.1:
 * uso comercial libre, se redistribuyen con su licencia al lado. Italiana
 * declara «Italiana» como nombre reservado: por eso no se modifica ni se
 * renombra el fichero de Google; si algún día hubiera que recortarlo, el
 * resultado tendría que llevar otro nombre de familia (OFL, condición 3).
 */
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/bodoni-moda-cursiva-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/bodoni-moda-cursiva-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/bodoni-moda-redonda-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/bodoni-moda-redonda-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("fuentes/cormorant-garamond-cursiva-300-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("fuentes/cormorant-garamond-cursiva-300-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fuentes/cormorant-garamond-redonda-300-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fuentes/cormorant-garamond-redonda-300-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Italiana";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fuentes/italiana-redonda-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fuentes/jost-redonda-300-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fuentes/jost-redonda-300-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ LAS VARIABLES ═══ */
:root {
  /* La paleta de R3, con los valores exactos del diseño. */
  --ls-tinta: #1B1A16;
  --ls-grafito: #2E2D2A;
  --ls-cacao: #49463E;
  --ls-piedra: #8B8479;
  --ls-filete: #E4E1DC;
  --ls-fondo: #F6F5F3;
  --ls-blanco: #FFFFFF;

  /* De las maquetas, SIN texto encima (regla 3 de la cabecera). */
  --ls-filete-suave: #EFEDEA;   /* la raya entre filas de una tabla */
  --ls-punto: #C9C5BE;          /* el punto de «al día», el interruptor apagado */

  /* El tono de la planner (regla 5). Nacen en tinta; el Brand Kit los cambia. */
  --ls-tono: var(--ls-tinta);
  --ls-tono-texto: var(--ls-tinta);

  /* Rojo de peligro para lo irreversible (borrar). No está en el diseño —que
     no enseña ninguna acción destructiva—, pero Perfex sí las tiene, y
     pintarlas de tinta como cualquier otra sería quitarle a la planner la
     última pista antes de borrar. #9B2C2C sobre blanco ≈ 7,4:1 (AA). */
  --ls-peligro: #9B2C2C;

  /* Las letras. La de títulos es una variable porque el Brand Kit deja
     elegir una de tres (Clásica editorial = Cormorant, Couture = Bodoni
     Moda, Minimal = Italiana). */
  --ls-letra-texto: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ls-letra-titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* La escala, sacada de las maquetas (1440 px de ancho). */
  --ls-t-rotulo: 11px;      /* «01 — HOY», cabeceras de tabla */
  --ls-t-pequeno: 13px;
  --ls-t-texto: 15px;
  --ls-t-grande: 16px;
  --ls-t-nombre: 21px;      /* el nombre de una pareja en una lista */
  --ls-t-h3: 28px;
  --ls-t-h2: 32px;
  --ls-t-cifra: 44px;       /* las cifras grandes de un resumen */
  --ls-t-h1: 56px;
  --ls-espaciado-rotulo: 0.28em;

  --ls-radio-tarjeta: 20px;
  --ls-radio-pildora: 999px;
  --ls-radio-campo: 12px;
}

/* ═══ LA SUPERFICIE ═══
 *
 * Cualquier trozo de página que se pinte con este sistema va dentro de
 * .ls-superficie (la carcasa del Studio ya la lleva). Es lo que pone la
 * letra y el color de base SIN tocar el <body> de Perfex.
 */
.ls-superficie,
.ls-studio {
  font-family: var(--ls-letra-texto);
  font-weight: 300;
  font-size: var(--ls-t-texto);
  line-height: 1.5;
  color: var(--ls-tinta);
  -webkit-font-smoothing: antialiased;
}
.ls-superficie *,
.ls-studio * { box-sizing: border-box; }
.ls-superficie a,
.ls-studio a { color: var(--ls-tinta); }
.ls-superficie a:hover,
.ls-studio a:hover { color: var(--ls-cacao); }
.ls-superficie :focus-visible,
.ls-studio :focus-visible {
  outline: 2px solid var(--ls-tinta);
  outline-offset: 3px;
}
.ls-superficie b, .ls-superficie strong,
.ls-studio b, .ls-studio strong { font-weight: 500; }

/* ═══ LA CARCASA DEL STUDIO: MENÚ LATERAL + CONTENIDO (Rail.dc.html) ═══ */
.ls-studio {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: calc(100vh - 57px);   /* 57 px: la barra de arriba de Perfex */
  background: var(--ls-blanco);
}
/* En una página del Studio (body.lovia-studio, lo pone ganchos/studio.php)
   el contenido de Perfex pierde su margen y su gris: la carcasa va de borde
   a borde, blanca, como en el diseño. */
body.lovia-studio #wrapper { background: var(--ls-blanco); }
body.lovia-studio #wrapper > .content.ls-contenido-studio { padding: 0; }

.ls-rail {
  border-right: 1px solid var(--ls-filete);
  background: var(--ls-blanco);
  padding: 36px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ls-rail__marca { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.ls-rail__producto {
  font-size: var(--ls-t-rotulo);
  font-weight: 400;
  letter-spacing: var(--ls-espaciado-rotulo);
  text-transform: uppercase;
}
.ls-rail__estudio {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 4px;
  border-top: 1px solid var(--ls-filete);
  border-bottom: 1px solid var(--ls-filete);
}
.ls-rail__estudio-nombre {
  font-family: var(--ls-letra-titulos);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.15;
}
.ls-rail__persona { font-size: var(--ls-t-pequeno); }
.ls-rail__seccion { display: flex; flex-direction: column; gap: 2px; }
.ls-rail__rotulo {
  margin: 0;
  padding: 0 16px 8px;
  font-family: var(--ls-letra-texto);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-espaciado-rotulo);
  text-transform: uppercase;
  color: var(--ls-tinta);
}
.ls-rail__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ls-rail__enlace {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--ls-radio-pildora);
  color: var(--ls-tinta);
  font-size: var(--ls-t-texto);
  font-weight: 300;
  text-decoration: none;
}
.ls-studio a.ls-rail__enlace:hover { background: var(--ls-fondo); color: var(--ls-tinta); text-decoration: none; }
.ls-rail__punto { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; }
.ls-rail__enlace[aria-current="page"] { background: var(--ls-fondo); font-weight: 400; }
.ls-rail__enlace[aria-current="page"] .ls-rail__punto { background: var(--ls-tono); }
/* «Próximamente»: sin enlace, y dicho con palabras, no solo con un gris. */
.ls-rail__enlace--proximamente { cursor: default; }
.ls-rail__nota {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ls-cacao);
}
.ls-rail__pie {
  margin-top: auto;
  padding: 16px 4px 0;
  border-top: 1px solid var(--ls-filete);
  display: flex; flex-direction: column; gap: 10px;
}
.ls-rail__crm {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ls-filete);
  border-radius: var(--ls-radio-pildora);
  background: var(--ls-blanco);
  color: var(--ls-tinta);
  font-family: var(--ls-letra-texto);
  font-size: var(--ls-t-pequeno);
  font-weight: 400;
  cursor: pointer;
}
.ls-rail__crm:hover { border-color: var(--ls-tinta); }

.ls-principal {
  min-width: 0;
  padding: 44px 56px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* La marca: «LOVIA» en letra de títulos, espaciada como en la portada
   (portada/index.html, .marca .lovia). Texto de verdad, no una imagen: se
   lee, se amplía y no hay que alojar ningún logotipo. */
.ls-marca {
  font-family: "Cormorant Garamond", Georgia, serif;   /* la de LOVIA, no la del Brand Kit */
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.42em;
  line-height: 1;
  color: var(--ls-tinta);
}

/* ═══ TIPOGRAFÍA ═══ */
.ls-numeral,
.ls-rotulo {
  margin: 0;
  font-family: var(--ls-letra-texto);
  font-size: var(--ls-t-rotulo);
  font-weight: 400;
  letter-spacing: var(--ls-espaciado-rotulo);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ls-tinta);
}
/* El numeral «01 — …» lleva el tono de la planner (R3). */
.ls-numeral { color: var(--ls-tono-texto); }

.ls-titulo {
  margin: 0;
  font-family: var(--ls-letra-titulos);
  font-weight: 300;
  font-size: var(--ls-t-h1);
  line-height: 0.98;
  color: var(--ls-tinta);
}
.ls-titulo em,
.ls-subtitulo em,
.ls-cifra em { font-style: italic; }
.ls-titulo--mediano { font-size: 44px; line-height: 1.02; }
.ls-subtitulo {
  margin: 0;
  font-family: var(--ls-letra-titulos);
  font-weight: 400;
  font-size: var(--ls-t-h2);
  line-height: 1.1;
  color: var(--ls-tinta);
}
.ls-subtitulo--pequeno { font-size: var(--ls-t-h3); font-weight: 300; line-height: 1.05; }
.ls-nombre {
  font-family: var(--ls-letra-titulos);
  font-weight: 400;
  font-size: var(--ls-t-nombre);
  line-height: 1.2;
}
.ls-texto { margin: 0; font-size: var(--ls-t-texto); line-height: 1.55; }
.ls-texto--grande { font-size: var(--ls-t-grande); }
.ls-texto--pequeno { font-size: var(--ls-t-pequeno); }
.ls-texto--suave { color: var(--ls-cacao); }
.ls-cifra {
  font-family: var(--ls-letra-titulos);
  font-weight: 300;
  font-size: var(--ls-t-cifra);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

/* ═══ FILETES ═══ */
.ls-filete { border: 0; border-top: 1px solid var(--ls-filete); margin: 0; }
.ls-filete--fuerte { border-top-color: var(--ls-tono); }

/* ═══ LA CABECERA DE UNA PANTALLA (numeral, título y acciones) ═══ */
.ls-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.ls-cabecera__textos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ls-cabecera__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══ REJILLAS ═══ */
.ls-rejilla-lateral {           /* contenido + columna de 312 px (Main, Presupuesto) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 40px;
}
.ls-pila { display: flex; flex-direction: column; gap: 16px; }

/* ═══ BOTONES (píldoras) ═══ */
.ls-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--ls-tinta);
  border-radius: var(--ls-radio-pildora);
  background: transparent;
  color: var(--ls-tinta);
  font-family: var(--ls-letra-texto);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.ls-studio a.ls-boton:hover, .ls-superficie a.ls-boton:hover, .ls-boton:hover { text-decoration: none; }
.ls-boton--primario {
  background: var(--ls-tinta);
  border-color: var(--ls-tinta);
  color: var(--ls-blanco);
  font-weight: 500;
}
.ls-studio a.ls-boton--primario, .ls-superficie a.ls-boton--primario { color: var(--ls-blanco); }
.ls-boton--primario:hover,
.ls-studio a.ls-boton--primario:hover,
.ls-superficie a.ls-boton--primario:hover { background: var(--ls-grafito); border-color: var(--ls-grafito); color: var(--ls-blanco); }
.ls-boton--secundario:hover { background: var(--ls-fondo); }
.ls-boton--suave { border-color: var(--ls-filete); background: var(--ls-blanco); font-weight: 300; }
.ls-boton--suave:hover { border-color: var(--ls-tinta); }
.ls-boton--peligro { border-color: var(--ls-peligro); color: var(--ls-peligro); }
.ls-boton--pequeno { min-height: 40px; padding: 0 18px; font-size: var(--ls-t-pequeno); }
.ls-boton[disabled], .ls-boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.ls-flecha { width: 12px; height: 12px; flex-shrink: 0; }

/* ═══ PESTAÑAS Y FILTROS (píldoras que se eligen) ═══
 *
 * La elegida se marca con el ATRIBUTO que corresponda —aria-pressed="true"
 * en un botón de filtro, aria-selected="true" en una pestaña con role=tab,
 * aria-current="page" en un enlace— y no con una clase: así el estado que
 * ve un lector de pantalla y el que se ve pintado no se pueden separar.
 */
.ls-pestanas { display: flex; gap: 6px; flex-wrap: wrap; }
.ls-pestana {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--ls-filete);
  border-radius: var(--ls-radio-pildora);
  background: var(--ls-blanco);
  color: var(--ls-tinta);
  font-family: var(--ls-letra-texto);
  font-size: var(--ls-t-pequeno);
  font-weight: 300;
  text-decoration: none;
  cursor: pointer;
}
.ls-pestana:hover { border-color: var(--ls-tinta); text-decoration: none; }
.ls-pestana[aria-pressed="true"],
.ls-pestana[aria-selected="true"],
.ls-pestana[aria-current="page"],
.ls-studio a.ls-pestana[aria-current="page"],
.ls-superficie a.ls-pestana[aria-current="page"] {
  background: var(--ls-tono-texto);
  border-color: var(--ls-tono-texto);
  color: var(--ls-blanco);
  font-weight: 400;
}

/* ═══ ETIQUETAS DE ESTADO (riesgo de una boda y similares) ═══
 *
 * La forma dice el estado además del color —punto lleno, anillo, punto
 * gris—, y siempre con la palabra al lado: nunca un estado solo por color.
 */
.ls-estado { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ls-t-pequeno); }
.ls-estado::before { content: ""; flex-shrink: 0; border-radius: 50%; }
.ls-estado--alto { font-weight: 500; }
.ls-estado--alto::before { width: 10px; height: 10px; background: var(--ls-tinta); }
.ls-estado--atencion { font-weight: 400; }
.ls-estado--atencion::before { width: 10px; height: 10px; border: 1px solid var(--ls-tinta); }
.ls-estado--al-dia::before { width: 8px; height: 8px; background: var(--ls-punto); }

/* ═══ RESUMEN EN CIFRAS (la franja de cuatro de Main y Presupuesto) ═══ */
.ls-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ls-tono);
  border-bottom: 1px solid var(--ls-filete);
}
.ls-cifras__celda { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ls-cifras__celda:first-child { padding-left: 0; }
.ls-cifras__celda + .ls-cifras__celda { border-left: 1px solid var(--ls-filete); }
.ls-cifras__texto { font-size: var(--ls-t-pequeno); }

/* ═══ TABLAS ═══ */
.ls-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.ls-tabla th {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--ls-filete);
  text-align: left;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-espaciado-rotulo);
  text-transform: uppercase;
  white-space: nowrap;
}
.ls-tabla td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--ls-filete-suave);
  vertical-align: middle;
}
.ls-tabla .ls-tabla__num { text-align: right; font-variant-numeric: tabular-nums; }
.ls-tabla tr.ls-tabla__total td { font-weight: 500; border-bottom-color: var(--ls-tinta); }
.ls-tabla-envoltorio { overflow-x: auto; }

/* ═══ BARRA DE AVANCE (un filete que se llena) ═══
 * <div class="ls-barra" role="progressbar" aria-valuenow="82" aria-valuemin="0"
 *      aria-valuemax="100"><span style="width: 82%"></span></div>
 */
.ls-barra { height: 1px; background: var(--ls-filete); }
.ls-barra > span { display: block; height: 1px; background: var(--ls-tono); max-width: 100%; }

/* ═══ TARJETAS ═══ */
.ls-tarjeta {
  border: 1px solid var(--ls-filete);
  border-radius: var(--ls-radio-tarjeta);
  background: var(--ls-blanco);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ls-tarjeta--suave { background: var(--ls-fondo); border-color: var(--ls-fondo); }
.ls-tarjeta__imagen { margin: -22px -24px 0; border-radius: var(--ls-radio-tarjeta) var(--ls-radio-tarjeta) 0 0; overflow: hidden; }
.ls-tarjeta__imagen img { display: block; width: 100%; height: 120px; object-fit: cover; }

/* ═══ LISTAS DE RENGLONES (la bitácora, el calendario de pagos) ═══ */
.ls-renglones { list-style: none; margin: 0; padding: 0; }
.ls-renglones > li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ls-filete);
}
.ls-renglones__cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ls-renglones__detalle { font-size: 12px; }

/* ═══ INTERRUPTOR («la pareja lo ve») ═══
 * <button type="button" class="ls-interruptor" aria-pressed="true"
 *         aria-label="Visible para la pareja"><span></span></button>
 */
.ls-interruptor {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 26px;
  padding: 3px;
  border: 1px solid var(--ls-filete);
  border-radius: var(--ls-radio-pildora);
  background: var(--ls-fondo);
  cursor: pointer;
}
.ls-interruptor > span { width: 18px; height: 18px; border-radius: 50%; background: var(--ls-punto); }
.ls-interruptor[aria-pressed="true"] {
  justify-content: flex-end;
  border-color: var(--ls-tono-texto);
  background: var(--ls-tono-texto);
}
.ls-interruptor[aria-pressed="true"] > span { background: var(--ls-blanco); }

/* ═══ CAMPOS DE FORMULARIO ═══ */
.ls-campo {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--ls-filete);
  border-radius: var(--ls-radio-campo);
  background: var(--ls-blanco);
  color: var(--ls-tinta);
  font-family: var(--ls-letra-texto);
  font-size: var(--ls-t-texto);
  font-weight: 300;
}
.ls-campo:focus { border-color: var(--ls-tinta); outline: none; box-shadow: 0 0 0 1px var(--ls-tinta); }
textarea.ls-campo { min-height: 110px; line-height: 1.5; }
.ls-etiqueta-campo {
  display: block;
  margin-bottom: 8px;
  font-size: var(--ls-t-rotulo);
  font-weight: 400;
  letter-spacing: var(--ls-espaciado-rotulo);
  text-transform: uppercase;
}

/* ═══ AVISO / VACÍO ═══ */
.ls-aviso {
  padding: 18px 22px;
  border: 1px solid var(--ls-filete);
  border-radius: var(--ls-radio-tarjeta);
  background: var(--ls-fondo);
  font-size: 14px;
  line-height: 1.55;
}

/* ═══ EL SELLO (Q2): «Planeado con el sistema LOVIA» ═══ */
.ls-sello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ls-t-rotulo);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ls-tinta);
}
.ls-sello .ls-marca { font-size: 14px; letter-spacing: 0.34em; }

/* ═══ SOLO PARA LECTORES DE PANTALLA ═══ */
.ls-oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ═══ PANTALLAS ESTRECHAS ═══
 *
 * Por debajo de 992 px el menú lateral deja de ser una columna: se pone
 * arriba y sus apartados se deslizan en horizontal. Nada se esconde: la
 * planner en el móvil tiene los mismos sitios a los que ir.
 */
@media (max-width: 991px) {
  .ls-studio { grid-template-columns: minmax(0, 1fr); }
  .ls-rail {
    border-right: 0;
    border-bottom: 1px solid var(--ls-filete);
    padding: 20px 16px 14px;
    gap: 14px;
  }
  .ls-rail__estudio { padding: 10px 4px; }
  .ls-rail__lista { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .ls-rail__enlace { white-space: nowrap; border: 1px solid var(--ls-filete); }
  .ls-rail__pie { display: none; }
  .ls-principal { padding: 28px 16px; gap: 24px; }
  .ls-rejilla-lateral { grid-template-columns: minmax(0, 1fr); }
  .ls-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-cifras__celda:nth-child(3) { border-left: 0; padding-left: 0; }
  .ls-titulo { font-size: 42px; }
}
@media (max-width: 480px) {
  .ls-cifras { grid-template-columns: minmax(0, 1fr); }
  .ls-cifras__celda { padding-left: 0; }
  .ls-cifras__celda + .ls-cifras__celda { border-left: 0; border-top: 1px solid var(--ls-filete); }
  .ls-titulo { font-size: 36px; }
}

@media print {
  .ls-rail { display: none; }
  .ls-studio { display: block; }
}