/* ═══════════════════════════════════════════════════════════════════════════
   SKY OS — Sistema visual (Sprint P6.0)

   Un solo archivo manda sobre el aspecto de todo el producto. Antes de este
   sprint había 208 estilos escritos a mano dentro de las plantillas: cada
   pantalla decidía su propio color y su propio tamaño, y por eso ninguna se
   parecía a otra. Aquí están las fichas —espacio, tipografía, color, sombra—
   y las piezas que se arman con ellas.

   Reglas que este archivo defiende (docs/REDISENO_APP.md):
     · El color solo aparece cuando significa un estado. El violeta es de la IA.
     · Cinco tamaños de letra con saltos reales: si todo mide igual, nada importa.
     · El aire es del producto, no un sobrante: espacios múltiplos de 8.
     · A 375 px no existe el scroll horizontal.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superficies ── el fondo es gris frío y la tarjeta blanca: la jerarquía
     la hace la sombra, no un borde de color (que es lo que hacía gritar a
     cuatro indicadores a la vez). */
  /* TRES niveles, no dos. El tercero —`surface2`— es la ficha DENTRO de una
     tarjeta: es lo que hace que una pantalla densa se lea por bloques en vez de
     como una lista larga, y es la mitad del aspecto que el CEO trajo de
     referencia (2026-08-16). El fondo va un punto más tintado que antes: si el
     fondo es casi blanco, la tarjeta blanca no flota sobre nada. */
  --bg:        #EDF0F7;
  --surface:   #FFFFFF;
  --surface2:  #F4F6FB;
  --border:    #E4E9F2;
  --text:      #0E1726;
  --text2:     #4C5B72;
  --muted:     #7A8798;


  /* ── El semáforo. Significado, nunca decoración ── */
  --green:     #15803D;  --green-soft:  #E4F5E9;  --green-line:  #BFE6CC;
  --yellow:    #A85B08;  --yellow-soft: #FCF0DC;  --yellow-line: #EFD9AE;
  --red:       #B32B24;  --red-soft:    #FBE9E7;  --red-line:    #F0C3BE;
  /* El rojo, en profundidad: para la tarjeta de respuesta cuando la
     conclusión de la pantalla es una pérdida. Mismo papel que
     `--brand-strong`/`--brand-deep`, y por eso mismo par de tonos. */
  --red-strong: #B32B24;  --red-deep: #7A1A15;
  /* Habla SKY AI, y solo eso */
  --purple:    #6D28D9;  --purple-soft: #EFE8FD;  --purple-line: #D7C7F7;

  /* ── Marca de la empresa (app/utils/marca.py la inyecta por encima) ──
     Estos son los de reserva: si una empresa no configuró color, se usa este. */
  --brand:        #1D4ED8;
  --brand-hover:  #3B76FF;
  --brand-strong: #1D4ED8;
  --brand-deep:   #12327E;
  --brand-soft:   rgba(29, 78, 216, .10);
  --brand-border: rgba(29, 78, 216, .45);
  --blue: var(--brand);            /* compatibilidad con plantillas anteriores */

  /* ── Las dos series de las gráficas ──
     No son semáforo (facturar no es bueno ni gastar es malo) y no son el color de
     la empresa. El naranja va un paso por debajo del de marca porque el de marca
     no llega a 3:1 sobre blanco; la pareja está medida: separación para daltonismo
     ΔE 31 y contraste suficiente en las dos. */
  --serie-entra: #EA580C;
  --serie-sale:  #1D4ED8;

  /* ── Espacio: seis distancias, todas múltiplos de 8 ── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 16px;  --e-4: 24px;  --e-5: 40px;  --e-6: 64px;

  /* ── Radios ──
     La curva es del producto: se sube un escalón entero y se aplica en cascada,
     no pantalla por pantalla. `--r-pill` es para lo que se toca —botones,
     filtros, fichas—: una cápsula se lee como algo que se pulsa antes de leer
     qué dice. */
  --r-s: 12px; --r-m: 16px; --r-l: 20px; --r-xl: 26px; --r-pill: 999px;

  /* ── Altura: cuatro niveles, y solo cuatro ──
     La profundidad viene de la sombra, nunca de un borde: un borde encima de una
     sombra es decir lo mismo dos veces, y se nota como suciedad. Más de cuatro
     niveles es como se pierde la jerarquía — si todo flota un poco distinto,
     nada flota. El 0 es para lo que apenas se despega; el 3, para las ventanas.

     Estos cuatro sustituyen a `--sombra` / `--sombra-m`, que siguen vivos como
     nombres viejos para no romper lo escrito antes. */
  --alto-0: 0 1px 2px rgba(16, 30, 54, .05);
  --alto-1: 0 1px 2px rgba(16, 30, 54, .05), 0 6px 16px -4px rgba(16, 30, 54, .08);
  --alto-2: 0 2px 4px rgba(16, 30, 54, .06), 0 14px 32px -8px rgba(16, 30, 54, .14);
  --alto-3: 0 8px 20px rgba(16, 30, 54, .10), 0 32px 64px -12px rgba(16, 30, 54, .28);
  --sombra:   var(--alto-0);
  --sombra-m: var(--alto-1);

  --sidebar-w: 232px;
  --ancho-max: 1120px;
  --barra-inf: 0px;                /* en móvil pasa a la altura real */

  /* ── Movimiento ──
     La regla: el movimiento existe para dar RESPUESTA (algo pasó porque toqué) o
     para dejar ver un dato mientras aparece (una barra que se llena dice cuánto).
     Nada se mueve por adorno. Quien abre esta pantalla veinte veces al día no
     puede esperar una coreografía cada vez: todo termina antes de 300 ms, salvo
     las barras, que son el dato en sí. */
  --mov-rapido: 130ms;
  --mov:        240ms;
  --mov-dato:   680ms;
  /* El levantamiento de algo que se puede pulsar. Un solo número, para que todo
     lo pulsable de la app responda **con la misma fuerza**: cuando cada pieza
     inventa la suya, la interfaz se siente hecha por cinco personas distintas. */
  --sube: -1.5px;
  --curva:      cubic-bezier(.22, .61, .36, 1);   /* frena al final, como algo con peso */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* La tipografía del sistema trae dos cosas que hay que pedirle:
     · `ss01` da la letra de interfaz —la «a» y la «g» de una sola planta—, que
       es la que se lee de un vistazo en un botón y no en un párrafo;
     · `cv11` desambigua el 1, la I y la l. En una pantalla de dinero, confundir
       un uno con una ele no es un detalle de gusto. */
  font-feature-settings: "ss01", "cv11";
  font-optical-sizing: auto;
}
a { color: inherit; }
svg.ico { display: block; width: 20px; height: 20px; flex: 0 0 auto; }

/* ── El tamaño manda sobre el peso ──────────────────────────────────────────
   Un título grande no necesita ser negro para pesar. Al crecer, la letra se
   aprieta: sin esto, un número de 40 px se lee separado y flotando, y es el
   truco más viejo de la tipografía de interfaz. */
h1, h2, h3, .card-title, .bloque-tit, .agenda-titulo, .resumen-cifra,
.cifra-val, .kpi-value {
  letter-spacing: -.018em;
  text-wrap: balance;
}
.resumen-cifra, .cifra-val, .kpi-value { letter-spacing: -.032em; }
/* Toda cifra, en cifras de ancho fijo: una columna de dinero que baila al
   cambiar un dígito obliga a releer la columna entera. */
.cifra-val, .kpi-value, .resumen-cifra, .num, td.num, th.num,
.fila-der b, .obra-lin-sub { font-variant-numeric: tabular-nums; }

::selection { background: var(--brand-soft); }

/* Aviso de entorno: antes era un elemento del flex del body y se convertía en
   una columna amarilla de media pantalla. Ahora es una franja de verdad. */
.franja-entorno {
  position: sticky; top: 0; z-index: 300; width: 100%;
  background: var(--yellow-soft); color: var(--yellow);
  border-bottom: 1px solid var(--yellow-line);
  text-align: center; padding: 7px 16px; font-size: 13px; font-weight: 600;
}

/* Vista previa de un perfil de cliente (F3.5). Violeta y no amarilla: el amarillo
   ya significa "esto no es producción", y dos avisos del mismo color se leen como
   el mismo aviso. Aquí los datos SÍ son reales — lo que cambia es con qué ojos se
   miran, y eso merece su propio color. */
.franja-vista {
  position: sticky; top: 0; z-index: 310; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap;
  background: #2E1F4D; color: #DCD2F7; border-bottom: 1px solid #4B3A72;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
}
.franja-vista b { color: #fff; }
.franja-vista-nota { font-weight: 400; color: #A99BD0; font-size: 12.5px; }
.franja-vista-salir {
  background: #fff; color: #2E1F4D; text-decoration: none; font-weight: 700;
  padding: 5px 13px; border-radius: 999px; font-size: 12.5px; white-space: nowrap;
}
@media (max-width: 700px) {
  .franja-vista-nota { display: none; }
}

.app { display: flex; min-height: 100vh; }

/* ═══════════════ BARRA LATERAL ═══════════════ */
.sidebar {
  width: var(--sidebar-w); background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
}
.sidebar-logo {
  padding: var(--e-4) var(--e-3) var(--e-3);
  font-size: 17px; font-weight: 750; letter-spacing: -.02em; color: var(--text);
}
.sidebar-logo span { color: var(--brand); }

.sidebar-empresa {
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--e-3) var(--e-3); margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--border);
}
.sidebar-empresa-avatar {
  width: 34px; height: 34px; border-radius: var(--r-s); flex: 0 0 auto;
  background: linear-gradient(150deg, var(--brand-hover), var(--brand-deep));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.sidebar-empresa-txt { min-width: 0; padding-bottom: var(--e-3); }
.sidebar-empresa-nombre {
  display: block; font-size: 14px; font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-empresa-cambiar { font-size: 12px; color: var(--brand); text-decoration: none; font-weight: 550; }
.sidebar-empresa-cambiar:hover { text-decoration: underline; }

.sidebar-nav { flex: 1; padding: 0 var(--e-2) var(--e-2); overflow-y: auto; }
.nav-section {
  padding: var(--e-3) var(--e-2) var(--e-1);
  font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: var(--r-pill);
  color: var(--text2); text-decoration: none; font-size: 14px; font-weight: 550;
  transition: background .15s, color .15s; cursor: pointer; border: none; background: none; width: 100%;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); }
.nav-item .ico { color: currentColor; opacity: .85; width: 18px; height: 18px; }
.nav-item.active .ico { opacity: 1; }
.nav-disabled { opacity: .4; cursor: default; }
.nav-logout { color: var(--red) !important; }
.sidebar-footer { padding: var(--e-2) var(--e-2) var(--e-3); border-top: 1px solid var(--border); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: var(--e-2) 10px; }
.sidebar-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.sidebar-user-nombre { font-size: 13px; font-weight: 600; color: var(--text); }
.sidebar-user-perfil { font-size: 11px; color: var(--muted); }

/* ═══════════════ ESTRUCTURA ═══════════════ */
.main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }

.navbar {
  background: var(--bg); position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-3);
}
.navbar-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.navbar-actions { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }

.content {
  padding: 0 var(--e-4) calc(var(--e-6) + var(--barra-inf));
  flex: 1; width: 100%; max-width: calc(var(--ancho-max) + var(--e-4) * 2);
}
.content > * + * { margin-top: var(--e-5); }

/* ═══════════════ 1. RESPUESTA — la tarjeta de marca ═══════════════
   Abre cada pantalla: el dato que la resume, su contexto en una línea y como
   mucho dos acciones. Es lo único de la pantalla pintado con el color de la
   empresa: si hubiera dos, no habría ninguna. */
.resumen {
  /* El degradado va del tono fuerte al profundo, nunca del claro: sobre el claro
     el texto blanco pierde contraste, y esta tarjeta lleva la cifra principal. */
  background: linear-gradient(150deg, var(--brand-strong) 0%, var(--brand-deep) 100%);
  color: #fff; border-radius: var(--r-xl); padding: var(--e-4);
  box-shadow: 0 10px 24px var(--brand-soft);
}
/* La única tarjeta de respuesta que NO va del color de la empresa. En SKY AI la
   conclusión no la saca la empresa: la dice la IA, y el violeta significa
   exactamente eso en todo el sistema (R-UI-4). Si esta tarjeta fuera azul, sería
   la primera vez que el producto habla como si el dato viniera de sus libros
   cuando en realidad viene de un asistente. */
.resumen.ia {
  background: linear-gradient(150deg, #6D28D9 0%, #4A1D96 100%);
  box-shadow: 0 10px 24px rgba(109,40,217,.22);
}

/* La respuesta cuando el negocio va en pérdida. Es la ÚNICA otra excepción al
   color de la empresa, y por el mismo motivo que el violeta de SKY AI: aquí el
   color no adorna, dice algo que la cifra sola no alcanza a decir de un vistazo.
   Una utilidad negativa sobre el naranja de la marca se leía como un logro. */
.resumen.perdida {
  background: linear-gradient(150deg, var(--red-strong) 0%, var(--red-deep) 100%);
  box-shadow: 0 10px 24px rgba(179,43,36,.22);
}

/* El eje con el cero a la vista. Sustituye a la barra de avance cuando hay
   pérdida: aquella se topa en cero y salía vacía, que es justo lo contrario de
   lo que pasa. El cero va en el centro y el tramo crece hacia la izquierda. */
.resumen-eje { margin-top: var(--e-2); }
.resumen-eje-riel {
  position: relative; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.24);
}
/* La marca del cero: se sale del riel por arriba y por abajo para que se lea como
   un eje y no como un trozo más de la barra. */
.resumen-eje-riel::after {
  content: ""; position: absolute; left: 50%; top: -4px;
  width: 2px; height: 14px; margin-left: -1px;
  background: rgba(255,255,255,.9); border-radius: 1px;
}
.resumen-eje-riel i {
  position: absolute; right: 50%; top: 0; height: 100%;
  background: #fff; border-radius: 3px 0 0 3px;
}
/* Tres columnas iguales y no un `space-between`: con el reparto del flex el «0»
   caía donde lo dejara el ancho de las palabras, y tiene que caer sobre la marca
   del cero. Con la rejilla, el centro es el centro. */
.resumen-eje-rot {
  display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 7px;
  font-size: 11px; color: rgba(255,255,255,.72);
}
.resumen-eje-rot span:nth-child(2) { text-align: center; }
.resumen-eje-rot span:nth-child(3) { text-align: right; }
.resumen-rot { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 600; }
.resumen-tit { font-size: 15px; color: rgba(255,255,255,.9); margin-top: var(--e-2); }
.resumen-cifra { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: 2px; font-variant-numeric: tabular-nums; }
.resumen-pie { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.85); margin-top: var(--e-3); }
.resumen-barra { height: 6px; border-radius: 3px; background: rgba(255,255,255,.24); margin-top: var(--e-2); overflow: hidden; }
.resumen-barra i { display: block; height: 100%; background: #fff; border-radius: 3px; }
.resumen .btn { margin-top: var(--e-3); }
/* Una fila de botones. Dentro de la tarjeta de respuesta van invertidos —blancos
   sobre el color—, y por eso esas dos reglas están ANCLADAS a `.resumen`: sueltas,
   pintaban de blanco los botones de cualquier fila que reusara la clase, y sobre
   fondo blanco eso es un botón invisible. Pasó de verdad, en SKY AI. */
.acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }
.resumen .acciones .btn-primary { background: #fff; color: var(--brand-deep); }
.resumen .acciones .btn-ghost { background: rgba(255,255,255,.16); color: #fff; }

/* ═══════════════ 2. CIFRA — el dato secundario ═══════════════ */
.cifras, .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); }
.cifra, .kpi-card {
  background: var(--surface); border-radius: var(--r-xl); padding: var(--e-4);
  box-shadow: var(--alto-1); border: none;
}
.cifra-rot, .kpi-label { font-size: 12px; color: var(--muted); font-weight: 550; letter-spacing: 0; text-transform: none; }
.cifra-val, .kpi-value {
  font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: var(--e-1);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.cifra-sub, .kpi-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* Los antiguos modificadores de color de los indicadores quedan neutralizados a
   propósito: una cifra se pinta por su estado, no por su categoría (R-UI-4). */
.kpi-card.green, .kpi-card.red, .kpi-card.yellow, .kpi-card.blue, .kpi-card.purple { border: none; }

/* ═══════════════ 3. BLOQUE — tarjeta de sección ═══════════════ */
/* Avisos de una sola vez (resultado de una acción). Viven en base.html: sin ellos
   un `flash` se pierde en silencio y el usuario no sabe si lo que pidió ocurrió. */
/* ── El canto de estado ───────────────────────────────────────────────────
   Una franja de color en el borde izquierdo de una tarjeta. Con `border-left`
   la franja **corta la esquina en seco**: se ve un pico de color justo donde la
   tarjeta ya está curvando, y con los radios nuevos eso se nota en toda la app.
   Una sombra `inset` sigue el radio y queda como un canto pintado. El color va
   en `--franja` para que el estado cambie una ficha, no la regla entera. */
.aviso-flash { --franja: var(--green);
               box-shadow: inset 3px 0 0 var(--franja), var(--alto-1);
               margin-bottom: var(--e-4); }
.aviso-flash.es-error { --franja: var(--red); }
.aviso-flash p { line-height: 1.6; }

/* Estado de una integración (Gmail, QuickBooks…). El color es significado —verde
   conectado, rojo error, ámbar falta configurar—, nunca decoración. */
.estado-int { max-width: 640px; --franja: var(--muted);
              box-shadow: inset 3px 0 0 var(--franja), var(--alto-1); }
.estado-int.es-conectado { --franja: var(--green); }
.estado-int.es-error     { --franja: var(--red); }
.estado-int.es-pendiente { --franja: var(--yellow); }
.estado-int h2 { font-size: 18px; margin-bottom: var(--e-2); }
.estado-int .mensaje { line-height: 1.6; margin-bottom: var(--e-2); }
.estado-int .detalle { color: var(--muted); font-size: 13px; line-height: 1.6; }
.estado-int .acciones { margin-top: var(--e-4); display: flex; gap: var(--e-2); flex-wrap: wrap; }

.card, .bloque { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--alto-1); padding: var(--e-4); }
.card-header, .bloque-cab {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  margin-bottom: var(--e-3); flex-wrap: wrap;
}
.card-title, .bloque-tit { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.bloque-link { font-size: 13.5px; font-weight: 600; color: var(--brand); text-decoration: none; }
.bloque-link:hover { text-decoration: underline; }
/* Un bloque sin relleno cuando lo que lleva dentro es una lista o una tabla,
   que traen su propio respiro. */
.bloque-liso { padding: 0; overflow: hidden; }
.bloque-liso .bloque-cab { padding: var(--e-4) var(--e-4) 0; margin-bottom: var(--e-2); }

.seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-3); }
.seccion-tit { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
/* La aclaración de una cabecera: contra qué se compara, de qué periodo se habla.
   En gris y pequeña porque acompaña al título, no compite con él. */
.seccion-sub { font-size: 12.5px; color: var(--muted); }
.bloque-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 var(--e-3); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.grid-main { display: grid; grid-template-columns: 3fr 2fr; gap: var(--e-3); }
.grid-2 > *, .grid-main > *, .kpi-grid > *, .cifras > * { min-width: 0; }
@media (max-width: 1000px) { .grid-main { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .grid-2 { grid-template-columns: 1fr; } }

/* ═══════════════ 4. ACCESOS RÁPIDOS ═══════════════
   Nada a más de un toque: ordenar no es esconder (§5.7 del rediseño). */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--e-2); }
.acceso {
  background: var(--surface); border-radius: var(--r-m); box-shadow: var(--sombra);
  padding: var(--e-3) var(--e-2); text-align: center; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  color: var(--text2); transition: transform .15s, box-shadow .15s;
}
.acceso:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); }
.acceso .ico { width: 22px; height: 22px; color: var(--brand); }
.acceso span { font-size: 12.5px; font-weight: 600; }

/* ── Áreas (Sprint O-1) ───────────────────────────────────────────────────
   La rejilla que abre el Inicio. Sustituye a los accesos rápidos y a la lista
   plana de alertas: en vez de "aquí tienes ocho avisos, interprétalos", cada
   tarjeta responde una pregunta del dueño y dice qué le falta a esa parte.
   El color del semáforo va en una franja a la izquierda, no en el fondo: un
   fondo rojo entero grita igual con un problema que con cinco. */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
         gap: var(--e-3);
         /* `start` y no el `stretch` de la rejilla: con tres asuntos o con cinco,
            una tarjeta mide lo que tiene. Igualar la fila es lo que dejaba 700 px
            de blanco debajo del área tranquila. */
         align-items: start; }
.area { background: var(--surface); border-radius: var(--r-xl); --franja: var(--border);
        box-shadow: inset 3px 0 0 var(--franja), var(--alto-1); padding: var(--e-4);
        display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.area.atencion { --franja: var(--yellow); }
.area.critico  { --franja: var(--red); }
.area-cab { display: flex; align-items: center; gap: var(--e-3); }
.area-icono { width: 34px; height: 34px; border-radius: var(--r-s, 8px); flex: none;
              display: grid; place-items: center;
              background: var(--green-soft); color: var(--green); }
.area.atencion .area-icono { background: var(--yellow-soft); color: var(--yellow); }
.area.critico  .area-icono { background: var(--red-soft);    color: var(--red); }
.area-tit { min-width: 0; }
.area-tit b { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; }
.area-tit span { font-size: 12.5px; color: var(--muted); }
.area-senales { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: var(--e-2); }
.area-senales li { display: flex; align-items: baseline; gap: var(--e-2);
                   flex-wrap: wrap; font-size: 13px; line-height: 1.45;
                   padding-top: var(--e-2); border-top: 1px solid var(--border); }
.area-senales li:first-child { border-top: none; padding-top: 0; }
.area-senales b { font-weight: 600; }
.area-senales .detalle { color: var(--muted); flex-basis: 100%; font-size: 12.5px; }
.area-senales .monto { margin-left: auto; font-weight: 650; white-space: nowrap; }
.area-ok { font-size: 13px; color: var(--muted); margin: 0; }
.area-ir { margin-top: auto; font-size: 13px; font-weight: 600;
           color: var(--brand); text-decoration: none; }
.area-ir:hover { text-decoration: underline; }

/* ═══════════════ 5. LISTA — asuntos con su acción ═══════════════ */
.lista { display: flex; flex-direction: column; }
.fila { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--border); }
.fila:first-child { border-top: none; }
.fila-icono {
  width: 36px; height: 36px; border-radius: var(--r-s); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--text2);
}
.fila-icono.ok { background: var(--green-soft); color: var(--green); }
.fila-icono.atencion { background: var(--yellow-soft); color: var(--yellow); }
.fila-icono.critico { background: var(--red-soft); color: var(--red); }
.fila-icono.ia { background: var(--purple-soft); color: var(--purple); }
.fila-txt { flex: 1; min-width: 0; }
.fila-txt b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fila-txt span { font-size: 13px; color: var(--muted); }
.fila-der { flex: 0 0 auto; text-align: right; display: flex; align-items: center; gap: var(--e-2); }
.fila-der b { display: block; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fila-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; padding: 0 var(--e-4) var(--e-3); }
.fila-acciones:last-child { padding-bottom: var(--e-4); }

/* El **chip de cambio** de la referencia —«12.5 % más que el mes pasado»— no está
   aquí, y es a propósito: SKY OS no calcula hoy ninguna comparación contra el
   periodo anterior. Escribir su estilo antes que su número solo adelanta el día
   en que alguien lo rellena con algo aproximado, y una cifra inventada en una
   pantalla de dinero es exactamente lo que este producto no hace. Cuando exista
   la comparación, el chip se escribe en diez líneas.

   ═══════════════ LA FICHA DE AGREGAR ═══════════════
   Un hueco punteado del tamaño de lo que va a caber ahí. Invita sin gritar, y
   —a diferencia de un botón— enseña dónde va a aparecer lo que se agregue. */
.ficha-agregar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-1); min-height: 84px; width: 100%;
  border: 1.5px dashed var(--border); border-radius: var(--r-l);
  background: none; color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 550; cursor: pointer; padding: var(--e-3);
  transition: border-color .16s var(--curva), color .16s var(--curva),
              background .16s var(--curva);
}
.ficha-agregar:hover { border-color: var(--brand); color: var(--brand);
                       background: var(--brand-soft); }
.ficha-agregar .signo { font-size: 20px; line-height: 1; }
/* En una columna de calendario no caben 84 px de hueco: ahí la ficha es una
   línea. Misma pieza, misma señal, el alto de lo que le rodea. */
.ficha-agregar.chica { min-height: 34px; padding: var(--e-1); border-radius: var(--r-m); }
.ficha-agregar.chica .signo { font-size: 16px; }

/* Una obra con su consumo: dos líneas y la barra */
.fila-obra { display: block; }
.obra-lin { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.obra-lin b { font-size: 15px; font-weight: 600; }
.obra-lin-sub { margin-top: var(--e-1); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Celdas de tabla con énfasis o con menos peso, sin escribir estilos a mano */
td.fuerte { font-weight: 650; }
td.suave  { color: var(--muted); }

/* Un número que sí cambia de color porque su ESTADO lo justifica. Nunca por su
   categoría: eso es lo que había convertido el color en ruido. */
.txt-ok { color: var(--green); }
.txt-atencion { color: var(--yellow); }
.txt-critico { color: var(--red); }

/* Un <label> que hace de botón para escoger archivo */
.btn-archivo { cursor: pointer; }

/* Barra de consumo (presupuesto de una obra) */
.riel { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; margin-top: var(--e-2); }
.riel i { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.riel i.atencion { background: #D9A03C; }
.riel i.critico  { background: #D14B42; }
/* Reparto: cuánto pesa una parte del total. No hay nada que juzgar, así que no
   entra el semáforo — va del color de la empresa (macro `ui.reparto`). */
.riel i.reparto  { background: var(--brand); }

/* ═══════════════ ESTADOS — pastillas ═══════════════ */
.pastilla, .badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
  background: var(--surface2); color: var(--text2);
}
.pastilla.ok, .badge-green   { background: var(--green-soft);  color: var(--green); }
.pastilla.atencion, .badge-yellow { background: var(--yellow-soft); color: var(--yellow); }
.pastilla.critico, .badge-red { background: var(--red-soft);   color: var(--red); }
.pastilla.ia, .badge-purple  { background: var(--purple-soft); color: var(--purple); }
.badge-blue { background: var(--brand-soft); color: var(--brand); }

/* ═══════════════ SKY AI — el violeta, y solo aquí ═══════════════ */
.ia-tarjeta {
  background: var(--surface); border-radius: var(--r-l); --franja: var(--purple);
  box-shadow: inset 3px 0 0 var(--franja), var(--alto-1);
  padding: var(--e-3) var(--e-4);
}
.ia-firma { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); }
/* El nombre no se parte: en un teléfono estrecho quedaba «SKY» arriba y «AI» debajo. */
.ia-firma b { font-size: 12.5px; font-weight: 750; color: var(--purple); letter-spacing: .02em; white-space: nowrap; }
.ia-firma span { font-size: 12.5px; color: var(--muted); }
.ia-firma .ico { width: 16px; height: 16px; color: var(--purple); }
.ia-tarjeta p { font-size: 14.5px; color: var(--text2); line-height: 1.5; }

/* La auditoría: una pregunta a la vez, con la evidencia en la que se apoya.
   Antes esto eran 28 estilos escritos a mano, y la evidencia se dibujaba desde
   JavaScript con `style.cssText`. */
.pregunta-num {
  font-size: 12px; font-weight: 700; color: var(--purple);
  letter-spacing: .04em; text-transform: uppercase;
}
.pregunta-txt { font-size: 16px; line-height: 1.55; color: var(--text); margin-top: var(--e-2); }
.zona-parcial { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-top: var(--e-3); }
.zona-parcial .search-input { max-width: 240px; }
.zona-parcial.oculto { display: none; }

.evidencia { margin-top: var(--e-4); padding: var(--e-3); background: var(--surface2); border-radius: var(--r-l); }
.evidencia-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--e-3); margin-top: var(--e-2);
}
.evidencia-rot { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.evidencia-val { font-weight: 650; font-size: 13.5px; color: var(--text); }

/* ═══════════════ TABLAS ═══════════════ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; padding: var(--e-2) var(--e-3); color: var(--muted);
  border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600; white-space: nowrap;
}
tbody td { padding: 12px var(--e-3); border-bottom: 1px solid var(--border); }
tbody tr:hover td { background: var(--surface2); }
tbody tr:last-child td { border-bottom: none; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ═══════════════ BOTONES ═══════════════ */
/* En cápsula, todos. Una cápsula se lee como algo que se pulsa **antes** de leer
   qué dice: la forma hace de señal, y eso ahorra una lectura en cada pantalla. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  border: none; padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer;
  font-size: 14px; font-weight: 600; text-decoration: none; font-family: inherit;
  transition: filter .15s, background .15s, box-shadow .15s; min-height: 40px;
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, .nav-item:focus-visible, .acceso:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
/* El principal lleva una luz muy suave arriba. No es adorno: le da cuerpo, y un
   botón con cuerpo se distingue del texto que lo rodea sin tener que ser más
   grande ni más gritón. El color sigue siendo exactamente el de la empresa —la
   luz es blanco a un 14 %, no otro tono. */
.btn-primary {
  background-color: var(--brand); color: #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  box-shadow: 0 2px 8px var(--brand-soft);
}
.btn-ghost   { background: var(--surface); color: var(--text); box-shadow: var(--alto-0); }
/* Un botón apagado tiene que decir POR QUÉ, y eso se escribe en su `title` en la
   plantilla. Aquí solo se garantiza que se note apagado y que el cursor lo diga
   antes de que la persona lo intente. */
.btn:disabled { cursor: not-allowed; }
.btn-danger  { background: var(--red-soft); color: var(--red); }
.btn-success { background: var(--green-soft); color: var(--green); }
.btn-texto   { background: none; color: var(--brand); padding: 6px 4px; min-height: 0; }
.btn-sm { padding: 7px 14px; font-size: 13px; min-height: 34px; }
.upload-btn { background: var(--brand); color: #fff; cursor: pointer; }

/* ═══════════════ FORMULARIOS ═══════════════ */
.search-input, input[type="text"], input[type="number"], input[type="date"],
input[type="password"], select, textarea {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 9px 14px; border-radius: var(--r-m); font-size: 14px; outline: none;
  font-family: inherit; min-height: 40px;
}
.search-input { width: 240px; max-width: 100%; }
.search-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ═══════════════ ESTADO VACÍO — nunca un vacío mudo ═══════════════ */
.empty, .vacio {
  text-align: center; padding: var(--e-5) var(--e-4); color: var(--muted); font-size: 14.5px;
}
.vacio b { display: block; color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: var(--e-1); }
.vacio .btn { margin-top: var(--e-3); }

/* ═══════════════ ALERTAS (compatibilidad con pantallas aún sin rediseñar) ═══════════════ */
.alert { background: var(--red-soft); border: 1px solid var(--red-line); border-radius: var(--r-m); padding: var(--e-3) var(--e-4); }
.alert-title { font-weight: 700; color: var(--red); margin-bottom: var(--e-2); font-size: 14.5px; }
.alert-item  { color: var(--text2); padding: 3px 0; font-size: 14px; }
.alerta-row {
  padding: var(--e-3); border-radius: var(--r-m); margin-bottom: var(--e-2);
  background: var(--surface2); --franja: var(--border);
  box-shadow: inset 3px 0 0 var(--franja);
}
.alerta-row.critica { --franja: var(--red); }
.alerta-row.alta    { --franja: #D97706; }
.alerta-row.media   { --franja: var(--yellow); }
.alerta-row:last-child { margin-bottom: 0; }
.alerta-titulo { font-size: 14.5px; font-weight: 600; color: var(--text); }
.alerta-detalle { font-size: 13px; color: var(--muted); margin-top: 2px; }

.stat-rows { display: flex; flex-direction: column; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.stat-row:last-child { border-bottom: none; }
.stat-row span { color: var(--muted); }
.stat-row strong { font-weight: 650; font-variant-numeric: tabular-nums; }

.proyecto-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.proyecto-row:last-child { border-bottom: none; }
.proyecto-nombre { flex: 1; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proyecto-monto { font-weight: 650; font-variant-numeric: tabular-nums; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok  { background: var(--green); }
.status-dot.off { background: var(--muted); }
.td-trunc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════ TOAST ═══════════════ */
.toast {
  position: fixed; bottom: calc(var(--e-4) + var(--barra-inf)); right: var(--e-4);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: var(--e-3) var(--e-4); border-radius: var(--r-m);
  font-size: 14px; display: none; z-index: 999; max-width: 340px;
  box-shadow: inset 3px 0 0 var(--franja, var(--green)), var(--alto-2);
}

canvas { max-height: 260px; }

/* ═══════════════ ACCESO (login y selección de empresa) ═══════════════ */
.auth-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(160deg, var(--brand-strong) 0%, var(--brand-deep) 100%);
  padding: var(--e-4);
}
.auth-card {
  background: var(--surface); border-radius: var(--r-xl); padding: var(--e-5);
  width: 100%; max-width: 400px; box-shadow: 0 24px 64px rgba(8, 20, 42, .28);
}
.auth-card-wide { max-width: 460px; }
.auth-logo { font-size: 26px; font-weight: 750; letter-spacing: -.03em; color: var(--text); }
.auth-logo span { color: var(--brand); }
.auth-subtitle { color: var(--muted); font-size: 14px; margin: var(--e-1) 0 var(--e-4); }
.auth-form { display: flex; flex-direction: column; }
.auth-label { font-size: 12px; color: var(--text2); font-weight: 600; margin: 0 0 var(--e-2); }
.auth-input {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 11px 14px; border-radius: var(--r-s); font-size: 15px; outline: none;
  margin-bottom: var(--e-3); min-height: 44px;
}
.auth-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-submit { justify-content: center; padding: 13px; font-size: 15px; margin-top: var(--e-1); }
.auth-error { background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red); border-radius: var(--r-s); padding: 10px 14px; font-size: 14px; margin-bottom: var(--e-3); }
.auth-footer { color: var(--muted); font-size: 12px; text-align: center; margin-top: var(--e-4); }
.auth-link { display: block; text-align: center; color: var(--muted); font-size: 13px; margin-top: var(--e-4); text-decoration: none; }
.auth-link:hover { color: var(--text); }

.empresa-list { display: flex; flex-direction: column; gap: var(--e-2); }
.empresa-btn {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: var(--e-3); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s;
  font-family: inherit;
}
.empresa-btn:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--sombra-m); }
.empresa-avatar {
  width: 42px; height: 42px; border-radius: var(--r-s); flex-shrink: 0;
  background: linear-gradient(150deg, var(--brand-hover), var(--brand-deep)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.empresa-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.empresa-nombre { color: var(--text); font-size: 15px; font-weight: 650; }
.empresa-tipo { color: var(--muted); font-size: 12.5px; }
.empresa-arrow { color: var(--muted); }
/* Las acciones del administrador de la plataforma, debajo de su lista de empresas.
   En el teléfono se apilan: dos botones de 50 % en 375 px dejan textos partidos. */
.empresa-acciones {
  display: flex; gap: var(--e-2); margin-top: var(--e-4); flex-wrap: wrap;
}
.empresa-acciones .btn { flex: 1; justify-content: center; min-width: 180px; }

/* ═══════════════ NAVEGACIÓN INFERIOR (teléfono) ═══════════════
   La corrección de H-1: la lateral de 220 px se quedaba con el 59 % de la
   pantalla del teléfono, que es donde el dueño mira el negocio de verdad. */
.barra-inferior { display: none; }

@media (max-width: 900px) {
  :root { --barra-inf: 62px; }

  /* ── El dedo, medido ───────────────────────────────────────────────────
     A 375 px había 28 cosas por debajo de los 44 px que necesita un dedo:
     los botones pequeños salían a 34 y los enlaces "Ver todas →" a 20 — la
     mitad. En una obra, con guantes o con el teléfono en una mano, eso es
     fallar el toque o abrir el de al lado. No cambia el tamaño del texto:
     crece la zona que responde. */
  .btn-sm, .btn { min-height: 44px; }
  /* Campos y desplegables: 40 px se quedan a cuatro del mínimo, y son los que
     se usan para filtrar y para elegir obra desde la calle. */
  .search-input, .select-obra, input, select, textarea { min-height: 44px; }
  /* …menos las casillas, que no son campos de escribir. Con `min-height` a secas
     salía una casilla de **13 px de ancho por 44 de alto**: un rectángulo
     estirado que además es más difícil de acertar que el original. Se le da
     tamaño propio, cuadrado, y el dedo acierta. */
  input[type="checkbox"], input[type="radio"] {
    min-height: 0; width: 22px; height: 22px;
  }
  /* El botón «i» —el que abre la explicación de un bloque— medía 18×18. Es
     justo el que se toca desde la calle, cuando no se entiende una cifra.
     El círculo se queda del mismo tamaño (a 44 px sería una pelota en medio de
     un título): lo que crece es la zona que responde, con un pseudo-elemento
     invisible centrado encima. */
  .info > summary { position: relative; }
  .info > summary::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* En las tablas apiladas cada fila es una tarjeta, y su número de recibo es
     el enlace que abre el PDF: con 20 px de alto no se acierta. */
  table.apilable a { display: inline-flex; align-items: center; min-height: 44px; }
  .bloque-link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 14px;
  }

  .sidebar { display: none; }
  .main { margin-left: 0; }
  /* En el teléfono el título manda y las acciones van debajo, no a su lado:
     apretadas contra el título se montaban una encima de otra. */
  /* En el teléfono el encabezado no se queda pegado: son 200 px de pantalla que
     el dueño necesita para el negocio, no para dos botones. */
  .navbar { position: static; padding: var(--e-3) var(--e-3) var(--e-2); flex-direction: column; align-items: stretch; gap: var(--e-2); }
  .navbar-title { font-size: 22px; }
  .navbar-actions .btn { flex: 1; }
  .content { padding: 0 var(--e-3) calc(var(--e-5) + var(--barra-inf)); }
  .content > * + * { margin-top: var(--e-4); }

  .barra-inferior {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bi-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 7px; text-decoration: none; color: var(--muted);
    font-size: 10.5px; font-weight: 600; min-height: 44px;
  }
  .bi-item .ico { width: 21px; height: 21px; }
  .bi-item.active { color: var(--brand); }

  .resumen { padding: var(--e-3); border-radius: var(--r-l); }
  .resumen-cifra { font-size: 34px; }
  .cifras, .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--e-2); }
  .card, .bloque { padding: var(--e-3); }

  /* Una fila en el teléfono: el monto y el estado se apilan a la derecha en
     lugar de robarle la mitad del ancho al título, que si no se parte palabra
     por palabra y cada aviso ocupa media pantalla. */
  .fila { padding: 12px var(--e-3); gap: 10px; }
  .fila-icono { width: 32px; height: 32px; border-radius: 9px; }
  .fila-icono .ico { width: 17px; height: 17px; }
  .fila-txt b { font-size: 14.5px; }
  .fila-txt span { font-size: 12.5px; }
  .fila-der { flex-direction: column; align-items: flex-end; gap: 3px; }
  .fila-der b { font-size: 14px; }
  .fila-acciones { padding: 0 var(--e-3) 12px; margin-left: 42px; }
  /* 44 y no 34: es el botón de "Ver la obra" dentro de cada aviso, o sea la
     acción que el dueño toca desde el teléfono. Esta regla es más específica
     que la de `.btn-sm` de arriba y la estaba deshaciendo. */
  .fila-acciones .btn { min-height: 44px; padding: 8px 12px; font-size: 13px; }
  .bloque-liso .bloque-cab { padding: var(--e-3) var(--e-3) 0; }

  /* Una tabla ancha en un teléfono se lee de lado o no se lee: aquí cada fila
     se convierte en una tarjeta y cada celda dice de qué columna viene. */
  table.apilable thead { display: none; }
  table.apilable, table.apilable tbody, table.apilable tr, table.apilable td { display: block; width: 100%; }
  table.apilable tr {
    border: 1px solid var(--border); border-radius: var(--r-m);
    padding: var(--e-2) var(--e-3); margin-bottom: var(--e-2);
  }
  table.apilable td {
    border: none; padding: 3px 0; display: flex; justify-content: space-between;
    gap: var(--e-3); text-align: right; font-size: 13.5px;
  }
  table.apilable td::before {
    content: attr(data-col); color: var(--muted); font-size: 12.5px; font-weight: 550;
    text-align: left; flex: 0 0 auto;
  }
  /* La primera celda hace de título de la tarjeta: sin ella, seis filas iguales
     no dicen de qué obra o factura se está hablando. */
  table.apilable td:first-child {
    font-size: 15px; font-weight: 650; padding-bottom: var(--e-2);
    margin-bottom: var(--e-1); border-bottom: 1px solid var(--border);
  }
  /* Una celda vacía (la de acciones cuando no hay ninguna) no ocupa espacio */
  table.apilable td:empty { display: none; }
  table.apilable tbody tr:hover td { background: none; }
  .table-wrap { overflow-x: visible; }

  /* Cinco accesos en una sola fila: si se parten en dos, dejan de leerse como
     una barra de atajos y pasan a parecer contenido. */
  .accesos { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .acceso { padding: var(--e-2) 2px; border-radius: var(--r-s); }
  .acceso span { font-size: 10.5px; }
  .acceso .ico { width: 20px; height: 20px; }

}

@media (max-width: 420px) {
  .cifras, .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* El resto del menú, dentro de la barra inferior. Sin JavaScript: <details> ya
   sabe abrirse y cerrarse, y funciona aunque un script falle. */
.bi-mas { flex: 1; position: relative; }
.bi-mas > summary { list-style: none; cursor: pointer; }
.bi-mas > summary::-webkit-details-marker { display: none; }
.bi-panel {
  position: absolute; bottom: calc(100% + 8px); right: 8px; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  box-shadow: var(--sombra-m); padding: var(--e-2); display: flex; flex-direction: column;
}
.bi-panel a {
  display: flex; align-items: center; gap: 10px; padding: 11px 10px;
  border-radius: var(--r-s); color: var(--text2); text-decoration: none;
  font-size: 14px; font-weight: 550; min-height: 44px;
}
.bi-panel a:hover { background: var(--surface2); color: var(--text); }

/* ═══════════════ PIEZAS DE COBROS (P6.2) ═══════════════ */
.oculto { display: none !important; }

/* La frase que acompaña a la respuesta: el nombre y el número que hay que atender */
.resumen-frase { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.92); margin-top: var(--e-3); }
/* Con la serie al lado, la tarjeta es una rejilla de dos columnas y la frase tiene
   que cruzarlas: es la conclusión de las dos mitades, no de una. */
.resumen.con-serie .resumen-frase {
  grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.2);
  padding-top: var(--e-3); font-size: 14px;
}
.resumen-frase b { font-weight: 700; color: #fff; }

/* Las dos líneas de la cartera, dentro de la tarjeta de marca. Alto fijo porque
   Chart.js necesita que el contenedor mida algo: sin él, el lienzo crece sin
   parar en cada redibujado. */
.resumen-gr { height: 200px; margin-top: var(--e-3); }
@media (max-width: 900px) { .resumen-gr { height: 168px; } }

/* Lo que se dice cuando todavía no hay historia que dibujar. No es un error ni
   un hueco: es la explicación de qué aparecerá aquí y qué hace falta para verlo. */
.resumen-nota {
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.82);
}

/* Nota explicativa dentro de un bloque (qué es un estimado, por ejemplo) */
.bloque-nota {
  padding: 0 var(--e-4) var(--e-3); font-size: 13.5px; color: var(--muted); line-height: 1.6;
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: center;
}
.filtro-en-linea { display: flex; align-items: center; gap: var(--e-2); cursor: pointer; white-space: nowrap; }

/* Una obra con todo cobrado es una decisión esperando */
.cierres:empty { display: none; }
.cierres { padding: 0 var(--e-4) var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); }
.cierre {
  background: var(--green-soft); border-radius: var(--r-m); padding: var(--e-3);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap;
}
.cierre-txt { font-size: 14px; color: var(--green); font-weight: 550; }
.cierre-acciones { display: flex; gap: var(--e-2); }

/* Filtros de una lista larga */
.filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; padding: 0 var(--e-4) var(--e-3); align-items: end; }
.filtros select { max-width: 220px; }
/* Una etiqueta encima de su campo. Antes cada formulario repetía el mismo
   `display:flex;flex-direction:column;gap:6px;font-size:12px` a mano. */
.filtros label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--muted);
}
/* …salvo cuando el control es una casilla. `.filtros label` pone el rótulo ARRIBA
   —bien para «Cuándo» sobre su desplegable— pero a una casilla la dejaba encima de
   su propio texto, en una clase que se llama «en línea». Una casilla va **al lado**
   de lo que activa: separada, deja de leerse como una sola cosa y hay que adivinar
   a qué frase pertenece.

   Pasa en cuatro sitios (Facturar, la ficha de una obra y dos en Administrar
   obras), así que se arregla en la regla y no en cada plantilla. */
.filtros label.filtro-en-linea { flex-direction: row; align-items: center;
                                 font-size: 13px; color: var(--text); }
.filtros label .search-input { min-width: 180px; }

/* ── OBRAS (Sprint P6.3) ─────────────────────────────────────────────────── */
/* Un título dentro de un bloque, para separar herramientas sin abrir otra tarjeta. */
.sub-titulo {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  padding: var(--e-3) var(--e-4) var(--e-2);
}
.sub-titulo .suave { font-weight: 400; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); padding: 0 var(--e-4); }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }

.cifras-abajo { margin-top: var(--e-3); }
.celda-margen { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* La barra que reparte el costo entre material y mano de obra. Son dos partes de
   un mismo total, así que van del color de la empresa en dos intensidades: no es
   un semáforo, no hay nada bueno ni malo en gastar más en una que en la otra. */
.riel-doble { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: var(--e-2) 0; background: var(--surface2); }
.riel-doble i.reparto   { background: var(--brand); }
.riel-doble i.reparto-2 { background: var(--brand-soft); }

/* El veredicto del margen de una obra. El color viene del semáforo porque aquí sí
   hay algo que juzgar: la obra cumple o no cumple la meta que fijó el dueño. */
.panel-margen {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  flex-wrap: wrap; margin: var(--e-3) var(--e-4) 0;
  padding: var(--e-3); border-radius: var(--r-l); background: var(--surface2);
}
.panel-margen.ok       { background: var(--green-soft); }
.panel-margen.atencion { background: var(--yellow-soft); }
.panel-margen.critico  { background: var(--red-soft); }
.panel-margen-cifra { text-align: right; font-size: 26px; font-weight: 700; }
.panel-margen.ok .panel-margen-cifra       { color: var(--green); }
.panel-margen.atencion .panel-margen-cifra { color: var(--yellow); }
.panel-margen.critico .panel-margen-cifra  { color: var(--red); }
.panel-margen-cifra .suave { font-size: 11px; font-weight: 400; }

.lista-tarifas { display: flex; flex-direction: column; gap: var(--e-2); padding: 0 var(--e-4) var(--e-3); }
.fila-tarifa { display: flex; align-items: center; gap: var(--e-2); font-size: 13px; flex-wrap: wrap; }
.tarifa-nombre { min-width: 180px; }
.tarifa-monto { width: 120px; }
.vista-previa {
  white-space: pre-wrap; margin: 0 var(--e-4) var(--e-3); padding: var(--e-3);
  background: var(--surface2); border-radius: var(--r-m); color: var(--text2);
  font: 12px/1.5 ui-monospace, monospace; max-height: 320px; overflow: auto;
}

.alto-limitado { max-height: 340px; overflow-y: auto; }
.anulada { opacity: .45; }
.celda-obra, .celda-categoria { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* «· a mano»: la marca de que esa categoría la puso una persona y ninguna
   reclasificación va a tocarla (D-55). Discreta a propósito — es una nota al pie del
   dato, no un estado del dato. */
.marca-mano { font-size: 11px; color: var(--muted); white-space: nowrap; }
.select-obra { min-width: 190px; font-size: 13px; }
.btn-icono {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 4px; border-radius: var(--r-pill); display: inline-flex;
  min-height: 32px; min-width: 32px;
  /* En el teléfono, 44: es el lápiz que cambia la obra de una factura, y con
     32 px se falla el toque o se abre la fila de al lado. */
  align-items: center; justify-content: center;
}
.btn-icono:hover { background: var(--surface2); color: var(--text); }
@media (max-width: 900px) { .btn-icono { min-height: 44px; min-width: 44px; } }
.btn-icono .ico { width: 15px; height: 15px; }

/* ═══════════════ APARIENCIA (Configuración) ═══════════════ */
.marca-bloque { display: flex; flex-direction: column; gap: var(--e-3); }
.marca-nota { font-size: 12.5px; color: var(--muted); }
.marca-muestra {
  background: linear-gradient(150deg, var(--brand-strong) 0%, var(--brand-deep) 100%);
  color: #fff; border-radius: var(--r-l); padding: var(--e-3) var(--e-4);
  transition: background .25s ease;
}
.marca-muestra-rot { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.marca-muestra-cifra { font-size: 30px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.marca-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e-2); }
.marca-color {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s);
  font-family: inherit; font-size: 13.5px; font-weight: 550; color: var(--text2);
  transition: border-color .15s, box-shadow .15s;
}
.marca-color:hover { border-color: var(--muted); }
.marca-color.elegido { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); color: var(--text); }
.marca-punto { width: 20px; height: 20px; border-radius: 7px; flex: 0 0 auto; }
.marca-libre { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.marca-libre label { font-size: 13.5px; font-weight: 550; color: var(--text2); }
.marca-libre input[type="color"] {
  width: 52px; height: 40px; padding: 3px; border: 1px solid var(--border);
  border-radius: var(--r-s); background: var(--surface); cursor: pointer; min-height: 40px;
}
.marca-fijos { font-size: 13px; color: var(--muted); line-height: 2.2; }
.marca-fijos .pastilla { margin: 0 2px; }

/* ═══════════════ CONFIGURAR LA EMPRESA ═══════════════
   La pantalla de incorporación. Estaba escrita con `.card` y cuarenta y seis
   `style=` sueltos, y por eso se quedó fuera del rediseño sin que nadie lo notara:
   cuando el botón pasó a ser una pastilla sin borde, las cinco tarjetas de industria
   —que eran `class="btn"`— se convirtieron en óvalos gigantes con el texto
   desbordado, la que estaba escogida dejó de poder marcarse (una pastilla no tiene
   borde que pintar) y en el teléfono arrastraron la página entera de lado, porque un
   botón no parte líneas. Un botón es una etiqueta, no una tarjeta. */
.config { max-width: 820px; display: flex; flex-direction: column; gap: var(--e-3); }

/* El índice. Sustituye a la barra de progreso, que decía «Paso 1 de 6» en empresas
   ya configuradas y tenía dos muescas que nada podía encender. Además la pantalla
   pasa de los cinco mil píxeles: sin índice no hay forma de saltar a lo que se
   viene a cambiar. */
.config-indice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-2); }
.ci-item {
  display: block; padding: 10px 14px; border-radius: var(--r-m); text-decoration: none;
  background: var(--surface2); border: 1px solid transparent;
}
.ci-item:hover { border-color: var(--border); }
.ci-rot { display: block; font-size: 11.5px; color: var(--muted); font-weight: 550; }
.ci-val { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 2px; }
/* Lo que falta se marca; lo que está hecho no lleva adorno. Un ✓ verde en cada
   renglón convierte el semáforo en decoración y deja de significar «va bien». */
.ci-item.falta .ci-val { color: var(--yellow); }

/* ── Una tarjeta que se escoge ────────────────────────────────────────────
   Sirve igual para la industria y para las conexiones, y por eso «escogido» se ve
   igual en las dos. Antes eran dos formas distintas y ninguna era el color de la
   empresa: la industria lo decía con la palabra «seleccionada» en VERDE —que en
   todo el resto del producto significa «va bien», no «marcado»— y la conexión con
   un relleno azul escrito a mano bajo un borde naranja. Escoger no es un juicio
   (R-UI-4): va en el color de la empresa. */
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e-2); }
.opcion {
  display: block; width: 100%; text-align: left; padding: var(--e-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text2);
}
.opcion:hover { border-color: var(--muted); }
.opcion.elegida { border-color: var(--brand); background: var(--brand-soft); }
.opcion.no-va { cursor: not-allowed; opacity: .6; }
.opcion-cab { display: flex; align-items: center; gap: var(--e-2); margin-bottom: 5px; }
.opcion-tit { font-size: 14px; font-weight: 650; color: var(--text); }
.opcion-marca { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.opcion.elegida .opcion-marca { color: var(--brand); }
.opcion p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.opcion p + p { margin-top: var(--e-2); }
.opcion .freno { color: var(--yellow); }
/* Dos caminos que se leen uno debajo del otro, no repartidos en rejilla. */
.opciones-apiladas { grid-template-columns: 1fr; margin-top: var(--e-3); }
/* `principal` es el camino recomendado entre dos acciones; `elegida` es lo que el
   dueño ya escogió. Se ven igual porque las dos son «esto es lo tuyo», pero no se
   llaman igual: una tarjeta marcada como escogida cuando nadie ha escogido nada
   convierte la marca en decoración. */
.opcion.principal { border-color: var(--brand); background: var(--brand-soft); }

/* ── La entrevista ────────────────────────────────────────────────────────
   Quince preguntas seguidas medían 2.462 px, casi la mitad de la pantalla, y lo
   único que las agrupaba era una línea gris de 12 px indistinguible de la ayuda. */
.grupo-cab {
  display: flex; align-items: baseline; gap: var(--e-2);
  margin: var(--e-4) 0 var(--e-2); padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.grupo-cab:first-child { margin-top: 0; }
.grupo-tit { font-size: 14px; font-weight: 650; color: var(--text); }
.grupo-cuenta { font-size: 12px; color: var(--muted); margin-left: auto; }
/* Dos columnas para lo que se contesta con un sí o con un número. Una sola columna
   ponía la misma altura a «¿El descanso se paga?» que a la lista de proveedores, y
   quince preguntas seguidas medían 2.432 px: media pantalla para catorce respuestas
   de una palabra. Lo que necesita ancho —un texto, una lista, un mapa— la ocupa
   entera; el reparto lo decide el tipo de respuesta, no la rejilla (P-3). */
.preguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-3) var(--e-4); }
.preguntas > * { min-width: 0; }
.pregunta.ancha { grid-column: 1 / -1; }
.pregunta > label { display: block; font-size: 14px; font-weight: 550; margin-bottom: 3px; }
.pregunta .ayuda { margin: 0 0 var(--e-2); color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.pregunta .search-input, .pregunta select, .pregunta textarea { width: 100%; }
.pregunta select { max-width: 320px; }
.pregunta .error { color: var(--red); font-size: 12.5px; margin: var(--e-2) 0 0; }
/* Solo se marca lo que el dueño cambió. «valor por defecto» bajo cada uno de los
   quince campos son quince renglones que dicen lo mismo y no distinguen nada; lo
   único que interesa es lo contrario, qué contestó él. */
.pregunta .mia { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--brand); font-weight: 600; }
/* Lo que no cabe en una línea y no se escribe a mano: se dice qué hay dentro y se
   abre solo si se quiere. */
.pregunta details > summary {
  cursor: pointer; font-size: 13px; color: var(--text2); padding: 9px 14px;
  border: 1px solid var(--border); border-radius: var(--r-m); list-style: none;
}
.pregunta details > summary::-webkit-details-marker { display: none; }
.pregunta details > summary::after { content: " · ver y editar"; color: var(--brand); font-weight: 600; }
.pregunta details[open] > summary { border-color: var(--brand-border); margin-bottom: var(--e-2); }
.pregunta details textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ── El reglamento que se aprueba ─────────────────────────────────────────
   La negrita la pone aquí la pantalla, con `<b>`, a partir de trozos que el motor
   entrega ya separados. Antes las frases venían con `**asteriscos**` dentro del
   texto y se imprimían tal cual —correctamente: por estas frases viaja lo que
   escribe el dueño, y convertirlo en marcado sería ejecutarlo. */
.reglamento-frases { font-size: 14.5px; line-height: 1.85; }
.reglamento-frases p { margin: 0 0 var(--e-2); }
.reglamento-frases b { font-weight: 650; color: var(--text); }

/* ── Contarle el negocio a SKY AI ─────────────────────────────────────────
   El hilo iba con estilos escritos dentro del JavaScript, que es donde ningún
   rediseño los encuentra. */
.conv-hilo { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-3); }
.conv-hilo:empty { display: none; }
.conv-linea { padding: 9px 14px; border-radius: var(--r-m); max-width: 80%; font-size: 14px; line-height: 1.5; }
.conv-linea.mia { align-self: flex-end; background: var(--brand); color: #fff; }
.conv-linea.suya { align-self: flex-start; background: var(--surface2); color: var(--text); }
.conv-caja { display: flex; gap: var(--e-2); }
.conv-caja .search-input { flex: 1; min-width: 0; }

/* Los botones de un bloque, alineados con su contenido. `.fila-acciones` no vale
   aquí: nació para colgar de una `.fila` dentro de un bloque liso y lleva 24 px de
   sangría —42 más en el móvil— que desalinean el botón del texto de encima. */
.acciones-bloque { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }

/* ═══════════════ SKY AI — chat flotante ═══════════════ */

@media (max-width: 900px) {
  /* En el teléfono SKY AI ya vive en la barra inferior con su propia pantalla:
     el botón flotante solo tapaba cifras. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO
   Tres cosas, y ninguna más:
     1. la pantalla se ordena al entrar (escalonado corto, una sola vez);
     2. lo que se toca responde (el dedo debe sentir que pasó algo);
     3. una barra que se llena deja ver el dato mientras aparece.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }
@keyframes crecer   { from { width: 0; } }
@keyframes entrar   { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* 1. La pantalla se ordena al entrar. El escalonado es por posición y sin
   JavaScript: si un script falla, la pantalla igual aparece. */
.content > * { animation: aparecer var(--mov) var(--curva) both; }
.content > *:nth-child(1) { animation-delay: 0ms; }
.content > *:nth-child(2) { animation-delay: 45ms; }
.content > *:nth-child(3) { animation-delay: 90ms; }
.content > *:nth-child(4) { animation-delay: 135ms; }
.content > *:nth-child(5) { animation-delay: 175ms; }
.content > *:nth-child(n+6) { animation-delay: 210ms; }

/* 2. Lo que se toca, responde — y responde IGUAL en toda la aplicación.
   Un solo gesto: se levanta `--sube` al acercar el ratón y se hunde al soltar.
   Cuando cada pieza inventa su propia respuesta, la app se siente hecha por
   cinco personas distintas; con una sola, la mano aprende una vez y le sirve en
   las veinte pantallas. Eso es la mitad de lo que se llama «se siente bien». */
.btn, .acceso, .marca-color, .empresa-btn, .bi-item .ico, .ficha, .redondo,
.mini-dia, .segmentos a, .segmentos button, .nav-item, .btn-icono, .ficha-agregar {
  transition: transform var(--mov-rapido) var(--curva), filter var(--mov-rapido),
              background var(--mov-rapido), border-color var(--mov-rapido),
              color var(--mov-rapido), box-shadow var(--mov-rapido);
}
.btn:hover:not(:disabled), .ficha-agregar:hover, .acceso:hover {
  transform: translateY(var(--sube));
}
/* El botón principal proyecta su propia sombra al acercarse: es lo que lo separa
   de los demás sin necesidad de ser más grande ni más gritón. */
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 20px -6px var(--brand-border); }
.btn:active:not(:disabled), .marca-color:active { transform: translateY(0) scale(.97); }
.acceso:active, .empresa-btn:active { transform: translateY(0) scale(.985); }
.bi-item:active .ico { transform: scale(.88); }
.btn:disabled { transform: none; }
.fila { transition: background var(--mov-rapido) var(--curva); }
.fila:hover { background: var(--surface2); }
.bloque-link, .sidebar-empresa-cambiar { transition: opacity var(--mov-rapido); }
.bloque-link:active { opacity: .6; }

/* El aro de foco: uno, suave, del color de la empresa. El del navegador es una
   raya azul de dos píxeles que no se parece a nada de esta app — y quien navega
   con el teclado la ve en cada paso. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft), 0 0 0 1.5px var(--brand-border);
}
.btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--brand-soft); }

/* Una ventana no aparece de golpe: crece un punto desde donde estaba, y el fondo
   se apaga con ella. Es lo que hace que se entienda que la pantalla sigue ahí
   detrás en vez de haber sido reemplazada. */
@keyframes ventana { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes velo    { from { opacity: 0; } }
.dlg[open] { animation: ventana var(--mov) var(--curva); }
.dlg[open]::backdrop { animation: velo var(--mov) var(--curva);
                       backdrop-filter: blur(3px); }

/* 3. El dato aparece llenándose. Termina en el ancho real (que viene del dato),
   así que si la animación no corre, la barra ya está donde debe estar. */
.resumen-barra i, .riel i { animation: crecer var(--mov-dato) var(--curva) both; }
.resumen-barra i { animation-delay: 120ms; }

/* La cifra principal cuenta hasta su valor: es el único número que lo hace, y
   termina siempre en la cifra exacta (static/js/movimiento.js). */
.resumen-cifra { font-variant-numeric: tabular-nums; }

/* Lo que aparece encima de la pantalla, entra; no parpadea. */
.toast, .bi-panel { animation: entrar var(--mov) var(--curva); }

/* Quien pidió menos movimiento en su sistema operativo lo pidió para todo lo que
   abra, y esta app no es la excepción. Se apaga el movimiento, no el estado: el
   fondo del hover y el aro de foco siguen ahí, porque son información. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, .ficha-agregar:hover, .acceso:hover, .btn:active { transform: none; }
}

/* ── Anotar un gasto, y la bandeja de lo que subió la gente (F4.3) ──────────
   Los dos viven en Gastos: el «+» para lo que anota el dueño y la rejilla para
   lo que llega desde la obra. Las medidas salen de las variables del sistema;
   nada suelto, para que un cambio de radio o de espacio alcance también aquí. */
/* **Envuelve** (D-984). Era un `flex` sin `wrap`: el título y la fila de filtros
   —Mes/Semana/Día, ‹Hoy›, «Copiar la semana»— se quedaban en una sola línea de 543
   px dentro de una caja de 343, y en el teléfono la Agenda se salía 20 px por la
   derecha. Con `wrap`, lo que no cabe baja; el `min-width:0` es lo que permite que
   el bloque del título se encoja en vez de empujar (sin él, el mínimo de un
   elemento flex es su contenido y no cede). */
.barra-recibos { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.barra-recibos > * { min-width: 0; }
.barra-recibos .search-input { flex: 1; }

.rejilla-recibos {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.recibo-pendiente {
  border: 1px solid var(--border); border-radius: var(--r-m); overflow: hidden;
}
.recibo-pendiente img {
  width: 100%; height: 170px; object-fit: cover; display: block;
  background: var(--surface2);
}
.recibo-datos { padding: var(--e-2); display: grid; gap: var(--e-2); }
.recibo-acciones { display: flex; gap: var(--e-2); }
.recibo-acciones .btn-primary { flex: 1; }

/* La ventana de anotar. `<dialog>` nativo: el navegador ya sabe cerrarla con
   Escape y dejar el fondo inerte, y eso no hay que reprogramarlo. */
.dlg {
  border: none; border-radius: var(--r-l); padding: 0; max-width: 460px; width: 92vw;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .24);
  /* `margin: auto` es lo que centra un `<dialog>` abierto con `showModal()`, y el
     reset de arriba —`* { margin: 0 }`— se lo estaba quitando a TODAS las ventanas
     del sistema: la de anotar, la de la tarifa, la de obra nueva, la de facturar.
     Todas se abrían pegadas a la esquina de arriba a la izquierda. Se vio al
     fotografiar el panel de la Agenda; llevaba así desde P6.0. */
  margin: auto;
}
.dlg::backdrop { background: rgba(16, 24, 40, .45); }
.dlg-cuerpo { padding: var(--e-4); display: grid; gap: var(--e-3); }
.dlg-cuerpo h3 { margin: 0; font-size: 17px; }
.dlg-cuerpo p { margin: 0; font-size: 12.5px; line-height: 1.6; }
.dlg-cuerpo label {
  display: flex; flex-direction: column; gap: var(--e-1); font-size: 13px;
}
.dlg-acciones { display: flex; gap: var(--e-2); justify-content: flex-end; }

/* La ventana de los recibos por registrar necesita más ancho que la de anotar: son
   tarjetas con foto, no un formulario en columna. */
.dlg-ancho { max-width: 760px; }

/* ── La explicación a petición ──────────────────────────────────────────────
   Un círculo pequeño con una «i» que abre su texto debajo. Va junto al título
   que explica, así que se alinea con él y no rompe la línea. */
.info { display: inline-block; position: relative; vertical-align: middle; }
.info > summary {
  list-style: none; cursor: pointer; user-select: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--muted); background: var(--surface);
  font: 600 12px/16px Georgia, serif; text-align: center;
}
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover { color: var(--text2); border-color: var(--muted); }
.info[open] > summary { color: var(--brand); border-color: var(--brand-border); }

.info-cuerpo {
  position: absolute; z-index: 20; top: 24px; left: 0; width: min(420px, 78vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: var(--e-3);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
  font-size: 12.5px; line-height: 1.65; color: var(--text2); font-weight: 400;
}
.info-cuerpo b { display: block; color: var(--text); margin-bottom: var(--e-1); }

/* Pegado al borde derecho no cabe: se abre hacia la izquierda. */
.info.izq .info-cuerpo { left: auto; right: 0; }

/* El «i» se abre DESDE su botón, no desde el centro ni de la nada.
   Nada en el mundo real aparece de un tamaño cero: arranca en 0.97 y sube, que es
   lo que hace que se lea como «esto salió de aquí» y no como «esto apareció».

   Solo la entrada se anima. Al cerrar, un <details> quita el elemento y no hay nada
   que animar — y está bien: lo que el usuario decide se acompaña, lo que el sistema
   responde va instantáneo. La curva es la fuerte (ease-out de verdad); las de serie
   del navegador se sienten flojas.

   El bloque de `prefers-reduced-motion` de más arriba apaga esto entero. */
.info[open] > .info-cuerpo {
  transform-origin: top left;
  animation: info-entra 150ms cubic-bezier(.23, 1, .32, 1);
}
.info.izq[open] > .info-cuerpo { transform-origin: top right; }

@keyframes info-entra {
  from { opacity: 0; transform: scale(.97) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Que el botón responda al dedo. 18 píxeles son pocos: sin esto no se sabe si se
   pulsó. */
.info > summary { transition: transform 140ms cubic-bezier(.23, 1, .32, 1),
                              color 140ms, border-color 140ms; }
.info > summary:active { transform: scale(.9); }

/* ── La factura por dentro (tanda 2 de facturación) ──────────────────────────
   Una factura larga se lee por grupos, no por filas: el cliente busca «el baño»
   antes que la partida 14. La cabecera de sección es lo que convierte una lista
   de veinte líneas en tres bloques que se entienden de un vistazo. */
.fila-seccion td {
  background: var(--bg); color: var(--text);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
  padding-top: var(--e-3);
}

/* El desglose del total. Cada renglón enfrentado a su cifra: leer una columna de
   importes alineados a la derecha es lo que permite comprobar la suma de un
   vistazo, que es exactamente lo que hace quien recibe una factura. */
.fila-total {
  display: flex; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-1) 0; font-size: 13.5px;
}
.fila-total + .fila-total { border-top: 1px solid var(--border); }
.fila-total .num { font-variant-numeric: tabular-nums; }

/* La casilla y su texto en una sola línea, para que no se parta a media frase. */
/* Una fila de filtros que va DENTRO de otra caja y no necesita su propio aire:
   sin esto había que escribirle `margin:0;padding:0` a mano en cada sitio, que
   es como vuelven los estilos sueltos a una plantilla ya migrada. */
.filtros-sueltos { margin: 0; padding: 0; }

.linea-check { display: flex; align-items: center; gap: var(--e-2); white-space: nowrap; }
/* Separar una tarjeta de la anterior sin escribirlo a mano en la plantilla. */
.mas-arriba { margin-top: var(--e-3); }

/* Una jornada todavía abierta: sus horas van a seguir creciendo, así que la fila de
   hoy no dice lo mismo que dirá mañana. Ámbar porque pide atención, no porque esté
   mal — quien mira una hoja de horas necesita saber cuáles todavía se mueven. */
tr.fila-abierta td { background: var(--yellow-soft); }

/* Una fila que se pulsa para corregirla. */
tr.fila-entrada { cursor: pointer; }

/* Dos campos por línea dentro de una ventana; uno solo en el teléfono, donde dos
   dejan cada campo demasiado estrecho para escribir una hora. */
.rejilla-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
@media (max-width: 560px) { .rejilla-dos { grid-template-columns: 1fr; } }

/* Un campo que no se escribe: sale de otros. Se ve distinto para que nadie intente
   teclear encima y crea que no funciona el teclado. */
.calculado { background: var(--surface2); color: var(--text2); }

/* ── Retoques que faltaban del sistema visual ────────────────────────────────
   `.suave` estaba definida SOLO para celdas de tabla (`td.suave`), y medio proyecto
   la usa suelta en spans y divs esperando que apague el texto — donde no lo hacía y
   nadie lo notó porque «no pasa nada» es exactamente cómo se ve un estilo que falta.
   Aquí se declara genérica; la de celda se queda por si algún día divergen. */
.suave { color: var(--muted); }

/* El nombre de una persona en una lista: es el enlace que se pulsa, y tiene que
   ganarle visualmente a los avisos pequeños que lleva debajo. */
.enlace-persona { font-weight: 650; }

/* El aviso que cuelga de una fila («sin cerrar», «le falta la tarifa»). Pegado a lo
   que avisa y más pequeño: es una nota sobre esa persona, no otra fila. */
.aviso-fila { font-size: 11.5px; font-weight: 650; margin-top: 2px; }

/* El total de un periodo, en la cabecera de una tarjeta de tiempo. Grande porque es
   la pregunta con la que se abre esa pantalla: «¿cuántas horas van?». */
.periodo-total { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.periodo-total .suave { font-size: 12px; font-weight: 400; }

/* ── El punto del área de trabajo ────────────────────────────────────────────
   Gris = estuvo dentro. Naranja = se salió. Hueco = esa obra todavía no dice dónde
   queda, así que no hay veredicto.

   **Son tres estados y no dos a propósito.** Dibujar «no se sabe» igual que «está
   dentro» haría creer que se revisó algo que nadie revisó, y con obras sin ubicar
   media pantalla estaría dando por bueno lo que no miró. */
.punto-area {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.punto-dentro    { background: var(--muted); }
.punto-fuera     { background: var(--yellow); box-shadow: 0 0 0 3px rgba(168, 91, 8, .18); }
.punto-sin-saber { background: transparent; border: 1.5px dashed var(--border); }

/* Un aviso que no se puede ignorar: el que cuenta una consecuencia que ya está
   ocurriendo en otra pantalla. Se distingue de una nota normal porque no informa —
   pide que se haga algo. */
.aviso-fuerte {
  /* Blanco y no del color del fondo: sobre la página este aviso se quedaba sin
     cuerpo y solo se veía flotar su canto rojo, como un paréntesis suelto. */
  box-shadow: inset 3px 0 0 var(--red), var(--alto-0); background: var(--surface);
  border-radius: var(--r-m); padding: var(--e-3) var(--e-4);
  color: var(--text2); display: block; line-height: 1.65;
}

/* Un desplegable secundario al pie de un bloque: lo dado de baja, lo archivado. */
.mas-abajo { margin-top: var(--e-4); }
.mas-abajo > summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════════════
   LA AGENDA — el calendario de la semana (rediseño 2026-08-16)

   **La decisión que manda sobre todas las demás es el color.** El semáforo
   (verde/ámbar/rojo) y el violeta de la IA significan algo en SKY OS; si una obra
   pudiera pintarse de rojo, el dueño dejaría de distinguir su plan de una alerta.
   Por eso la paleta de obras vive en un rango propio —índigos, teales, azules,
   rosas y naranjas quemados— fuera de los tres tonos del semáforo.

   **Y la segunda: la profundidad viene de la sombra, no del borde.** Un borde
   dibuja una línea más en una pantalla que ya tiene muchas; una sombra suave dice
   «esto está encima» sin añadir un solo trazo. Es la diferencia entre una tabla y
   una superficie, y es lo que hace que una pantalla densa no canse.

   Las alturas y la curva de movimiento **ya no viven aquí**: nacieron en esta
   sección y volvían a declararse en `:root`, así que la curva de la Agenda le
   estaba cambiando el movimiento a TODO el producto sin que nadie lo pidiera.
   Ahora son fichas del sistema, arriba del archivo.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* El alto de una hora en la rejilla. Vive AQUÍ y lo usan tanto las
     líneas como la posición de cada bloque (components/ui.html): con el
     número escrito en dos sitios, el primero que cambie deja al otro
     desplazado, y un bloque desplazado dice una hora que no es. */
  --alto-hora: 56px;
}

.agenda { display: grid; grid-template-columns: 276px minmax(0, 1fr);
          gap: 20px; align-items: start; }
@media (max-width: 1024px) { .agenda { grid-template-columns: 1fr; } }

/* ── La cabecera ─────────────────────────────────────────────────────────── */
.agenda-titulo { font-size: 26px; font-weight: 700; letter-spacing: -.02em;
                 color: var(--text); line-height: 1.15; }
.agenda-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Un grupo de botones que se lee como una sola pieza. La pastilla activa es la que
   flota: se sabe dónde estás por la altura, no por un color más. */
.segmentos { display: inline-flex; background: var(--bg); border-radius: 999px;
             padding: 3px; gap: 2px; }
.segmentos a, .segmentos button {
  border: none; background: none; font: inherit; font-size: 13px; font-weight: 550;
  color: var(--text2); padding: 6px 14px; border-radius: 999px; cursor: pointer;
  text-decoration: none; transition: background .18s var(--curva), box-shadow .18s var(--curva);
}
.segmentos .activo { background: var(--surface); color: var(--text);
                     box-shadow: var(--alto-0); }
.segmentos a:hover:not(.activo) { color: var(--text); }

.redondo { width: 32px; height: 32px; border-radius: 999px; display: inline-flex;
           align-items: center; justify-content: center; border: none;
           background: var(--bg); color: var(--text2); font-size: 15px;
           text-decoration: none; transition: background .18s var(--curva); }
.redondo:hover { background: var(--border); color: var(--text); }

/* ── Las superficies ─────────────────────────────────────────────────────── */
/* Sin borde: la sombra ya dice dónde acaba. Un borde encima de una sombra es
   decirlo dos veces, y se nota como suciedad. */
.tarjeta-suave { background: var(--surface); border-radius: 18px;
                 box-shadow: var(--alto-1); }

.agenda-rail { display: flex; flex-direction: column; gap: 14px; }

.mini-mes { padding: 16px; }
.mini-mes-cab { font-size: 13.5px; font-weight: 650; margin-bottom: 10px; }
.mini-mes-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
                    text-align: center; }
.mini-mes-rejilla > span { font-size: 10px; color: var(--muted); padding: 4px 0;
                           font-weight: 600; letter-spacing: .04em; }
.mini-dia { font-size: 12.5px; padding: 6px 0; border-radius: 9px; color: var(--text2);
            text-decoration: none; display: block;
            transition: background .16s var(--curva), color .16s var(--curva); }
.mini-dia:hover { background: var(--bg); }
.mini-dia.fuera { color: #D3DAE5; }
/* Dos preguntas distintas —«dónde estoy» y «qué día es»— con dos señales distintas. */
.mini-dia.en-semana { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.mini-dia.es-hoy { background: var(--text); color: #fff; font-weight: 700; }

/* ── El calendario ───────────────────────────────────────────────────────── */
.agenda-tabla { padding: 8px 8px 12px; }
.agenda-cab, .agenda-franja, .agenda-rejilla {
  display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr));
}
.agenda-cab-dia { padding: 12px 4px 14px; text-align: center; font-size: 11.5px;
                  color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.agenda-cab-dia b { display: block; font-size: 22px; color: var(--text);
                    font-weight: 650; letter-spacing: -.02em; margin-top: 3px; }
.agenda-cab-dia.hoy b { background: var(--text); color: #fff; border-radius: 12px;
                        width: 38px; height: 38px; line-height: 38px; margin: 3px auto 0; }

.agenda-franja { background: #E9EEF6; border-radius: 14px; padding: 4px 0;
                 margin-bottom: 6px; }
.agenda-franja-rot { font-size: 9.5px; color: var(--muted); padding: 10px 8px 0;
                     text-align: right; text-transform: uppercase;
                     letter-spacing: .07em; line-height: 1.3; font-weight: 650; }
.agenda-franja-dia { padding: 5px; display: flex; flex-direction: column; gap: 5px;
                     min-height: 46px; }

/* La rejilla, casi invisible. Las líneas son una guía para el ojo, no contenido:
   en cuanto compiten con los bloques, el calendario se lee como una hoja de
   cálculo. */
.agenda-rejilla { position: relative; }
.agenda-hora { height: var(--alto-hora); font-size: 10.5px; color: var(--muted); font-weight: 600;
               padding-right: 10px; text-align: right; transform: translateY(-6px); }
.agenda-col { position: relative; padding: 0 4px; }
.agenda-col .linea { height: var(--alto-hora); border-top: 1px solid rgba(16, 24, 40, .05); }
/* El fin de semana, un punto más apagado: se ve que existe sin gritar. */
.agenda-col:nth-child(n+7) { background: rgba(16, 24, 40, .022); }

/* ── Los bloques ─────────────────────────────────────────────────────────── */
/* Ocho colores llenos, no ocho tintes pálidos. El pastel de antes tenía un
   problema de fondo: los ocho tonos eran variaciones del mismo azul, así que la
   semana entera se leía de un solo color y ninguna obra se distinguía de la de
   al lado. Ahora cada obra tiene el suyo —y se reconoce por el color antes de
   leer el nombre—, en la franja 600/700: bastante oscuro para que el blanco
   encima se lea con holgura, sin llegar a pintar la pantalla de noche. */
/* El color de respaldo va en el USO (`var(--relleno, …)`), no en una declaración
   de la pieza. Declarándolo aquí, esta regla y la paleta pesan lo mismo y gana la
   que venga después en el archivo: mover treinta líneas pintaba la semana entera
   de un solo color. Ha pasado dos veces — la segunda, con el punto del mes en
   gris. Pedido con respaldo, el orden deja de decidir nada. */
.bloque-obra {
  background: var(--relleno, #1D4ED8); color: #fff;
  border: none; border-radius: 12px; padding: 9px 11px; text-align: left;
  width: 100%; font: inherit; cursor: pointer; display: block; overflow: hidden;
  box-shadow: var(--alto-0);
  transition: transform .18s var(--curva), box-shadow .18s var(--curva),
              background .18s var(--curva);
}
/* Se levanta un pelo al pasar por encima. Un píxel y medio basta: el movimiento
   confirma que responde, y más que eso ya distrae. */
/* La paleta, suelta: la usan el bloque de la semana y la etiqueta del mes, y una
   obra tiene que salir del mismo color en las tres vistas — si no, el color deja
   de identificar y pasa a ser adorno.

   **Va DESPUÉS de `.bloque-obra` a propósito.** Las dos reglas escriben
   `--relleno` y pesan lo mismo, así que gana la que viene después. Escrita antes,
   la pieza pisaba la paleta y pintaba la semana entera de un solo color: pasó
   exactamente eso la primera vez que se escribió. */
.tono-0 { --relleno: #4338CA; --relleno-alto: #3730A3; }  /* índigo    */
.tono-1 { --relleno: #0F766E; --relleno-alto: #115E59; }  /* teal      */
.tono-2 { --relleno: #6D28D9; --relleno-alto: #5B21B6; }  /* violeta   */
.tono-3 { --relleno: #1D4ED8; --relleno-alto: #1E40AF; }  /* azul      */
.tono-4 { --relleno: #0369A1; --relleno-alto: #075985; }  /* cielo     */
.tono-5 { --relleno: #BE185D; --relleno-alto: #9D174D; }  /* rosa      */
.tono-6 { --relleno: #047857; --relleno-alto: #065F46; }  /* esmeralda */
.tono-7 { --relleno: #C2410C; --relleno-alto: #9A3412; }  /* naranja   */

.bloque-obra:hover { transform: translateY(-1.5px); box-shadow: var(--alto-1);
                     background: var(--relleno-alto, #1E40AF); }
.bloque-obra:active { transform: translateY(0); box-shadow: var(--alto-0); }
.bloque-obra.en-rejilla { position: absolute; }
.bloque-obra .obra { font-size: 13px; font-weight: 650; color: #fff;
                     letter-spacing: -.01em; white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; }
/* Lo secundario no se dice con otro color: se dice con el mismo blanco, más
   callado. Dos colores dentro de un bloque de 60 px ya son ruido. */
.bloque-obra .horas { font-size: 11px; color: rgba(255, 255, 255, .78);
                      font-weight: 550; margin-bottom: 1px; }
.bloque-obra .gente { font-size: 11.5px; color: rgba(255, 255, 255, .85);
                      line-height: 1.45; }

.inicial { display: inline-flex; align-items: center; justify-content: center;
           width: 24px; height: 24px; border-radius: 999px; font-size: 10px;
           font-weight: 700; background: rgba(255, 255, 255, .22); color: #fff;
           margin-right: -7px; border: 2px solid var(--relleno, #1D4ED8); }
.iniciales { display: flex; align-items: center; margin-top: 7px; padding-left: 2px; }
.iniciales .mas { font-size: 10.5px; color: rgba(255, 255, 255, .8);
                  margin-left: 13px; font-weight: 600; }

/* Un arranque de obra no es gente: es un hito, y el verde aquí significa
   exactamente lo que significa en el semáforo. */
.bloque-obra.arranque { --relleno: #15803D; --relleno-alto: #166534;
                        cursor: default; }

/* El hueco de poner trabajo es ahora la ficha de agregar del sistema
   (`.ficha-agregar.chica`): un hueco punteado enseña DÓNDE va a aparecer lo que
   se agregue, cosa que un `+` suelto no dice. */

/* ── El panel de poner trabajo ───────────────────────────────────────────── */
.dlg-poner { max-width: 520px; border-radius: 20px; box-shadow: var(--alto-2); }
.poner-campo { display: grid; gap: 8px; }
.poner-rot { font-size: 13px; color: var(--text2); }
.poner-vacio { font-size: 12.5px; color: var(--muted); }

/* La gente, en fichas que se pulsan. Una lista de nombres se reconoce de un
   vistazo; una lista numerada hay que leerla y contar. */
.fichas { display: flex; flex-wrap: wrap; gap: 7px; }
.ficha { display: inline-flex; align-items: center; gap: 7px; border: none;
         background: var(--bg); color: var(--text2); font: inherit; font-size: 12.5px;
         font-weight: 550; padding: 5px 12px 5px 5px; border-radius: 999px;
         cursor: pointer; transition: background .16s var(--curva),
         color .16s var(--curva), box-shadow .16s var(--curva); }
.ficha-ini { display: inline-flex; align-items: center; justify-content: center;
             width: 24px; height: 24px; border-radius: 999px; font-size: 10px;
             font-weight: 700; background: var(--surface); color: var(--text2);
             transition: background .16s var(--curva), color .16s var(--curva); }
.ficha:hover { background: var(--border); }
/* Lo escogido se ve escogido desde el otro lado de la mesa: relleno, no un borde. */
.ficha.puesta { background: var(--text); color: #fff; box-shadow: var(--alto-0); }
.ficha.puesta .ficha-ini { background: rgba(255, 255, 255, .22); color: #fff; }

.poner-horas { display: flex; align-items: center; gap: 8px; }
.poner-horas input { width: auto; }
.poner-a { font-size: 13px; color: var(--muted); }

/* Lo que va a pasar al pulsar, escrito en español. Es la diferencia entre
   confirmar y adivinar. */
.poner-resumen { font-size: 12.5px; color: var(--text2); line-height: 1.6;
                 background: var(--bg); border-radius: 12px; padding: 10px 12px;
                 margin: 0; }

/* Un día que todavía se puede planear se pulsa: la posición del dedo es la hora.
   Los días idos no, y por eso no llevan la clase — ofrecer poner trabajo en un
   martes que ya pasó es ofrecer un error. */
.agenda-col.planeable { cursor: pointer; }

/* Una lista de motivos dentro de un aviso: qué impide cerrar la nómina, qué falta
   por completar. Con viñeta, porque son varios y hay que contarlos — un párrafo
   con tres motivos separados por comas se lee como uno solo. */
.lista-motivos { margin: var(--e-2) 0 var(--e-2) 18px; padding: 0;
                 font-size: 13.5px; line-height: 1.7; }
.lista-motivos li { margin-bottom: 2px; }

/* ── Obras: una ficha por obra ───────────────────────────────────────────────
   «Lo que quiero ver son los proyectos que están activos, un breve resumen del
   proyecto y poderles dar clic para ingresar» (CEO, 2026-08-19).

   Fichas y no tabla: una tabla de nueve columnas obliga a leer de izquierda a
   derecha para reconocer una obra, y lo que se hace aquí no es comparar —es
   encontrar la tuya y entrar. Toda la ficha se pulsa. */
.obras-rejilla { display: grid; gap: var(--e-3);
                 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.obra-ficha {
  display: block; text-decoration: none; background: var(--surface);
  border-radius: var(--r-xl); box-shadow: var(--alto-1); padding: var(--e-4);
  transition: transform var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva);
}
.obra-ficha:hover { transform: translateY(var(--sube)); box-shadow: var(--alto-2); }
.obra-ficha:active { transform: translateY(0) scale(.99); }
.obra-ficha-cab b { display: block; font-size: 16px; font-weight: 650;
                    letter-spacing: -.01em; }
.obra-ficha-cab span { font-size: 12.5px; }
.obra-ficha-donde { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* El resumen: tres cifras, cada una con su rótulo encima y pequeño. Puestas en
   línea sin rótulo habría que adivinar cuál es cuál. */
.obra-ficha-cifras { display: flex; gap: var(--e-3); margin-top: var(--e-3);
                     flex-wrap: wrap; }
.obra-ficha-cifras span { display: flex; flex-direction: column; font-size: 14px;
                          font-weight: 600; font-variant-numeric: tabular-nums;
                          color: var(--text); }
.obra-ficha-cifras i { font-style: normal; font-size: 10.5px; font-weight: 600;
                       color: var(--muted); letter-spacing: .02em; }
.obra-ficha-cifras em { font-style: normal; font-size: 13px; font-weight: 500; }

/* ── Facturar: la lista y la factura, lado a lado ────────────────────────────
   Antes iban una debajo de otra y el editor quedaba enterrado en el medio. En la
   pantalla donde más se trabaja, la rueda del ratón era la herramienta principal.

   La lista va a la izquierda y NO se estira: una lista más ancha no se lee mejor,
   solo aleja el número del total. Lo que crece es la factura, que es donde se
   escribe. */
.facturar { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
            gap: var(--e-3); align-items: start; }
@media (max-width: 1100px) { .facturar { grid-template-columns: 1fr; } }

.facturar-lista { display: flex; flex-direction: column; gap: var(--e-3);
                  min-width: 0; }
.facturar-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                   gap: var(--e-2); }
/* Tres cifras en una columna estrecha: la letra baja de tamaño, pero el salto
   entre el rótulo y el número se conserva — si todo midiera igual, no habría
   cifra, habría tres frases. */
.facturar-cifras .cifra { padding: var(--e-3); border-radius: var(--r-l); }
.facturar-cifras .cifra-val { font-size: 20px; }
/* La explicación de cada cifra, a una línea y cortada: en una columna de 400 px,
   «sin emitir, no están en tu cartera» se parte en cuatro renglones y la tarjeta
   crece hasta empujar la lista fuera de la pantalla. El texto entero sigue estando
   —se lee al pasar por encima—, pero no decide el alto de nada. */
.facturar-cifras .cifra-sub { font-size: 11px; white-space: nowrap;
                              overflow: hidden; text-overflow: ellipsis; }
/* …pero en el teléfono el texto se lee entero. El recorte de arriba se apoya en
   que el texto completo está en el `title` y se ve al pasar por encima — y en un
   teléfono **no hay pasar por encima**: ahí el texto simplemente desaparecía, y se
   cortaban los tres, incluso «de estas facturas».
   Aquí tampoco hay columna que proteger: las cifras van en su propia fila y
   crecer un renglón no empuja ninguna lista fuera de la pantalla. */
@media (max-width: 860px) {
  .facturar-cifras .cifra-sub { white-space: normal; overflow: visible; }
}

.facturar-detalle { min-width: 0; }
.facturar-nada { background: var(--surface); border-radius: var(--r-xl);
                 box-shadow: var(--alto-1); }

/* Toda la fila abre la factura: con la lista y el detalle uno al lado del otro,
   una columna de botones «Abrir» repite lo que la fila entera ya hace. Es un
   `<button>` y no un `<div>` con clic: así se llega con el teclado y se anuncia
   como algo que se pulsa. */
.fila-factura { width: 100%; border: none; background: none; font: inherit;
                text-align: left; cursor: pointer; }
.fila-factura .fila-der { flex-direction: column; align-items: flex-end; gap: 3px; }
.fila-factura.elegida { background: var(--brand-soft);
                        box-shadow: inset 3px 0 0 var(--brand); }
.fila-factura.elegida:hover { background: var(--brand-soft); }

/* ── El mes ──────────────────────────────────────────────────────────────────
   Un mapa, no una lista. Aquí no se lee lo que hay que hacer: se ve de un vistazo
   qué días están llenos y cuáles vacíos. Por eso la casilla es pequeña, las
   etiquetas son de una línea, y la obra se reconoce por el punto de color antes
   de leer el nombre — el MISMO color que lleva en la semana y en el día. */
.agenda-mes { padding: 8px 8px 10px; }
.mes-cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
           padding: 6px 4px 10px; }
.mes-cab span { text-align: center; font-size: 11.5px; color: var(--muted);
                font-weight: 600; letter-spacing: .03em; }
/* ── LA BANDA DE DURACIÓN DE UNA OBRA (D-835) ──────────────────────────────
   Una barra continua por obra, de su arranque a su entrega. Antes solo se pintaban
   los dos extremos como pastillas sueltas, y una obra que empezaba el 3 y entregaba
   el 20 dejaba la semana del 10 en blanco — con la obra en marcha.

   Se apoya en las rejillas que ya existen: la de la semana lleva delante una columna
   de 52 px para el rótulo (por eso la plantilla suma 1 a la columna) y la del mes son
   siete casillas limpias. La banda no crea rejilla propia: **copia la de debajo**, o
   dejaría de estar alineada con los días en cuanto una de las dos cambie. */
.agenda-bandas {
  display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr));
  gap: 3px 0; padding: 5px 0; margin-bottom: 6px;
}
.bandas-fila {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px 4px; margin-bottom: 4px;
}
.agenda-bandas .agenda-franja-rot { grid-row: 1 / -1; align-self: center; padding-top: 0; }

.banda-obra {
  min-width: 0; display: flex; align-items: center; text-decoration: none;
  background: var(--relleno); color: #fff; border-radius: 7px;
  padding: 4px 9px; font-size: 11.5px; font-weight: 600; line-height: 1.3;
}
.banda-obra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banda-obra:hover { background: var(--relleno-alto); }

/* El borde partido dice «esto viene de antes» y «esto sigue después». Sin él, una
   obra que cruza el mes entero se lee como cinco obras distintas de una semana. */
.banda-obra.abre-antes { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.banda-obra.sigue      { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.bandas-de-mas { font-size: 11.5px; color: var(--muted); margin: 0 0 6px 56px; }
.bandas-de-mas a { color: inherit; text-decoration: underline; }

/* En el teléfono la semana se recorta y las bandas estorbarían más de lo que
   aclaran: la pantalla es de un día, y ahí la pastilla de «todo el día» ya lo dice. */
@media (max-width: 720px) {
  .agenda-bandas, .bandas-de-mas { display: none; }
}

.mes-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
            margin-bottom: 4px; }

.mes-casilla {
  display: flex; flex-direction: column; gap: 3px; min-height: 96px;
  padding: 7px; border-radius: var(--r-m); text-decoration: none;
  background: var(--surface2); overflow: hidden;
}
.mes-casilla:hover { background: var(--bg); }
/* Los días del mes de al lado se pintan igual y solo se apagan. Dejarlos en blanco
   diría «aquí no hay nada», y en un mes que empieza en jueves eso son tres días
   con gente trabajando. */
.mes-casilla.fuera { opacity: .45; }
.mes-num { font-size: 12.5px; font-weight: 650; color: var(--text2);
           align-self: flex-start; padding: 0 2px; }
.mes-casilla.hoy .mes-num { background: var(--text); color: #fff; border-radius: 999px;
                            min-width: 22px; height: 22px; line-height: 22px;
                            text-align: center; padding: 0 6px; }

/* La etiqueta de una obra: punto de color, nombre que se corta, y cuánta gente va.
   Tres datos en una línea de 11 px — más no cabe, y más tampoco hace falta para
   decidir a qué día saltar. */
.mes-obra {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px;
  color: var(--text2); background: var(--surface); border-radius: 7px;
  padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mes-obra i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto;
              background: var(--relleno, var(--muted)); }
.mes-obra b { margin-left: auto; font-size: 10.5px; font-weight: 700;
              color: var(--muted); padding-left: 4px; }
.mes-obra.arranca { background: var(--green-soft); color: var(--green);
                    font-weight: 600; }
.mes-mas { font-size: 10.5px; color: var(--muted); padding: 1px 6px; font-weight: 600; }

/* El día suelto: la misma rejilla de la semana con una columna. Se le da un ancho
   máximo porque una sola columna estirada a 1.100 px deja los bloques como
   pancartas y cuesta más leerlos, no menos. */
.de-un-dia .agenda-cab, .de-un-dia .agenda-franja, .de-un-dia .agenda-rejilla {
  grid-template-columns: 52px minmax(0, 1fr);
}
.de-un-dia { max-width: 620px; }

/* ── El hueco de SKY AI ──────────────────────────────────────────────────── */
/* Violeta, y solo aquí: es lo que permite saber sin pensarlo si habla el dato o
   habla el asistente (SKY_OS_DNA §4.4). */
.ia-agenda { padding: 16px; background: linear-gradient(180deg, #F3F0FF, #E9E3FE);
             border-radius: 18px; box-shadow: var(--alto-1); }
.ia-agenda-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
                 color: #6D28D9; font-weight: 800; margin-bottom: 8px; }
.ia-agenda p { font-size: 13px; color: var(--text2); line-height: 1.6; margin: 0 0 12px; }

/* ═══════════════ 12. EL INICIO — la pantalla que dice cómo va todo ═══════════
   Sprint P7. Antes esta pantalla eran seis tarjetas iguales y media pantalla en
   blanco: las tres áreas sin nada que decir ocupaban lo mismo que las que tenían
   cinco asuntos, porque la rejilla reparte por columnas y no por importancia.

   Lo que cambia aquí no es el color, es **el peso**. Cada bloque ocupa lo que
   pesa: la conclusión arriba y grande, la tendencia a su lado, el detalle abajo,
   y lo que está al día en una sola línea. */

/* ── La respuesta, con su historia al lado ───────────────────────────────────
   Una cifra sin su tiempo es un saldo, no una respuesta (P-2). Los meses van
   DENTRO de la tarjeta de conclusión y no en un bloque aparte: separarlos deja
   al dueño juntando dos cosas que solo significan juntas. */
.resumen.con-serie {
  display: grid; grid-template-columns: minmax(250px, .85fr) 1.15fr;
  gap: var(--e-5); align-items: start;
}
@media (max-width: 860px) { .resumen.con-serie { grid-template-columns: 1fr; gap: var(--e-4); } }
.serie { display: flex; flex-direction: column; gap: var(--e-2); }
.serie-tit { font-size: 12.5px; color: rgba(255,255,255,.8); }
.serie-cols { display: flex; align-items: stretch; gap: var(--e-3); height: 150px; }
.serie-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* `flex: none` en las dos mitades. Sin él, el reparto del flex las encoge y la
   escala deja de ser escala: un mes 2,5 veces peor que otro salía casi igual.
   La proporción de una gráfica no se negocia con el layout. */
.serie-arriba { flex: none; display: flex; align-items: flex-end; justify-content: center; }
.serie-abajo  { flex: none; display: flex; align-items: flex-start; justify-content: center;
                border-top: 1px solid rgba(255,255,255,.55); }
.serie-barra { width: 62%; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.92); }
.serie-barra.baja { border-radius: 0 0 4px 4px; background: rgba(255,255,255,.5); }
/* El mes que aún no tiene nada cargado. Rayado y no vacío: un hueco se lee como
   «cero» y lo que pasa es que todavía no hay dato. */
.serie-barra.vacia { width: 62%; height: 100%; border-radius: 4px;
                     background: repeating-linear-gradient(135deg,
                     rgba(255,255,255,.16) 0 5px, transparent 5px 10px); }
.serie-pies { display: flex; gap: var(--e-3); }
.serie-pie { flex: 1; font-size: 11.5px; color: rgba(255,255,255,.85); text-align: center;
             margin-top: 6px; min-width: 0; }
.serie-pie b { display: block; font-weight: 650; color: #fff; font-size: 12px; }

/* ── La cifra con su variación y su chispa ──────────────────────────────────
   La chispa son tres meses, no un adorno: sin ella el número dice cuánto y no
   dice hacia dónde. La última barra va destacada porque es el mes del que habla
   la cifra. */
.cifra-var { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.cifra-var .flecha { font-weight: 700; margin-right: 4px; }
/* La flecha se pinta por lo que SIGNIFICA, no por su dirección: un costo que
   sube es malo y una utilidad que sube es buena, y las dos son la misma flecha.
   Quien llama decide el tono; la clase solo pinta. */
.flecha.bien { color: var(--green); }
.flecha.mal  { color: var(--red); }
.flecha.neutra { color: var(--muted); }
.chispa { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: var(--e-2); }
.chispa i { flex: 1; background: var(--border); border-radius: 2px 2px 0 0; min-height: 2px; }
.chispa i.ahora  { background: var(--brand); }
.chispa i.gana   { background: var(--green); }
.chispa i.pierde { background: var(--red-line); }
.chispa i.pierde.ahora { background: var(--red); }
.chispa-rot { font-size: 10.5px; color: var(--muted); margin-top: 4px; }

/* ── Obra por obra: dos barras a la misma escala ────────────────────────────
   Facturado y costo, una encima de otra y con el MISMO metro en todas las
   filas. Escalar cada fila a su propio máximo es la trampa clásica: la obra que
   más pierde se vería igual de larga que la que más gana. */
.par { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.par i { display: block; height: 7px; border-radius: var(--r-pill); }
.par .entra { background: var(--serie-entra); }
.par .sale  { background: var(--serie-sale); }
.leyenda { display: flex; gap: var(--e-3); flex-wrap: wrap; font-size: 12px;
           color: var(--text2); margin-top: var(--e-3); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.punto.entra { background: var(--serie-entra); }
.punto.sale  { background: var(--serie-sale); }
/* Cuántos asuntos tiene un área, en su cabecera. El número es lo que hace que la
   tarjeta se pueda comparar con la de al lado sin contar renglones. */
.area-cuenta { margin-left: auto; font-size: 12px; font-weight: 650;
               padding: 3px 10px; border-radius: var(--r-pill);
               background: var(--surface2); color: var(--text2); }
.area.critico  .area-cuenta { background: var(--red-soft);    color: var(--red); }
.area.atencion .area-cuenta { background: var(--yellow-soft); color: var(--yellow); }
.deja { font-weight: 700; font-variant-numeric: tabular-nums; }
.deja.bien { color: var(--green); }
.deja.mal  { color: var(--red); }

/* ── Lo que está al día: una línea, no seis tarjetas ────────────────────────
   Tres áreas sin nada que atender ocupaban 700 px de blanco cada una porque la
   rejilla iguala la altura de la fila. Lo que no tiene nada que decir se dice
   en un renglón. */
.areas-ok {
  background: var(--surface); border-radius: var(--r-l); box-shadow: var(--alto-1);
  padding: var(--e-3) var(--e-4); display: flex; gap: var(--e-4); flex-wrap: wrap;
  align-items: center; margin-top: var(--e-3);
}
.areas-ok-rot { font-size: 13px; color: var(--muted); }
.areas-ok a { font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none;
              display: inline-flex; align-items: center; gap: 7px; }
.areas-ok a:hover { color: var(--brand); }

/* ── Las dos series por mes, y el gasto por tipo ────────────────────────────
   Los colores son los de `--serie-entra` / `--serie-sale`: no son el semáforo
   —no hay nada bueno ni malo en facturar o en gastar— y no son el color de la
   empresa, que en esta pantalla ya significa «el mes del que hablamos». */
.gr2 { display: flex; align-items: flex-end; gap: var(--e-4); height: 180px;
       padding-top: var(--e-2); border-bottom: 1px solid var(--border); }
.gr2-mes { flex: 1; display: flex; flex-direction: column; align-items: center;
           gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.gr2-par { display: flex; align-items: flex-end; gap: 6px; width: 100%; height: 100%;
           justify-content: center; }
.gr2-par i { width: 26px; max-width: 40%; border-radius: 4px 4px 0 0; }
.gr2-par i.entra { background: var(--serie-entra); }
.gr2-par i.sale  { background: var(--serie-sale); }
.gr2-rot { font-size: 12px; color: var(--text2); }

.tipo { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--e-3);
        align-items: baseline; padding: var(--e-2) 0; }
.tipo-nom { font-size: 13.5px; }
.tipo-val { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tipo-riel { grid-column: 1 / -1; height: 8px; border-radius: var(--r-pill);
             background: var(--surface2); overflow: hidden; }
.tipo-riel i { display: block; height: 100%; background: var(--serie-sale);
               border-radius: var(--r-pill); }

/* ── El deudor, con su nombre y su antigüedad ───────────────────────────────
   Un total no se puede llamar por teléfono: aquí van los nombres. */
.deudor { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 0;
          border-top: 1px solid var(--border); }
.deudor:first-of-type { border-top: none; padding-top: 0; }
.deudor-nom { font-weight: 650; }
.deudor-sub { font-size: 12.5px; color: var(--muted); }
.deudor-monto { margin-left: auto; text-align: right; }
.deudor-monto b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Lo que el sistema todavía no puede dibujar, dicho en su sitio. Va en ámbar y
   no en rojo: no hay nada roto, falta un dato que llegará solo. */
.falta-dato {
  background: var(--surface); border-radius: var(--r-l); box-shadow: var(--alto-1);
  padding: var(--e-3) var(--e-4); font-size: 13px; color: var(--text2);
  border-left: 3px solid var(--yellow);
}
.falta-dato b { color: var(--text); }

/* La ayuda que explica un bloque, al PIE y no encima. Cuatro líneas de explicación
   antes del dato dejan el dato debajo del pliegue: se lee cuando hace falta, no
   siempre. Separada por una línea para que no se confunda con contenido. */
.bloque-nota-pie {
  margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-4) 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}

/* Dos datos en una celda, uno debajo del otro. `cifra-sub` es en línea —así lo
   necesita el resto del sistema—, y pegado a un número daba «#PUERT214-3
   2026-07-21»: el ojo tenía que separar dónde acababa uno y empezaba el otro. */
.dato-apilado .cifra-sub { display: block; margin-top: 2px; }

/* ── Una lista larga que no puede estirar la pantalla ──────────────────────
   Cincuenta y un recibos hacían una pantalla de casi 12.000 px: el 80 % era esta
   tabla, y todo lo demás quedaba encima de un scroll interminable. Con quince
   filas a la vista y el resto adentro, la pantalla vuelve a medir lo que se puede
   recorrer, y el buscador de arriba sigue mirando TODAS — no solo las visibles.

   En el teléfono se desactiva: allí la tabla se apila en tarjetas y un scroll
   dentro de otro scroll es una trampa para el pulgar. */
.lista-larga { max-height: 720px; overflow-y: auto; }
@media (max-width: 860px) { .lista-larga { max-height: none; overflow-y: visible; } }


/* ── Permisos: una fila por permiso, una columna por perfil ────────────────
   La cabecera de cada perfil lleva su nombre y, debajo, qué hace ese perfil.
   Sin la segunda línea, «Supervisor» y «Empleado» son dos palabras que el dueño
   tiene que interpretar justo cuando está repartiendo autoridad. */
/* La columna necesita ancho propio: sin él, la celda se encoge a la casilla y la
   descripción del perfil se sale por los lados y se pisa con la de al lado. */
/* La aclaración de un bloque «liso» —los que traen tabla dentro— necesita el
   margen lateral que la tabla ya lleva por su cuenta. */
.bloque-sub-liso { padding: 0 var(--e-4); }
.col-perfil { text-align: center; width: 190px; }
.col-perfil span { display: block; font-weight: 400; text-transform: none;
                   letter-spacing: 0; color: var(--muted); font-size: 11px;
                   line-height: 1.4; margin-top: 4px; white-space: normal; }

/* ══════════════════════════════════════════════════════════════════════════
   PIEL — el lenguaje visual del rediseño

   Todo lo de aquí abajo vive bajo `.piel`. Una plantilla se pasa al lenguaje
   nuevo poniendo `class="piel"` en su contenedor; hasta que lo haga, no le
   cambia nada. Es lo que permite migrar pantalla por pantalla sin romper las
   que todavía no se han tocado.

   Las fichas que ya existían arriba con otro valor —sombras, radios— NO se
   redefinen en `:root`: eso repintaría la aplicación entera de golpe. Van
   dentro de `.piel`, y solo aplican donde el lenguaje nuevo esté puesto.

   Generado desde `docs/maquetas/lenguaje.css`. No se edita a mano.
   ══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Superficies: cuatro, no una ─────────────────────────────────────── */
  --lienzo-a:  #EFF2F8;   /* el fondo, arriba  */
  --lienzo-b:  #E6EAF3;   /* el fondo, abajo — un degradado casi invisible
                             que le da a la tarjeta algo sobre qué flotar */
  --tarjeta:   #FFFFFF;
  --ficha:     #F5F7FC;   /* la pieza DENTRO de una tarjeta: sin sombra */
  --linea:     #E3E8F2;
  --tinta:     #0F1826;   /* el material oscuro: la respuesta de la pantalla */
  --tinta-2:   #1E2A44;

  --texto:     #0E1726;
  --texto-2:   #47566E;
  --apagado:   #7C8AA0;

  /* ══ EL SEMÁFORO Y LAS SERIES ═════════════════════════════════════════
     Tres paletas. El SIGNIFICADO no cambia nunca —rojo es riesgo, ámbar es
     atención, lo bueno es lo bueno— lo que cambia es el tono. Todas están
     medidas: los colores que llevan texto pasan de 4.5:1 sobre blanco.

     Por defecto va «Coral y turquesa». El par rojo-verde de toda la vida es
     justo el que no distingue una de cada doce personas; coral y turquesa
     se separan también en claridad, así que se ven aunque no se vea el
     color. Es más moderno Y más legible, no una cosa a costa de la otra. */

  /* ── Coral y turquesa (por defecto) ── */
  --rojo:   #D8344A;  --rojo-suave:  #FDEDEF;  --rojo-line:  #F6C9D0;
  --ambar:  #B45309;  --ambar-suave: #FDF2E3;  --ambar-line: #F0DCB6;
  --verde:  #0C7E71;  --verde-suave: #E1F4F1;  --verde-line: #B9E3DC;  --violeta: #6D28D9;
  --violeta-suave: #F0E9FD;  --violeta-line: #D7C7F7;

  /* Las series de los gráficos NO son semáforo: facturar no es bueno ni
     gastar es malo. Por eso tienen su propia familia, con la misma
     saturación entre ellas para que ninguna grite más que las otras. */
  --s1: #FF8A5B;   /* coral claro   */
  --s2: #FFC24B;   /* ámbar dorado  */
  --s3: #4FC3B4;   /* turquesa      */
  --s4: #8B93F8;   /* azul lila     */

  /* Sobre la tarjeta oscura hacen falta versiones más claras: los tonos de
     texto sobre blanco no llegan al contraste mínimo sobre tinta. */
  --mal-tinta:  #FF8E9B;
  --bien-tinta: #5EE0C8;
  --ia-tinta:   #DCCDFF;

  /* ── La marca de la empresa. SOLO acciones y menú activo. ─────────────
     El azul de SKY OS, que es con el que nace toda empresa. Además de que
     el naranja se veía mal, se peleaba con el ámbar del semáforo: los dos
     eran el mismo color caliente y uno de ellos significaba «atención».
     El azul no compite con nada del semáforo. */
  --marca:        #1D4ED8;   /* 8.1:1 sobre blanco */
  --marca-fuerte: #2563EB;
  --marca-suave:  rgba(37,99,235,.10);

  /* ── Espacio: la rejilla de 8, la de siempre ─────────────────────────── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:40px; --e7:64px;

  --lateral: 236px;
  --ancho:   1120px;

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --resorte: cubic-bezier(.32,.72,0,1);   /* casi crítico: llega y se queda */
  --salida:  cubic-bezier(.4,0,.6,1);
}

/* `.piel` es además el CONTENEDOR contra el que miden las reglas responsivas.
   Sin esto, todas las `@container` de abajo no se cumplen nunca y la pantalla
   se queda con el diseño de escritorio en cualquier tamaño. */
.piel{ container-type:inline-size; container-name:piel }

/* Las 11 fichas que sí pisarían a las de arriba */
.piel {

  --purple: #6D28D9;  --purple-soft: #F0E9FD;

  /* ── Curva ───────────────────────────────────────────────────────────── */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px; --r-pill:999px;

  /* ── Altura: la jerarquía es sombra, nunca borde ──────────────────────
     Dos sombras por nivel: una corta y dura (el contacto con el suelo) y
     una larga y difusa (la luz ambiente). Una sola sombra se ve plana. */
  --alto-0: 0 1px 2px rgba(15,24,38,.05);
  --alto-1: 0 1px 2px rgba(15,24,38,.05), 0 6px 16px -6px rgba(15,24,38,.10);
  --alto-2: 0 2px 4px rgba(15,24,38,.06), 0 16px 32px -10px rgba(15,24,38,.16);
  --alto-3: 0 8px 20px rgba(15,24,38,.10), 0 36px 64px -16px rgba(15,24,38,.30);
}


/* ══ TIPOGRAFÍA ═════════════════════════════════════════════════════════
   El arreglo grande: el interletrado cambia con el tamaño. Lo grande se
   aprieta (si no, las letras se separan solas al crecer); lo pequeño se
   abre un pelo. Un solo letter-spacing para todo está mal en alguna parte. */
.piel .cifra-xl { font:700 46px/1.0 var(--fuente); letter-spacing:-.035em; font-variant-numeric:tabular-nums }

.piel .cifra-l { font:650 30px/1.05 var(--fuente); letter-spacing:-.028em; font-variant-numeric:tabular-nums }

.piel .cifra-m { font:600 20px/1.2 var(--fuente); letter-spacing:-.018em; font-variant-numeric:tabular-nums }

.piel .resp { font:600 25px/1.2 var(--fuente); letter-spacing:-.021em }

.piel .titulo { font:600 17px/1.35 var(--fuente); letter-spacing:-.012em }

.piel .cuerpo { font:400 15px/1.5 var(--fuente) }

.piel .nota { font:400 13px/1.45 var(--fuente); letter-spacing:.004em; color:var(--apagado) }

.piel .etiqueta { font:500 13px/1.3 var(--fuente); letter-spacing:.004em; color:var(--texto-2) }


/* ══ ESTRUCTURA ═════════════════════════════════════════════════════════ */
.piel .app { display:flex; min-height:100vh; background:linear-gradient(175deg,var(--lienzo-a),var(--lienzo-b) 70%) }


/* ── Barra lateral ─────────────────────────────────────────────────────── */
.piel .lateral {
  width:var(--lateral); flex:0 0 var(--lateral);
  background:var(--tarjeta); border-right:1px solid var(--linea);
  padding:var(--e5) 0; display:flex; flex-direction:column; gap:var(--e5);
  position:sticky; top:0; height:100vh; overflow:auto;
}

.piel .marca-logo { padding:0 var(--e5); font:700 19px/1 var(--fuente); letter-spacing:-.02em }

.piel .marca-logo em { font-style:normal; color:var(--marca) }

.piel .empresa { display:flex; align-items:center; gap:var(--e3); padding:0 var(--e5) }

.piel .empresa .av {
  width:32px;height:32px;border-radius:var(--r-s);flex:0 0 32px;
  background:linear-gradient(150deg,var(--marca-fuerte),var(--marca));
  color:#fff;display:grid;place-items:center;font:600 14px/1 var(--fuente);
  box-shadow:var(--alto-0);
}

.piel .empresa b { font:600 14px/1.3 var(--fuente); display:block }

.piel .empresa a { font-size:12.5px; color:var(--marca); text-decoration:none }

.piel .empresa a:hover { text-decoration:underline }

.piel .grupo { display:flex; flex-direction:column; gap:1px; padding:0 var(--e3) }

.piel .grupo h6 { font:600 11px/1 var(--fuente); letter-spacing:.09em; text-transform:uppercase;
           color:var(--apagado); padding:0 var(--e3) var(--e2); margin-top:var(--e2) }

.piel .nav {
  display:flex; align-items:center; gap:var(--e3);
  padding:9px var(--e3); border-radius:var(--r-s);
  color:var(--texto-2); text-decoration:none; font:500 14.5px/1 var(--fuente);
  transition:background 140ms var(--salida), color 140ms var(--salida);
}

.piel .nav svg { flex:0 0 20px; opacity:.75 }

.piel .nav:hover { background:var(--ficha); color:var(--texto) }

.piel .nav.on { background:var(--marca-suave); color:var(--marca); font-weight:600 }

.piel .nav.on svg { opacity:1 }

/* El punto de estado en el menú: el semáforo llega hasta la navegación,
   así sabes qué área está mal sin entrar. */
.piel .punto { margin-left:auto; width:7px; height:7px; border-radius:50% }

.piel .punto.r { background:var(--rojo) }

.piel .punto.a { background:var(--ambar) }

.piel .pie-lat { margin-top:auto; padding:0 var(--e3); display:flex; flex-direction:column; gap:1px }

.piel .lienzo { flex:1; min-width:0; container-type:inline-size }

.piel .centro { max-width:var(--ancho); margin:0 auto; padding:0 var(--e6) var(--e7) }


/* Cabecera de cristal: el contenido pasa POR DEBAJO, no queda cortado por
   una franja opaca. Es lo que más rápido hace que algo se sienta hecho. */
.piel .cabecera {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--e4);
  padding:var(--e5) var(--e6);
  max-width:var(--ancho); margin:0 auto;
  background:rgba(243,245,250,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
}

.piel .cabecera::after { /* el borde no es una línea: es un desvanecido */
  content:""; position:absolute; left:0; right:0; bottom:-24px; height:24px;
  background:linear-gradient(rgba(240,243,249,.7),rgba(240,243,249,0)); pointer-events:none;
}

.piel .cabecera h1 { font:650 27px/1.1 var(--fuente); letter-spacing:-.026em }

.piel .cabecera .fecha { color:var(--apagado); font-size:13px; margin-top:3px }

.piel .cabecera .acciones { margin-left:auto; display:flex; gap:var(--e2) }


/* ══ BOTONES ════════════════════════════════════════════════════════════ */
.piel .btn {
  display:inline-flex; align-items:center; gap:var(--e2);
  height:38px; padding:0 var(--e4); border-radius:var(--r-pill);
  font:550 14px/1 var(--fuente); letter-spacing:-.004em;
  border:1px solid var(--linea); background:var(--tarjeta); color:var(--texto);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  box-shadow:var(--alto-0);
  transition:transform 110ms var(--salida), box-shadow 160ms var(--salida),
             background 140ms var(--salida);
}

.piel .btn:hover { box-shadow:var(--alto-1); transform:translateY(-1px) }

/* La respuesta va en el PULSAR, no en el soltar. */
.piel .btn:active { transform:scale(.975) translateY(0); box-shadow:var(--alto-0); transition-duration:60ms }

.piel .btn.pri { background:var(--marca-fuerte); border-color:transparent; color:#fff;
          box-shadow:0 1px 2px rgba(15,24,38,.10), 0 6px 14px -6px rgba(37,99,235,.55) }

.piel .btn.pri:hover { box-shadow:0 2px 4px rgba(15,24,38,.12), 0 12px 22px -8px rgba(37,99,235,.6) }

.piel .btn.claro { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.20); color:#fff;
            backdrop-filter:blur(8px); box-shadow:none }

.piel .btn.claro:hover { background:rgba(255,255,255,.22) }

.piel .btn.claro.pri { background:#fff; color:var(--tinta); border-color:transparent }

.piel .btn.claro.pri:hover { background:#fff }

.piel .btn.chico { height:32px; padding:0 var(--e3); font-size:13px }


/* Un botón que no se puede pulsar tiene que PARECER que no se puede pulsar,
   y decir por qué al lado. Apagarlo sin explicar es peor que no tenerlo. */
.piel .btn[disabled], .piel .btn.mudo {
  background:var(--ficha); color:var(--apagado); border-color:var(--linea);
  box-shadow:none; cursor:not-allowed; pointer-events:none;
}


/* ══ EL PORTÓN — un bloque con una acción grande y su razón ═════════════
   Para los momentos de "esto se hace ahora, o no se hace": cerrar un
   periodo, archivar una obra. La razón va PEGADA al botón, no en un aviso
   al otro lado de la pantalla. */
.piel .porton {
  background:var(--tarjeta); border-radius:var(--r-l); box-shadow:var(--alto-1);
  padding:var(--e5); display:flex; align-items:center; gap:var(--e5); flex-wrap:wrap;
}

.piel .porton .info { flex:1; min-width:220px }

.piel .porton .info b { font:600 17px/1.3 var(--fuente); letter-spacing:-.012em; display:block }

.piel .porton .info .nota { margin-top:var(--e1) }

.piel .porton .cifra-m { font-variant-numeric:tabular-nums }

.piel .porton .lado { display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap }

.piel .porton .razon {
  display:flex; align-items:flex-start; gap:var(--e2);
  background:var(--ambar-suave); color:var(--ambar);
  padding:var(--e3) var(--e4); border-radius:var(--r-m);
  font:400 13.5px/1.45 var(--fuente); max-width:420px;
}

.piel .porton .razon svg { flex:0 0 16px; margin-top:1px }


/* ══ LA RESPUESTA — el material oscuro ═══════════════════════════════════
   Un solo elemento en toda la pantalla tiene contraste de verdad. Gana la
   mirada sin gritar, y no depende del color de la empresa ni del ánimo del
   mes: la pantalla no se vuelve roja entera porque el mes salió mal. */
.piel .respuesta {
  position:relative; z-index:10;
  border-radius:var(--r-xl); padding:var(--e6);
  background:radial-gradient(120% 140% at 8% 0%, var(--tinta-2), var(--tinta) 62%);
  color:#fff; box-shadow:var(--alto-3);
  /* la luz que engancha en el filo de arriba: eso es lo que lo hace material */
  box-shadow:var(--alto-3), inset 0 1px 0 rgba(255,255,255,.12);
  margin-top:var(--e5);
}

.piel .respuesta .fondo { position:absolute; inset:0; opacity:.5; pointer-events:none; border-radius:inherit;
  background:radial-gradient(60% 120% at 100% 0%, rgba(37,99,235,.30), transparent 60%) }

.piel .respuesta > * { position:relative }

.piel .respuesta .arriba { display:flex; align-items:center; gap:var(--e2); margin-bottom:var(--e4); flex-wrap:wrap }

.piel .respuesta .arriba .pastilla { white-space:nowrap }

.piel .respuesta .cifra-xl { display:block; margin-bottom:0; font-size:66px }

.piel .respuesta .apoyo { color:rgba(255,255,255,.72); font-size:15px; max-width:46ch }

.piel .respuesta .apoyo b { color:#fff; font-weight:600 }

.piel .respuesta .acciones { display:flex; gap:var(--e2); margin-top:var(--e6); flex-wrap:wrap }


/* Dos columnas: a la izquierda la conclusión, a la derecha de dónde sale.
   El vacío de la derecha se llena con dato, no con adorno. */
.piel .respuesta .reparto { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--e7); align-items:center }

.piel .respuesta .izq { display:flex; flex-direction:column; min-width:0 }


/* Material dentro del material: una capa más clara sobre la tinta. Nunca al
   revés (translúcido sobre translúcido se vuelve ilegible). */
.piel .desglose {
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-l); padding:var(--e5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.piel .desglose h3 { font:600 12px/1 var(--fuente); letter-spacing:.09em; text-transform:uppercase;
              color:rgba(255,255,255,.45); margin-bottom:var(--e4) }

.piel .dl { display:flex; align-items:baseline; gap:var(--e3); padding:var(--e3) 0 }

.piel .dl + .dl { border-top:1px solid rgba(255,255,255,.07) }

.piel .dl i { width:8px; height:8px; border-radius:2px; flex:0 0 8px; align-self:center }

.piel .dl span { flex:1; min-width:0; font-size:14px; color:rgba(255,255,255,.72) }

.piel .dl b { font:600 15.5px/1 var(--fuente); letter-spacing:-.015em; font-variant-numeric:tabular-nums; white-space:nowrap }

.piel .dl.total { border-top:1px solid rgba(255,255,255,.20); margin-top:var(--e2); padding-top:var(--e4) }

.piel .dl.total span { color:#fff; font-weight:550; font-size:15px }

.piel .dl.total b { font-size:19px; color:#FF9E7A }

.piel .desglose .barra { margin:0 0 var(--e4) }


/* La barra que sí dice algo: cuánto de lo facturado se lo comió cada cosa. */
.piel .barra { display:flex; height:8px; border-radius:var(--r-pill); overflow:hidden;
        background:rgba(255,255,255,.13); margin:var(--e5) 0 var(--e3) }

.piel .barra i { display:block; height:100%; transform-origin:left;
          animation:piel-llenar 720ms var(--resorte) both }

.piel .barra i:nth-child(1) { animation-delay:120ms }

.piel .barra i:nth-child(2) { animation-delay:200ms }

.piel .barra i:nth-child(3) { animation-delay:280ms }

@keyframes piel-llenar { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.piel .leyenda { display:flex; gap:var(--e5); flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.66) }

.piel .leyenda span { display:flex; align-items:center; gap:7px }

.piel .leyenda i { width:8px; height:8px; border-radius:2px }


/* ══ EL SELECTOR DE RANGO ═══════════════════════════════════════════════
   El periodo que estás mirando no es un rótulo: es un control. Se pulsa y
   se cambia. Sirve igual en la tarjeta oscura y sobre fondo claro. */
.piel .rango { position:relative; display:inline-block }

.piel .rango > summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:var(--e2);
  font:600 12.5px/1 var(--fuente); padding:6px 10px 6px 9px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); color:#fff; white-space:nowrap;
  transition:background 140ms var(--salida);
}

.piel .rango > summary::-webkit-details-marker { display:none }

.piel .rango > summary:hover { background:rgba(255,255,255,.24) }

.piel .rango > summary .chevron { transition:transform 240ms var(--resorte); opacity:.7 }

.piel .rango[open] > summary .chevron { transform:rotate(180deg) }

/* Sobre fondo claro (fuera de la tarjeta oscura) */
.piel .rango.claro > summary { background:var(--ficha); color:var(--texto); border:1px solid var(--linea) }

.piel .rango.claro > summary:hover { background:var(--tarjeta); box-shadow:var(--alto-0) }

.piel .panel-rango {
  position:absolute; top:calc(100% + var(--e2)); left:0; z-index:60;
  width:330px; max-width:calc(100cqw - var(--e5));
  background:var(--tarjeta); border-radius:var(--r-l); box-shadow:var(--alto-3);
  padding:var(--e4); color:var(--texto);
  animation:piel-desplegar 260ms var(--resorte) both;
}

.piel .panel-rango h4 { font:600 11.5px/1 var(--fuente); letter-spacing:.08em; text-transform:uppercase;
                 color:var(--apagado); margin-bottom:var(--e3) }

.piel .panel-rango .opciones { display:grid; grid-template-columns:1fr 1fr; gap:var(--e2) }

.piel .panel-rango .opciones button {
  font:500 13.5px/1 var(--fuente); text-align:left; cursor:pointer;
  padding:10px var(--e3); border-radius:var(--r-s);
  border:1px solid var(--linea); background:var(--ficha); color:var(--texto-2);
  transition:background 130ms var(--salida), color 130ms var(--salida), border-color 130ms var(--salida);
}

.piel .panel-rango .opciones button:hover { background:var(--tarjeta); color:var(--texto); box-shadow:var(--alto-0) }

.piel .panel-rango .opciones button.on {
  background:var(--marca-suave); border-color:transparent; color:var(--marca); font-weight:600 }

.piel .panel-rango .medida { margin-top:var(--e4); padding-top:var(--e4); border-top:1px solid var(--linea) }

.piel .panel-rango .fechas { display:flex; gap:var(--e2); align-items:flex-end }

.piel .panel-rango label { flex:1; min-width:0; font:400 12px/1 var(--fuente); color:var(--apagado);
                    display:flex; flex-direction:column; gap:6px }

.piel .panel-rango input {
  font:400 13.5px/1 var(--fuente); color:var(--texto); width:100%;
  height:36px; padding:0 var(--e2); border-radius:var(--r-s);
  border:1px solid var(--linea); background:var(--ficha); outline:none;
}

.piel .panel-rango input:focus { border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-suave); background:var(--tarjeta) }

.piel .panel-rango .medida .btn { height:36px }

@container (max-width: 640px){
  .piel .panel-rango { width:min(330px, calc(100cqw - var(--e5))) }
  .piel .panel-rango .opciones { grid-template-columns:1fr }
}


/* ══ LAS TRES CIFRAS DE APOYO ════════════════════════════════════════════
   Fichas, no tarjetas: pesan menos que la respuesta a propósito. */
.piel .cifras { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e4); margin-top:var(--e5) }

.piel .ficha {
  display:block;
  background:var(--tarjeta); border-radius:var(--r-l); padding:var(--e5);
  box-shadow:var(--alto-0); border:1px solid rgba(227,232,242,.7);
  transition:box-shadow 200ms var(--salida), transform 200ms var(--resorte);
}

.piel .ficha:hover { box-shadow:var(--alto-1); transform:translateY(-2px) }

.piel .ficha .etiqueta { display:block; margin-bottom:var(--e3) }

.piel .ficha .cifra-l { display:block; margin-bottom:var(--e2) }

.piel .ficha .micro { height:4px; border-radius:var(--r-pill); background:var(--ficha); margin-top:var(--e4) }

.piel .ficha .micro i { display:block; height:100%; border-radius:inherit; background:var(--apagado);
                 transform-origin:left; animation:piel-llenar 700ms var(--resorte) 240ms both }


/* ══ GRÁFICOS ══════════════════════════════════════════════════════════
   Dibujados a mano con SVG y CSS: sin librerías. La regla no cambia — el
   dibujo lleva la información, el color sigue llevando el significado. Las
   dos series (naranja y ámbar) no son semáforo: facturar no es bueno ni
   gastar es malo, así que no pueden usar el rojo ni el verde. */

/* La rejilla del tablero: lo grande a la izquierda, la columna de cifras
   a la derecha. Por debajo de 900 la columna se va abajo. */
.piel .tablero-inicio { display:grid; grid-template-columns:1fr 336px; gap:var(--e4); align-items:start }

.piel .principal { display:flex; flex-direction:column; gap:var(--e4); min-width:0 }

.piel .principal .seccion { margin-top:0 }

.piel .columna { display:flex; flex-direction:column; gap:var(--e4) }

.piel .panel-g {
  background:var(--tarjeta); border-radius:var(--r-l); box-shadow:var(--alto-1);
  padding:var(--e5); border:1px solid rgba(227,232,242,.7);
}

.piel .panel-g > header { display:flex; align-items:baseline; gap:var(--e3); margin-bottom:var(--e5); flex-wrap:wrap }

.piel .panel-g > header h3 { font:600 16.5px/1.3 var(--fuente); letter-spacing:-.014em }

.piel .panel-g > header .nota { margin-left:auto }


/* ── Barras divergentes: lo que deja cada obra ──────────────────────────
   Una línea vertical marca el cero. A la izquierda lo que pierde, a la
   derecha lo que gana. Se lee de un golpe cuántas están de cada lado. */
.piel .divergente { display:flex; flex-direction:column; gap:var(--e3) }

.piel .divergente .fila-g { display:grid; grid-template-columns:92px 1fr 96px; align-items:center; gap:var(--e3) }

.piel .divergente .rotulo { font:600 13px/1 var(--fuente); letter-spacing:-.008em; color:var(--texto-2) }

.piel .divergente .pista { display:grid; grid-template-columns:var(--izq) var(--der); height:24px; position:relative }

.piel .divergente .pista::before {
  content:""; position:absolute; left:var(--izq); top:-3px; bottom:-3px;
  width:1px; background:var(--linea);
}

.piel .divergente .neg { display:flex; justify-content:flex-end }

.piel .divergente .pos { display:flex }

.piel .divergente .neg i { height:100%; border-radius:var(--r-s) 0 0 var(--r-s); background:var(--rojo);
                    width:var(--w); transform-origin:right; animation:piel-llenar 720ms var(--resorte) 160ms both }

.piel .divergente .pos i { height:100%; border-radius:0 var(--r-s) var(--r-s) 0; background:var(--verde);
                    width:var(--w); transform-origin:left; animation:piel-llenar 720ms var(--resorte) 160ms both }

.piel .divergente .valor { text-align:right; font:600 14px/1 var(--fuente); letter-spacing:-.014em;
                    font-variant-numeric:tabular-nums }

.piel .divergente .valor.mal { color:var(--rojo) }

.piel .divergente .valor.bien { color:var(--verde) }

.piel .divergente .eje { display:grid; grid-template-columns:92px 1fr 96px; gap:var(--e3);
                  margin-top:var(--e2); font-size:11.5px; color:var(--apagado) }

.piel .divergente .eje .marcas { display:grid; grid-template-columns:var(--izq) var(--der) }

.piel .divergente .eje .marcas span:last-child { text-align:left }


/* ── El anillo ─────────────────────────────────────────────────────────── */
.piel .anillo-caja { display:flex; flex-direction:column; align-items:stretch; gap:var(--e5) }

.piel .anillo { width:154px; height:154px; flex:0 0 154px; position:relative; margin:0 auto }

.piel .anillo svg { width:100%; height:100%; transform:rotate(-90deg) }

.piel .anillo circle { transition:stroke-dashoffset 700ms var(--resorte) }

.piel .anillo .centro {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:2px;
}

.piel .anillo .centro b { font:650 19px/1 var(--fuente); letter-spacing:-.028em; font-variant-numeric:tabular-nums }

.piel .anillo .centro span { font:400 11px/1.2 var(--fuente); color:var(--apagado) }

.piel .leyenda-v { display:flex; flex-direction:column; gap:var(--e3); flex:1; min-width:150px }

.piel .leyenda-v .li { display:flex; align-items:baseline; gap:var(--e2); font-size:13.5px; color:var(--texto-2) }

.piel .leyenda-v .li i { width:9px; height:9px; border-radius:2px; flex:0 0 9px; align-self:center }

.piel .leyenda-v .li b { margin-left:auto; font:600 14px/1 var(--fuente); letter-spacing:-.012em;
                  font-variant-numeric:tabular-nums; color:var(--texto) }


/* ── Barritas de una ficha ─────────────────────────────────────────────── */
.piel .barritas { display:flex; flex-direction:column; gap:9px; margin-top:var(--e4) }

.piel .barritas .b { display:grid; grid-template-columns:1fr 68px; align-items:center; gap:var(--e3) }

.piel .barritas .b .p { height:9px; border-radius:var(--r-pill); background:var(--ficha); overflow:hidden }

.piel .barritas .b .p i { display:block; height:100%; border-radius:inherit; width:var(--w);
                   transform-origin:left; animation:piel-llenar 700ms var(--resorte) 220ms both }

.piel .barritas .b .n { font:400 11.5px/1 var(--fuente); color:var(--apagado); white-space:nowrap }

.piel .barritas .b .v { text-align:right; font:600 12.5px/1 var(--fuente); letter-spacing:-.012em;
                 font-variant-numeric:tabular-nums }

.piel .fil { display:flex; justify-content:space-between; align-items:baseline; gap:var(--e2); margin-bottom:3px }


/* ── Barra de proporción, gruesa ───────────────────────────────────────── */
.piel .proporcion { height:14px; border-radius:var(--r-pill); background:var(--ficha); overflow:hidden; margin-top:var(--e4) }

.piel .proporcion i { display:block; height:100%; border-radius:inherit; width:var(--w);
               transform-origin:left; animation:piel-llenar 720ms var(--resorte) 200ms both }

@container (max-width: 900px){
  .piel .tablero-inicio { grid-template-columns:1fr }
  .piel .columna { display:grid; grid-template-columns:repeat(2,1fr) }
  .piel .anillo-caja { flex-direction:row; align-items:center }
  .piel .anillo { margin:0 }
}

@container (max-width: 640px){
  .piel .columna { grid-template-columns:1fr }
  .piel .divergente .fila-g { grid-template-columns:78px 1fr 78px; gap:var(--e2) }
  .piel .divergente .rotulo { font-size:12px }
  .piel .divergente .valor { font-size:12.5px }
  .piel .divergente .eje { display:none }
  .piel .anillo-caja { gap:var(--e4) }
  .piel .anillo { width:112px; height:112px; flex:0 0 112px }
}


/* ══ SECCIONES ══════════════════════════════════════════════════════════ */
.piel .seccion { margin-top:var(--e7) }

.piel .seccion > header { display:flex; align-items:baseline; gap:var(--e3); margin-bottom:var(--e4) }

.piel .seccion > header h2 { font:600 19px/1.2 var(--fuente); letter-spacing:-.018em }

.piel .seccion > header .nota { margin-left:auto }

.piel .cuenta { font:600 13px/1 var(--fuente); padding:5px 9px; border-radius:var(--r-pill);
         background:var(--rojo-suave); color:var(--rojo) }

.piel .cuenta.a { background:var(--ambar-suave); color:var(--ambar) }


/* ══ LA LISTA DE ASUNTOS ═════════════════════════════════════════════════
   Una sola lista por urgencia, no seis tarjetas iguales. Cada fila tiene
   UNA acción, y el área va como etiqueta discreta, no como caja aparte. */
.piel .lista { background:var(--tarjeta); border-radius:var(--r-l); box-shadow:var(--alto-1); overflow:hidden }

.piel .fila {
  display:flex; align-items:center; gap:var(--e4);
  padding:var(--e4) var(--e5); border-top:1px solid var(--linea);
  transition:background 130ms var(--salida);
}

.piel .fila:first-child { border-top:0 }

.piel .fila:hover { background:var(--ficha) }

.piel .fila .marca-estado { width:8px; height:8px; border-radius:50%; flex:0 0 8px }

.piel .fila .marca-estado.r { background:var(--rojo); box-shadow:0 0 0 4px var(--rojo-suave) }

.piel .fila .marca-estado.a { background:var(--ambar); box-shadow:0 0 0 4px var(--ambar-suave) }

.piel .fila .txt { flex:1; min-width:0 }

.piel .fila .txt > b { font:550 15px/1.4 var(--fuente); letter-spacing:-.006em; display:block }

.piel .fila .txt .nota b { font-weight:600; color:var(--texto-2) }

.piel .fila .txt .nota { margin-top:2px }

.piel .fila .area { display:inline-block; font:500 11.5px/1 var(--fuente); letter-spacing:.05em; text-transform:uppercase;
             color:var(--apagado); background:var(--ficha); padding:4px 8px;
             border-radius:var(--r-pill); white-space:nowrap }

.piel .fila .dato { font:600 16px/1 var(--fuente); letter-spacing:-.018em; font-variant-numeric:tabular-nums;
             white-space:nowrap }

.piel .fila .dato.r { color:var(--rojo) }

.piel .fila .btn { flex:0 0 auto }


/* El pliegue: lo de esta semana llega recogido en una línea. */
.piel .pliegue { margin-top:var(--e4) }

.piel .pliegue summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--e3);
  padding:var(--e4) var(--e5); border-radius:var(--r-l);
  background:var(--tarjeta); box-shadow:var(--alto-0); font:550 14.5px/1 var(--fuente);
  transition:box-shadow 160ms var(--salida);
}

.piel .pliegue summary::-webkit-details-marker { display:none }

.piel .pliegue summary:hover { box-shadow:var(--alto-1) }

.piel .pliegue summary .flecha { margin-left:auto; transition:transform 240ms var(--resorte); color:var(--apagado) }

.piel .pliegue[open] summary { border-radius:var(--r-l) var(--r-l) 0 0 }

.piel .pliegue[open] summary .flecha { transform:rotate(90deg) }

.piel .pliegue .lista { border-radius:0 0 var(--r-l) var(--r-l); box-shadow:var(--alto-1);
                 animation:piel-desplegar 300ms var(--resorte) both }

@keyframes piel-desplegar { from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }


/* ══ CONSUMO — cuánto lleva gastado una obra contra su presupuesto ═════
   La pista se escala al mayor de los dos (gastado o presupuesto), y una
   marca vertical dice dónde estaba el presupuesto. Así una obra pasada se
   ve pasada, en vez de quedarse clavada al 100% como si nada. */
.piel .consumo { background:var(--tarjeta); border-radius:var(--r-l); box-shadow:var(--alto-1); overflow:hidden }

.piel .consumo .obra { padding:var(--e5); border-top:1px solid var(--linea);
                transition:background 130ms var(--salida) }

.piel .consumo .obra:first-child { border-top:0 }

.piel .consumo .obra:hover { background:var(--ficha) }

.piel .consumo .cab { display:flex; align-items:baseline; gap:var(--e3); flex-wrap:wrap }

.piel .consumo .cab b { font:600 15.5px/1.3 var(--fuente); letter-spacing:-.01em }

.piel .consumo .cab .pastilla { margin-left:auto }

.piel .consumo .cab .pct { font:600 14px/1 var(--fuente); font-variant-numeric:tabular-nums;
                    letter-spacing:-.012em; color:var(--texto-2) }

.piel .consumo .nota { margin-top:3px }

.piel .consumo .pista {
  position:relative; height:10px; margin-top:var(--e3);
  border-radius:var(--r-pill); background:var(--ficha);
}

.piel .consumo .pista i {
  display:block; height:100%; border-radius:var(--r-pill);
  width:var(--llena); transform-origin:left;
  animation:piel-llenar 760ms var(--resorte) 200ms both;
}

/* La marca del presupuesto: dónde tendría que haberse parado. */
.piel .consumo .pista u {
  position:absolute; top:-4px; bottom:-4px; left:var(--presu);
  width:2px; border-radius:1px; background:var(--texto-2); opacity:.55;
}

.piel .consumo .pista u::after {
  content:attr(data-rotulo); position:absolute; left:50%; top:-17px;
  transform:translateX(-50%); white-space:nowrap;
  font:500 10.5px/1 var(--fuente); letter-spacing:.03em; color:var(--apagado);
}

/* Si la marca cae al final de la pista, el rótulo centrado se sale y se
   corta. Ahí se ancla por la derecha. */
.piel .consumo .pista u.fin::after { left:auto; right:0; transform:none }


/* ══ LA PREGUNTA — el único sitio donde manda el violeta ═══════════════
   SKY AI pregunta de una en una y enseña en qué se basa. Ninguna de las
   respuestas es «la principal»: si una se pinta más que las otras, la
   pregunta deja de ser una pregunta y pasa a ser una sugerencia. */
.piel .pregunta {
  background:var(--tarjeta); border-radius:var(--r-xl);
  box-shadow:var(--alto-2); overflow:hidden;
}

.piel .pregunta > header {
  display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
  padding:var(--e4) var(--e5); background:var(--violeta-suave);
}

.piel .pregunta > header .quien {
  display:flex; align-items:center; gap:7px;
  font:600 12px/1 var(--fuente); letter-spacing:.07em; text-transform:uppercase;
  color:var(--violeta);
}

.piel .pregunta > header .promesa { font-size:13px; color:var(--texto-2) }

.piel .pregunta > header .avance { margin-left:auto; display:flex; align-items:center; gap:var(--e3) }

.piel .pregunta > header .avance .nota { font-size:12.5px }

.piel .puntos { display:flex; gap:5px }

.piel .puntos i { width:7px; height:7px; border-radius:50%; background:var(--violeta-line, #D7C7F7); opacity:.5 }

.piel .puntos i.on { opacity:1; background:var(--violeta) }

.piel .pregunta .cuerpo { padding:var(--e5) }

.piel .pregunta .texto { font:500 19px/1.5 var(--fuente); letter-spacing:-.014em; color:var(--texto) }

.piel .pregunta .texto b { font-weight:650 }

.piel .pregunta .respuestas { display:flex; gap:var(--e2); flex-wrap:wrap; margin-top:var(--e5) }

.piel .pregunta .respuestas .btn { height:42px }


/* En qué me baso: la evidencia, con el mismo formato de dinero de siempre. */
.piel .base { margin-top:var(--e5); background:var(--ficha); border-radius:var(--r-m); padding:var(--e4) var(--e5) }

.piel .base h5 { font:600 11px/1 var(--fuente); letter-spacing:.09em; text-transform:uppercase;
          color:var(--apagado); margin-bottom:var(--e4) }

.piel .base .campos { display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:var(--e4) }

.piel .base dt { font:400 11.5px/1 var(--fuente); letter-spacing:.05em; text-transform:uppercase;
          color:var(--apagado); margin-bottom:6px }

.piel .base dd { font:600 15px/1.2 var(--fuente); letter-spacing:-.012em; font-variant-numeric:tabular-nums }

@container (max-width: 640px){
  .piel .pregunta .cuerpo { padding:var(--e4) }
  .piel .pregunta > header { padding:var(--e4) }
  .piel .pregunta .texto { font-size:17px }
  .piel .pregunta .respuestas { flex-direction:column; align-items:stretch }
  .piel .pregunta .respuestas .btn { justify-content:center }
  .piel .base { padding:var(--e4) }
  .piel .base .campos { grid-template-columns:1fr 1fr }
}


/* ══ EL TABLERO DE LA SEMANA ═══════════════════════════════════════════
   Una columna por día, no una rejilla de horas. En esta clase de negocio
   nadie agenda «de 9:15 a 10:45»: agenda «este día, esta persona, esta
   obra». La rejilla por horas es un reflejo de app de calendario, y es lo
   que hace que una semana vacía ocupe mil píxeles. */
.piel .tablero { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--e3) }

.piel .dia {
  background:var(--tarjeta); border-radius:var(--r-l); padding:var(--e4);
  box-shadow:var(--alto-0); border:1px solid rgba(227,232,242,.7);
  display:flex; flex-direction:column; gap:var(--e2); min-height:172px;
}

.piel .dia > header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--e2) }

.piel .dia .nombre { font:600 11px/1 var(--fuente); letter-spacing:.09em; text-transform:uppercase; color:var(--apagado) }

.piel .dia .num { font:650 19px/1 var(--fuente); letter-spacing:-.022em; font-variant-numeric:tabular-nums }

.piel .dia.hoy { box-shadow:var(--alto-1) }

.piel .dia.hoy .num { background:var(--tinta); color:#fff; border-radius:var(--r-s);
               padding:5px 8px; margin:-5px -4px -5px 0 }

.piel .dia.hoy .nombre { color:var(--texto-2) }

.piel .dia.pasado { background:var(--surface2, var(--ficha)); box-shadow:none }

.piel .dia.pasado .num, .piel .dia.pasado .nombre { opacity:.55 }


/* El hueco de un día sin nada: no es un espacio en blanco, es una invitación. */
.piel .dia .vacio {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--e2); text-align:center; padding:var(--e4) var(--e2);
  border:1.5px dashed var(--linea); border-radius:var(--r-m); color:var(--apagado);
  font:400 12.5px/1.4 var(--fuente);
}

.piel .dia .vacio .btn { height:30px; padding:0 var(--e3); font-size:12.5px }

.piel .dia.pasado .vacio { border-style:solid; border-color:transparent }


/* Una asignación: quién va a dónde. */
.piel .asignacion {
  display:flex; align-items:center; gap:var(--e2);
  background:var(--ficha); border-radius:var(--r-m); padding:10px var(--e3);
  font:500 13.5px/1.3 var(--fuente); color:var(--texto);
  border-left:3px solid var(--marca);
}

.piel .asignacion b { font-weight:600 }

.piel .asignacion .obra { margin-left:auto; font:600 12px/1 var(--fuente); color:var(--texto-2) }

@container (max-width: 900px){
  .piel .tablero { grid-template-columns:repeat(2,1fr) }
}

@container (max-width: 640px){
  .piel .tablero { grid-template-columns:1fr }
  .piel .dia { min-height:0 }
  .piel .dia .vacio { flex-direction:row; justify-content:space-between; text-align:left; padding:var(--e3) }
}


/* ══ TABLA — solo cuando hay que COMPARAR ═══════════════════════════════
   Seis columnas como mucho, números a la derecha con cifras tabulares, y en
   teléfono cada fila se convierte en una tarjeta. Una tabla que obliga a
   arrastrar de lado es una tabla que nadie lee. */
.piel .tabla-caja { background:var(--tarjeta); border-radius:var(--r-l); box-shadow:var(--alto-1); overflow:hidden }

.piel table.tabla { width:100%; border-collapse:collapse }

.piel .tabla th {
  font:600 11.5px/1 var(--fuente); letter-spacing:.08em; text-transform:uppercase;
  color:var(--apagado); text-align:left; padding:var(--e4) var(--e5);
  background:var(--ficha); border-bottom:1px solid var(--linea); white-space:nowrap;
}

.piel .tabla td { padding:var(--e4) var(--e5); border-top:1px solid var(--linea); font-size:14.5px; color:var(--texto-2) }

.piel .tabla tbody tr:first-child td { border-top:0 }

.piel .tabla th.num, .piel .tabla td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }

.piel .tabla td.num { color:var(--texto); font-weight:550; letter-spacing:-.012em }

.piel .tabla td.num.cero { color:var(--apagado); font-weight:400 }

.piel .tabla td.num.debe { color:var(--rojo); font-weight:600 }

.piel .tabla td.clave { font-weight:600; color:var(--texto); letter-spacing:-.008em }

.piel .tabla tbody tr { transition:background 130ms var(--salida) }

.piel .tabla tbody tr:hover { background:var(--ficha) }


/* ── Buscador y filtros de una tabla larga ─────────────────────────────── */
.piel .filtros { display:flex; gap:var(--e2); flex-wrap:wrap; padding:var(--e4) var(--e5);
          border-bottom:1px solid var(--linea); background:var(--tarjeta) }


/* ── Un campo con su rótulo encima ──────────────────────────────────────
   Existe para que ninguna plantilla vuelva a escribir `style=` para poner
   una etiqueta sobre un desplegable (R-UI-8). */
.piel .campo{ display:flex; flex-direction:column; gap:6px;
        font:400 12px/1 var(--fuente); color:var(--apagado) }
.piel .filtros.a-la-derecha{ justify-content:flex-end }
.piel .filtros.desnuda{ border:0; padding:0; background:none }

.piel .filtros input, .piel .filtros select {
  font:400 14px/1 var(--fuente); color:var(--texto);
  height:38px; padding:0 var(--e3); border-radius:var(--r-s);
  border:1px solid var(--linea); background:var(--ficha); outline:none;
  transition:border-color 140ms var(--salida), box-shadow 140ms var(--salida);
}

.piel .filtros input { flex:1; min-width:180px }

.piel .filtros input:focus, .piel .filtros select:focus {
  border-color:var(--brand, var(--marca)); box-shadow:0 0 0 3px var(--marca-suave); background:var(--tarjeta) }


/* ══ AL DÍA — una tira, no tres tarjetas vacías de 700 px ════════════════ */
.piel .aldia { display:flex; align-items:center; gap:var(--e4); flex-wrap:wrap;
        background:var(--tarjeta); border-radius:var(--r-l); padding:var(--e4) var(--e5);
        box-shadow:var(--alto-0) }

.piel .aldia .ok { display:flex; align-items:center; gap:var(--e2); font-size:14px; color:var(--texto-2);
            text-decoration:none; padding:6px 10px; border-radius:var(--r-pill);
            transition:background 130ms var(--salida) }

.piel .aldia .ok:hover { background:var(--ficha); color:var(--texto) }

.piel .aldia .ok svg { color:var(--verde) }

.piel .aldia .cabo { font-size:13px; color:var(--apagado); margin-right:auto }


/* ══ TUS ÁREAS — la navegación completa, en una fila ═════════════════════
   La información no se reduce: se ordena. Todo sigue a un toque. */
.piel .areas { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--e3) }

.piel .area-chip {
  display:flex; flex-direction:column; gap:var(--e2); text-decoration:none; color:inherit;
  background:var(--tarjeta); border-radius:var(--r-m); padding:var(--e4);
  box-shadow:var(--alto-0); border:1px solid rgba(227,232,242,.7);
  transition:transform 200ms var(--resorte), box-shadow 200ms var(--salida);
}

.piel .area-chip:hover { transform:translateY(-3px); box-shadow:var(--alto-2) }

.piel .area-chip:active { transform:scale(.98); transition-duration:70ms }

.piel .area-chip .top { display:flex; align-items:center; justify-content:space-between; color:var(--texto-2) }

.piel .area-chip b { font:600 14.5px/1.2 var(--fuente); letter-spacing:-.008em }

.piel .area-chip .nota { font-size:12.5px }

.piel .pastilla { font:600 11.5px/1 var(--fuente); padding:4px 8px; border-radius:var(--r-pill) }

/* ── Puente para las pastillas que genera JavaScript ────────────────────
   Varias pantallas crean pastillas desde el guion con los nombres de estado
   antiguos. Dentro del lenguaje nuevo tienen que verse igual que las demás,
   o la misma pantalla enseñaría dos diseños de la misma cosa. */
.piel .pastilla.ok      { background:var(--verde-suave); color:var(--verde) }
.piel .pastilla.atencion{ background:var(--ambar-suave); color:var(--ambar) }
.piel .pastilla.critico { background:var(--rojo-suave);  color:var(--rojo) }
.piel .pastilla.ia      { background:var(--violeta-suave); color:var(--violeta) }

.piel .pastilla.r { background:var(--rojo-suave); color:var(--rojo) }

.piel .pastilla.a { background:var(--ambar-suave); color:var(--ambar) }

.piel .pastilla.v { background:var(--verde-suave); color:var(--verde) }

.piel .pastilla.ia { background:var(--violeta-suave); color:var(--violeta) }


/* ══ EL BOTÓN DE SKY AI ═════════════════════════════════════════════════ */
.piel .skyai {
  position:fixed; right:var(--e6); bottom:var(--e6); z-index:30;
  width:54px; height:54px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(150deg,#8B5CF6,var(--violeta));
  color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 10px rgba(109,40,217,.28), 0 18px 36px -12px rgba(109,40,217,.55);
  transition:transform 220ms var(--resorte), box-shadow 220ms var(--salida);
}

.piel .skyai:hover { transform:scale(1.06) }

.piel .skyai:active { transform:scale(.94); transition-duration:80ms }


/* ══ ENTRADA — una sola vez, escalonada, corta ══════════════════════════ */
.piel .entra { animation:piel-entra 520ms var(--resorte) both }

.piel .entra:nth-child(1) {animation-delay:0ms}

.piel .entra:nth-child(2) {animation-delay:60ms}

.piel .entra:nth-child(3) {animation-delay:110ms}

.piel .entra:nth-child(4) {animation-delay:160ms}

.piel .entra:nth-child(5) {animation-delay:200ms}

.piel .entra:nth-child(6) {animation-delay:240ms}

@keyframes piel-entra { from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }


/* ══ RESPONSIVO — dos escalones, medidos contra el MARCO ════════════════
   · por debajo de 900 px  → sin barra lateral, barra inferior, héroe en una
     columna. Es donde cae una tablet en vertical.
   · por debajo de 640 px  → todo en una columna y las filas apiladas.
     Es donde cae un teléfono. */

/* ── Escalón 1: tablet y abajo ─────────────────────────────────────────── */
@container marco (max-width: 900px){
  .piel .lateral { display:none }
}

@container (max-width: 900px){
  .piel .centro { padding:0 var(--e5) 130px }
  .piel .cabecera { padding:var(--e5) }
  .piel .cabecera h1 { font-size:23px }
  .piel .respuesta { padding:var(--e5) }
  .piel .respuesta .cifra-xl { font-size:48px }
  .piel .respuesta .reparto { gap:var(--e5) }
  .piel .respuesta .apoyo { max-width:none }
  .piel .respuesta .acciones { margin-top:var(--e5) }
  .piel .desglose { padding:var(--e4) }
  .piel .dl b { font-size:14.5px }
  .piel .areas { grid-template-columns:repeat(3,1fr) }
  /* SKY AI flota por encima del muelle. La altura está calculada para que
     no choque con el botón de crear, que se sale 10 px por arriba. */
  .piel .skyai { position:absolute; right:var(--e5); bottom:118px; width:50px; height:50px }
  .piel .skyai svg { width:22px; height:22px }
}


/* ── Escalón 2: teléfono ───────────────────────────────────────────────── */
@container (max-width: 640px){
  .piel .centro { padding:0 var(--e4) 120px }
  .piel .cabecera { padding:var(--e4) }
  .piel .cabecera h1 { font-size:22px }
  .piel .cabecera .rotulo { display:none }
  .piel .cifras { grid-template-columns:1fr; gap:var(--e3) }
  .piel .respuesta { border-radius:var(--r-l) }
  .piel .respuesta .cifra-xl { font-size:40px }
  .piel .respuesta .reparto { grid-template-columns:1fr }
  /* Dos botones no caben de lado en 375: se apilan, pero a ancho completo.
     Un botón a media máquina se lee como un descuido. */
  .piel .respuesta .acciones { margin-top:var(--e5); flex-direction:column; align-items:stretch }
  .piel .respuesta .acciones .btn { justify-content:center; height:44px }
  /* La fecha ya está en la cabecera: repetirla aquí solo parte la línea. */
  .piel .respuesta .arriba .nota { display:none }
  .piel .desglose { padding:var(--e4) }
  .piel .areas { grid-template-columns:repeat(2,1fr) }
  /* Las filas se apilan: nunca scroll horizontal. */
  .piel .fila { flex-wrap:wrap; padding:var(--e4) }
  .piel .fila .txt { flex:1 1 100%; order:2 }
  .piel .fila .marca-estado { order:1 }
  .piel .fila .area { order:1 }
  .piel .fila .dato { order:3; margin-left:auto }
  .piel .fila .btn { order:4 }

  /* Una fila = una tarjeta. Nunca arrastrar de lado. */
  .piel .tabla thead { display:none }
  .piel .tabla, .piel .tabla tbody, .piel .tabla tr, .piel .tabla td { display:block; width:100% }
  .piel .tabla tbody tr { border-top:1px solid var(--linea); padding:var(--e4) var(--e5) }
  .piel .tabla tbody tr:first-child { border-top:0 }
  .piel .tabla td, .piel .tabla tbody tr:first-child td {
    border:0; padding:3px 0; display:flex; align-items:baseline;
    justify-content:space-between; gap:var(--e4); text-align:right }
  .piel .tabla td::before { content:attr(data-col); color:var(--apagado); font-size:13px;
                     font-weight:400; letter-spacing:.004em; text-align:left }
  .piel .tabla td.clave { font-size:16.5px; margin-bottom:var(--e2) }
  .piel .tabla td.clave::before { content:none }
  .piel .filtros { padding:var(--e4) }
}


/* ══ EL MUELLE — la barra flotante con el botón de crear ════════════════
   No es una franja pegada al borde: es una cápsula que flota, con el botón
   negro saliéndose por arriba. Ese botón es lo único de toda la app que
   CREA cosas, y por eso es el único que rompe la línea. */
.piel .muelle { display:none }

@container (max-width: 900px){
  .piel .muelle {
    display:flex; align-items:center;
    position:sticky; z-index:45;
    bottom:calc(var(--e4) + env(safe-area-inset-bottom));
    margin:0 auto; width:max-content; max-width:calc(100% - var(--e6));
    padding:var(--e2) var(--e3);
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.80);
    -webkit-backdrop-filter:blur(28px) saturate(190%);
    backdrop-filter:blur(28px) saturate(190%);
    /* el filo claro de arriba: la luz enganchando en el material */
    box-shadow:var(--alto-2), inset 0 1px 0 rgba(255,255,255,.85);
  }
  .piel .muelle a {
    min-width:66px; min-height:52px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:4px;
    text-decoration:none; color:var(--apagado); font:500 11px/1 var(--fuente);
    border-radius:var(--r-pill); position:relative;
    transition:color 150ms var(--salida);
  }
  .piel .muelle a svg { transition:transform 260ms var(--resorte) }
  .piel .muelle a:active svg { transform:scale(.88) }
  .piel .muelle a.on { color:var(--texto); font-weight:600 }
  .piel .muelle a .pin { position:absolute; top:6px; right:calc(50% - 15px);
                  width:6px; height:6px; border-radius:50%; background:var(--rojo) }

  /* El botón de crear: sale de la cápsula. 60 px, muy por encima de los 44
     de tacto mínimo, porque es el que se usa con una mano y en obra. */
  .piel .crear {
    width:60px; height:60px; flex:0 0 60px; margin:0 var(--e2); align-self:center;
    border:0; cursor:pointer; border-radius:50%;
    background:var(--tinta); color:#fff; display:grid; place-items:center;
    transform:translateY(-10px);
    box-shadow:0 4px 10px rgba(15,24,38,.22), 0 14px 28px -10px rgba(15,24,38,.45);
    transition:transform 320ms var(--resorte), box-shadow 240ms var(--salida);
  }
  .piel .crear svg { transition:transform 320ms var(--resorte) }
  .piel .crear:active { transform:translateY(-10px) scale(.92); transition-duration:90ms }
  .piel .muelle.abierto .crear { transform:translateY(-10px) }
  .piel .muelle.abierto .crear svg { transform:rotate(45deg) }   /* la + se vuelve × */

  /* ── Lo que despliega el botón ──────────────────────────────────────
     Se abre HACIA ARRIBA desde el propio botón: sale de donde lo tocaste
     y vuelve a donde lo tocaste. */
  .piel .menu-crear {
    position:absolute; left:50%; bottom:calc(100% + var(--e3));
    transform:translateX(-50%); z-index:46;
    display:flex; flex-direction:column-reverse; gap:var(--e2);
    width:max-content; pointer-events:none;
  }
  .piel .menu-crear a {
    pointer-events:auto; min-width:0; min-height:0;
    flex-direction:row; gap:var(--e3); justify-content:flex-start;
    padding:var(--e3) var(--e5) var(--e3) var(--e4);
    background:var(--tarjeta); color:var(--texto);
    font:550 15px/1 var(--fuente); letter-spacing:-.008em;
    box-shadow:var(--alto-2);
    opacity:0; transform:translateY(14px) scale(.94);
    transition:opacity 220ms var(--salida), transform 320ms var(--resorte);
  }
  .piel .menu-crear a svg { color:var(--texto-2) }
  .piel .muelle.abierto .menu-crear a { opacity:1; transform:none }
  /* Escalonado: el de más abajo primero, que es el que está más cerca del dedo */
  .piel .muelle.abierto .menu-crear a:nth-child(1) { transition-delay:0ms }
  .piel .muelle.abierto .menu-crear a:nth-child(2) { transition-delay:35ms }
  .piel .muelle.abierto .menu-crear a:nth-child(3) { transition-delay:70ms }
  .piel .muelle.abierto .menu-crear a:nth-child(4) { transition-delay:105ms }
}


/* ── El velo ───────────────────────────────────────────────────────────
   Cubre todo el alto del marco, no solo lo que se ve: mientras el menú
   está abierto no se hace scroll, así que da igual y es lo único que
   funciona igual en la ventana y dentro de un marco. */
.piel .velo {
  position:absolute; inset:0; z-index:44;
  background:rgba(15,24,38,.36);
  opacity:0; pointer-events:none;
  transition:opacity 260ms var(--salida);
}


/* En teléfono el muelle se pega a los bordes un poco más */
@container (max-width: 640px){
  .piel .muelle { max-width:calc(100% - var(--e5)); padding:var(--e2) }
  .piel .muelle a { min-width:58px; font-size:10.5px }
}


/* ══ EL PANEL DE LA MAQUETA (no es parte del diseño) ════════════════════ */
.piel .panel {
  position:fixed; bottom:16px; left:16px; z-index:100; flex-wrap:wrap; max-width:calc(100vw - 32px);
  display:flex; align-items:center; gap:var(--e2);
  background:rgba(18,24,38,.86); -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px); color:#fff; padding:7px 9px; border-radius:var(--r-pill);
  box-shadow:var(--alto-3); font:500 12.5px/1 var(--fuente);
}


/* ══ ACCESIBILIDAD — movimiento reducido ════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .piel *, .piel *::before, .piel *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important }
  .piel .entra { opacity:1; transform:none }
  .piel .barra i, .piel .ficha .micro i { transform:none }
}

@media (prefers-reduced-transparency: reduce){
  .piel .cabecera, .piel .barra-inf { background:var(--tarjeta); backdrop-filter:none; -webkit-backdrop-filter:none }
}


/* ══════════════════════════════════════════════════════════════════════════
   P7 · EL ACABADO   ·   aprobado por el CEO el 2026-08-21
   ═════════════════════════════════════════════════════════════════════════
   La piel de arriba resolvió la ESTRUCTURA: cuatro cifras con su dibujo, una
   fila de filtros y la mesa. Esto resuelve el ACABADO, que es lo que separa un
   tablero que parece hecho en media hora de uno que parece caro. Costó cuatro
   propuestas y lo que pasó el corte fue esto:

   1. TRES MATERIALES, no uno. Vidrio translúcido para lo neutro, degradado
      vivo para el dato que manda, tinta para lo importante. Cuando todas las
      tarjetas son del mismo material ninguna manda y el ojo se pierde; con
      tres, el orden de lectura queda decidido sin flechas ni etiquetas.
   2. LUZ. El fondo deja de ser un color plano y pasa a tener una fuente de luz
      arriba a la derecha y un rebote a la izquierda. Sin la segunda el fondo se
      ve sucio, no iluminado.
   3. GAMA AZUL → TURQUESA → MENTA dentro de los cuadros. El fondo del panel se
      queda claro: el CEO lo pidió explícito dos veces.

   Va dentro de `.piel` como todo lo demás: una pantalla que no haya pasado al
   lenguaje nuevo no se entera de que esto existe.
   ══════════════════════════════════════════════════════════════════════════ */

.piel{
  /* La gama. `--brand` sigue mandando en botones y menú —es el color que cada
     empresa escoge— y esto es la LUZ que lo acompaña en dibujos y degradados.
     Hoy son valores fijos; el día que una empresa con marca cálida pida que su
     luz sea cálida, se derivan en `app/utils/marca.py` como ya se deriva el
     resto de la paleta. */
  --az-1:#2B41D8;  --az-2:#4C6FFF;  --az-3:#8AA1FF;
  --mt-1:#2FCFA6;  --mt-2:#54E0BF;  --mt-3:#9BF0DC;
  --turq:#2FC2E8;
  --lila:#A3B2FF;
  --luz:#5FD8EC;
}

/* ── 1 · La luz del fondo ────────────────────────────────────────────────
   **El degradado lo pinta `.app`, no `.piel`** (D-995). Esta regla decía
   `min-height:100%` y repetía aquí el mismo degradado, y las dos cosas eran
   verdad cuando `.piel` ERA la pantalla entera. Hoy no lo es: en Cobros,
   Gastos, Nómina, Personal y Obras `.piel` es una isla que empieza a media
   página, y `100%` no significa «hasta abajo» sino «tan alta como TODA la
   página, contando desde donde empiezo». En Cobros eso son 1.211 px de vacío
   por debajo del suelo de la aplicación: la barra lateral y el blanco se
   cortan en seco y debajo sigue el degradado solo, a lo ancho de todo. Se ve
   como una página partida en dos, y lo cazó el CEO el 2026-09-02 recorriendo
   la app. Las cinco pantallas lo tenían.

   No hace falta sustituirlo por nada: `.estudio .app` ya pinta este mismo
   degradado —las dos reglas son la misma salvo una centésima de opacidad— y
   `.app` sí crece con el contenido. Repetirlo aquí además REINICIABA el
   degradado a media página, así que el tono daba un salto justo donde
   empezaba la isla. */
.piel{ min-height:0 }

/* ── 2 · Material vidrio ─────────────────────────────────────────────────
   El borde blanco de arriba es el truco: simula el canto del cristal contra
   la luz. Sin él, una tarjeta translúcida se ve como una mancha. */
.piel .ficha{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,24,38,.04),
    0 18px 40px -18px rgba(15,24,38,.20);
}
/* El vidrio se aclara al pasar por encima — y SOLO el vidrio. Las tarjetas de
   color y las de tinta llevan texto claro: si heredan este hover, se pintan de
   blanco y se tragan su propio texto. Costó encontrarlo dos veces. */
.piel .ficha:not(.degradada):not(.tinta):hover{
  background:rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(15,24,38,.05),
    0 30px 60px -20px rgba(15,24,38,.28);
  transform:translateY(-4px);
}
.piel .ficha.degradada:hover, .piel .ficha.tinta:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 36px 70px -26px rgba(10,17,28,.72);
}

/* ── 3 · Material degradado vivo ─────────────────────────────────────────
   Tarjeta de un solo dato, con el color como fondo. La sombra lleva el mismo
   color que el degradado: con sombra gris, flota sobre una mancha y se apaga. */
.piel .ficha.degradada{
  border:1px solid rgba(255,255,255,.28); color:#fff;
  position:relative; overflow:hidden;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.piel .ficha.degradada::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(85% 60% at 15% 0%, rgba(255,255,255,.34), transparent 60%);
}
.piel .ficha.degradada > *{ position:relative }
.piel .ficha.degradada.menta{
  background:linear-gradient(145deg, var(--mt-2) 0%, var(--turq) 48%, var(--az-2) 100%);
  box-shadow:0 24px 48px -20px rgba(47,194,232,.62);
}
.piel .ficha.degradada.azul{
  background:linear-gradient(145deg, var(--az-3) 0%, var(--az-2) 42%, var(--az-1) 100%);
  box-shadow:0 24px 48px -20px rgba(43,65,216,.55);
}
.piel .ficha.degradada .etiqueta,
.piel .ficha.degradada .nota{ color:rgba(255,255,255,.82) }
.piel .ficha.degradada .cifra-l,
.piel .ficha.degradada .cifra-xl{ color:#fff }
.piel .ficha.degradada .pastilla{ background:rgba(255,255,255,.22); color:#fff }

/* ── 4 · Material tinta ──────────────────────────────────────────────────
   Lo único oscuro de una pantalla clara. Ese salto es lo que hace que el ojo
   aterrice ahí, y sale más barato que una etiqueta roja diciendo «mira aquí». */
.piel .ficha.tinta{
  background:linear-gradient(150deg,#1B2A56 0%,#141F42 45%,#0D1530 100%);
  border:1px solid rgba(255,255,255,.10); color:#fff;
  box-shadow:0 30px 60px -24px rgba(10,17,28,.65);
  position:relative; overflow:hidden;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.piel .ficha.tinta::before{
  content:''; position:absolute; top:-45%; right:-12%; width:60%; height:150%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(47,194,232,.28), transparent 62%);
}
.piel .ficha.tinta > *{ position:relative }
.piel .ficha.tinta .etiqueta{ color:rgba(255,255,255,.62) }
.piel .ficha.tinta .nota{ color:rgba(255,255,255,.55) }
.piel .ficha.tinta .cifra-l,
.piel .ficha.tinta .cifra-xl,
.piel .ficha.tinta .titulo{ color:#fff }

/* ── 5 · Las cifras crecen y adelgazan ───────────────────────────────────
   Una cifra de 34 px en peso 600 se lee mejor que una de 30 en 700, y encima
   deja respirar la tarjeta. */
.piel .cifra-l{ font:600 34px/1.05 var(--fuente); letter-spacing:-.035em }

/* ── 6 · El botón principal, con la luz de la gama ───────────────────────── */
.piel .btn.pri{
  background:linear-gradient(100deg, var(--brand-hover), var(--brand));
  border-color:transparent;
  box-shadow:0 12px 28px -10px var(--brand);
}
.piel .btn.pri:hover{ filter:brightness(1.08) }
.piel .btn:not(.pri){
  background:rgba(255,255,255,.75); border-color:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 2px 10px -4px rgba(15,24,38,.14);
}

/* Quien pidió menos movimiento no ve ninguno de estos efectos. */
@media (prefers-reduced-motion: reduce){
  .piel .ficha, .piel .ficha:hover{ transition:none; transform:none }
}

/* ── El titular vivo (P7.1) ──────────────────────────────────────────────
   El número con su historia al lado. Es la única pieza de la pantalla en
   tinta: ese salto de claro a oscuro es lo que hace que el ojo aterrice ahí
   sin necesidad de una etiqueta roja diciendo «mira aquí». */
.piel .ficha.titular{
  display:grid; grid-template-columns:minmax(240px,.85fr) minmax(0,1.55fr);
  gap:var(--e6); align-items:center; padding:30px 34px;
}
.piel .titular-izq{ min-width:0 }
.piel .titular-rot{ display:flex; align-items:center; gap:10px; margin-bottom:var(--e4) }
.piel .titular-rot .et{
  font:500 12.5px var(--fuente); color:rgba(255,255,255,.62);
  letter-spacing:.02em; text-transform:uppercase;
}
.piel .cifra-hero{
  display:block; font:600 60px/1 var(--fuente); letter-spacing:-.045em; color:#fff;
  font-variant-numeric:tabular-nums;
}
.piel .delta-hero{
  display:inline-flex; align-items:center; gap:7px; margin-top:var(--e4);
  padding:7px 13px; border-radius:var(--r-pill); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font:500 12.5px var(--fuente); color:rgba(255,255,255,.78);
}
.piel .delta-hero b{ color:#FF8E9B; font-weight:600 }
.piel .cuentas-linea{ display:flex; gap:34px; margin-top:30px; flex-wrap:wrap }
.piel .cuentas-linea .c span{
  display:block; font:400 11px var(--fuente); color:rgba(255,255,255,.50);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px;
}
.piel .cuentas-linea .c b{
  font:600 19px var(--fuente); color:#fff; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.piel .cuentas-linea .c.ojo b{ color:#54E0BF }

.piel .titular-grafico{ position:relative; min-width:0 }
.piel .titular-grafico svg{ width:100%; height:auto; display:block }
.piel .titular-meses{ display:flex; justify-content:space-between; margin-top:var(--e3) }
.piel .titular-meses span{ font:400 11px var(--fuente); color:rgba(255,255,255,.42) }
.piel .titular-clave{ display:flex; gap:var(--e4); justify-content:flex-end; margin-top:var(--e3) }
.piel .titular-clave span{
  display:inline-flex; align-items:center; gap:7px; font:500 11.5px var(--fuente);
  color:rgba(255,255,255,.62);
}
.piel .titular-clave i{ width:9px; height:9px; border-radius:3px }
.piel .envivo{
  position:absolute; top:0; right:0; display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); font:600 10.5px var(--fuente);
  color:rgba(255,255,255,.82); letter-spacing:.08em; text-transform:uppercase; z-index:3;
}
.piel .envivo i{
  width:7px; height:7px; border-radius:50%; background:#54E0BF;
  animation:p7-latido 2.4s infinite;
}
@keyframes p7-latido{
  0%{ box-shadow:0 0 0 0 rgba(84,224,191,.65) }
  70%{ box-shadow:0 0 0 7px rgba(84,224,191,0) }
  100%{ box-shadow:0 0 0 0 rgba(84,224,191,0) }
}
/* El trazo se dibuja al entrar: la pantalla se construye delante de ti. */
.piel .traza{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:p7-trazar 1.9s cubic-bezier(.32,.72,0,1) .25s forwards }
@keyframes p7-trazar{ to{ stroke-dashoffset:0 } }
.piel .velo-area{ opacity:0; animation:p7-aparecer .9s ease 1.5s forwards }
@keyframes p7-aparecer{ to{ opacity:1 } }

/* El botón de información: la explicación existe, pero no ocupa pantalla. */
.piel .ayuda-p7{
  width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.7); cursor:help; position:relative; font:600 12px/20px var(--fuente);
  text-align:center; flex:0 0 22px;
}
.piel .ayuda-p7 .nube{
  position:absolute; top:calc(100% + 10px); left:-8px; width:290px; padding:14px 16px;
  background:var(--tarjeta); color:var(--texto-2); border-radius:14px; text-align:left;
  font:400 12.5px/1.5 var(--fuente); box-shadow:var(--alto-3); z-index:20;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.2s var(--resorte);
  text-transform:none; letter-spacing:0;
}
.piel .ayuda-p7:hover .nube, .piel .ayuda-p7:focus .nube{ opacity:1; visibility:visible; transform:none }

@container piel (max-width:900px){
  .piel .ficha.titular{ grid-template-columns:1fr; gap:var(--e5); padding:22px }
  .piel .cifra-hero{ font-size:44px }
  .piel .envivo{ position:static; margin-bottom:var(--e3) }
}

@media (prefers-reduced-motion: reduce){
  .piel .traza{ animation:none; stroke-dashoffset:0 }
  .piel .velo-area{ animation:none; opacity:1 }
  .piel .envivo i{ animation:none }
}

/* ── La bienvenida (P7.1) ────────────────────────────────────────────────
   El Inicio saluda: no es una pantalla de trabajo, es donde el dueño se
   entera. El nombre lleva la gama como un acento, no como un letrero. */
.piel .bienvenida-p7{ margin-bottom:var(--e5) }
.piel .bienvenida-p7 h1{
  font:600 34px/1.1 var(--fuente); letter-spacing:-.035em; color:var(--texto);
}
.piel .bienvenida-p7 h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--brand), #2FC2E8 60%, #2FCFA6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.piel .bienvenida-p7 .sub{
  margin-top:8px; font:400 14px/1.5 var(--fuente); color:var(--apagado);
}
.piel .bienvenida-p7 .sub b{ color:var(--texto-2); font-weight:600 }

/* ── Prioridades en tinta (P7.1) ─────────────────────────────────────────
   La única caja oscura de la rejilla, aparte del titular. La lista y las
   filas que van dentro son las mismas piezas de siempre: aquí solo se
   oscurecen. Así la plantilla conserva el monto y la acción de cada señal
   sin duplicar una lista paralela. */
.piel .prioridades-tinta .lista{
  background:linear-gradient(160deg,#1A2440 0%,#111A30 55%,#0C1322 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 50px -20px rgba(11,17,30,.7);
}
.piel .prioridades-tinta .fila{ border-top-color:rgba(255,255,255,.07) }
.piel .prioridades-tinta .fila:hover{ background:rgba(255,255,255,.06) }
.piel .prioridades-tinta .fila b{ color:#fff }
.piel .prioridades-tinta .fila .nota{ color:rgba(255,255,255,.52) }
.piel .prioridades-tinta .fila .area{ color:rgba(255,255,255,.50);
  background:rgba(255,255,255,.08) }
.piel .prioridades-tinta .fila .dato{ color:#fff }
.piel .prioridades-tinta .fila .dato.r{ color:var(--mal-tinta) }
.piel .prioridades-tinta .fila .btn{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:#fff;
}
.piel .prioridades-tinta .fila .btn:hover{ background:rgba(255,255,255,.20) }
.piel .prioridades-tinta .marca-estado{ filter:brightness(1.35) }

/* ── El botón flotante de SKY AI (P7.1) ──────────────────────────────────
   En todas las áreas, siempre en el mismo sitio. Hoy lleva a la sección de
   SKY AI; la conversación empotrada es su propio sprint. El pulso dice
   «estoy aquí» una vez por respiración, no parpadea. */
.piel .fab-ai{
  position:fixed; right:32px; bottom:32px; z-index:60;
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  background:linear-gradient(140deg, #2FCFA6, #2FC2E8 45%, #4C6FFF);
  box-shadow:0 16px 38px -12px rgba(47,194,232,.75);
  animation:p7-pulso-ai 3.4s infinite;
  transition:transform .22s var(--resorte);
}
.piel .fab-ai:hover{ transform:scale(1.07) rotate(-6deg) }
@keyframes p7-pulso-ai{
  0%{ box-shadow:0 16px 38px -12px rgba(47,194,232,.75), 0 0 0 0 rgba(47,194,232,.42) }
  70%{ box-shadow:0 16px 38px -12px rgba(47,194,232,.75), 0 0 0 16px rgba(47,194,232,0) }
  100%{ box-shadow:0 16px 38px -12px rgba(47,194,232,.75), 0 0 0 0 rgba(47,194,232,0) }
}
.piel .fab-ai .globo-ai{
  position:absolute; right:calc(100% + 14px); white-space:nowrap; padding:9px 15px;
  border-radius:var(--r-pill); background:var(--tinta); color:#fff;
  font:600 12.5px var(--fuente); box-shadow:var(--alto-2);
  opacity:0; transform:translateX(8px); transition:.2s var(--resorte); pointer-events:none;
}
.piel .fab-ai:hover .globo-ai{ opacity:1; transform:none }

@container piel (max-width:760px){
  .piel .bienvenida-p7 h1{ font-size:26px }
  /* En el teléfono la barra de abajo ya lleva SKY AI: dos accesos al mismo
     sitio en la misma esquina se estorban. */
  .piel .fab-ai{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .piel .fab-ai{ animation:none }
}

/* ── «Me cambié de obra» y el día repartido en tramos (J-1) ────────────────
   El botón va ANTES que descanso y terminar porque es lo que pasa a mitad del
   día. Sin él, las horas de la tarde caían enteras en la obra de la mañana. */
.dia-cambiar { width:100%; display:flex; align-items:center; justify-content:center;
  gap:8px; margin-bottom:10px; }
.dia-tramos { margin-top:18px; border:1px solid var(--line); border-radius:14px;
  padding:14px; }
.dia-tramos-cab { display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px; }
.dia-tramos-cab b { font-size:14px; }
.dia-tramos-cab span { font-size:13px; color:var(--muted); }
.dia-tramo { display:flex; align-items:center; gap:10px; padding:8px 0; }
.dia-tramo > i { width:8px; height:8px; border-radius:50%; background:var(--brand);
  flex:0 0 8px; }
.dia-tramo.es-descanso > i { background:var(--muted); }
.dia-tramo-txt { flex:1; min-width:0; }
.dia-tramo-txt b { display:block; font-size:14px; }
.dia-tramo-txt span { display:block; font-size:12px; color:var(--muted); }
.dia-tramo-h { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.dia-obras { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.dia-obra-op { text-align:left; padding:14px; border:1px solid var(--line);
  border-radius:12px; background:transparent; cursor:pointer; font:inherit; }
.dia-obra-op:hover { border-color:var(--brand); }

/* El estilo del chat de SKY AI vive SOLO en `static/css/skyai.css`. Tenerlo
   repartido entre esta hoja y `estudio.css` es lo que lo dejaba roto en las 55
   pantallas que piden esta como puente: lo que una no declaraba, la otra lo
   rellenaba. Ver la cabecera de aquella hoja. */

/* ═══════════════════════════════════════════════════════════════════════════
   AGENDA · lo que faltaba (A-1, 2026-08-24)
   ═══════════════════════════════════════════════════════════════════════════
   Tres piezas: cuánta gente hay libre, qué obras NO están en el calendario, y
   los eventos que no son asignaciones. Van en `app.css` y no en `estudio.css`
   porque esta pantalla todavía cuelga del marco anterior.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cuánta gente tienes libre ────────────────────────────────────────────
   Es la pregunta de quien mira una agenda: ¿puedo aceptar otro trabajo? */
.panel-huecos {
  display: flex; align-items: center; gap: var(--e-5); margin-bottom: 18px;
  padding: var(--e-4) var(--e-5); border-radius: var(--r-l);
  background: linear-gradient(150deg, #1B2A56, #0D1530); color: #fff;
}
/* **Todo con `hu-`, y no es manía: son dos accidentes con la misma causa.**
   Primero `.cifra` (2026-08-25): en esta hoja ya es una tarjeta blanca de
   indicador, y el número blanco quedó invisible sobre ella. Después `.dias`
   (2026-09-11): `estudio.css` la declara `flex-direction:column`, y la semana salió
   apilada en vertical con las barras escapándose del panel. Resetear cada
   propiedad ajena no se acaba nunca; no compartir el nombre, sí. */
.panel-huecos .hu-izq { flex: 0 0 auto; min-width: 0; }
.panel-huecos .hu-rot {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.panel-huecos .hu-cifra { display: block; margin-top: 6px; }
.panel-huecos .hu-cifra b { font-size: 40px; font-weight: 650; letter-spacing: -.035em; }
.panel-huecos .hu-cifra small { font-size: 17px; color: rgba(255,255,255,.5); }
.panel-huecos .hu-pie { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.panel-huecos .hu-dias {
  flex: 1; display: flex; flex-direction: row; align-items: flex-end; gap: 8px;
  height: 92px; min-width: 0;
}
.panel-huecos .hu-d {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 5px; height: 100%; min-width: 0;
}
.panel-huecos .hu-d em {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.75);
}
/* La barra toma su alto del día y el día del panel: con 28 de 28 libres llega
   arriba, pero nunca más allá, porque el número y la letra también caben en los
   92 px. */
.panel-huecos .hu-pl {
  display: block; width: 100%; max-width: 26px; min-height: 3px; max-height: 52px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #54E0BF, #2FCFA6);
}
.panel-huecos .hu-d.hoy .hu-pl { box-shadow: 0 0 18px rgba(84,224,191,.5); }
/* El fin de semana se marca pero no se maquilla: si nadie trabaja el domingo, ese
   día sale con todo el mundo libre, y eso no es una oportunidad — es un domingo. */
.panel-huecos .hu-d.fds .hu-pl { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.1)); }
.panel-huecos .hu-d.fds em, .panel-huecos .hu-d.fds b { color: rgba(255,255,255,.38); }
.panel-huecos .hu-d b { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.5); }

/* ── Las obras que no están en el calendario ──────────────────────────── */
.aviso-sin-fechas {
  margin-bottom: 14px; border: 1px solid var(--yellow-line, #F0E0B8);
  border-radius: var(--r-m); background: var(--yellow-soft, #FDF6E3);
}
.aviso-sin-fechas > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px var(--e-4); cursor: pointer; font-size: 13.5px;
}
.aviso-sin-fechas > summary b { color: var(--yellow-ink, #8A6420); }
.aviso-sin-fechas > summary span { color: var(--muted); font-size: 12.5px; }
.lista-sin-fechas { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--e-3) var(--e-3); }
.lista-sin-fechas a {
  display: flex; align-items: center; gap: 12px; padding: 9px var(--e-3);
  border-radius: var(--r-s); background: var(--surface); text-decoration: none;
  color: var(--text); font-size: 13px;
}
.lista-sin-fechas a:hover { box-shadow: var(--sombra-s); }
.lista-sin-fechas a span { flex: 1; color: var(--muted); font-size: 12.5px; }
.lista-sin-fechas a em { font-style: normal; font-weight: 600; color: var(--brand); font-size: 12.5px; }

/* ── Los eventos que no son asignaciones ──────────────────────────────────
   Inicio y entrega de obra, vencimiento de cobro y cierre de quincena. Cada uno
   con su color, y el color NO es lo único que los distingue: llevan su texto. */
.ev-agenda {
  display: block; padding: 5px 9px; margin-bottom: 4px; border-radius: 9px;
  border-left: 3px solid var(--brand); background: var(--surface-2, #F6F7FB);
  font-size: 11.5px; line-height: 1.35;
}
.ev-agenda b { display: block; font-weight: 600; color: var(--text); }
.ev-agenda i { font-style: normal; color: var(--muted); }
.ev-agenda.inicio { border-left-color: #2FCFA6; background: rgba(47,207,166,.1); }
.ev-agenda.entrega { border-left-color: #D8344A; background: rgba(216,52,74,.08); }
.ev-agenda.cobro { border-left-color: #2FC2E8; background: rgba(47,194,232,.1); }
.ev-agenda.nomina { border-left-color: #FFC24B; background: rgba(255,194,75,.12); }

/* «No podré ir» (D-226). Se sale de la gama de los eventos a propósito: los demás
   informan de algo que va a pasar; este obliga a rehacer el día. Rayado, para que se
   distinga del rojo de «entrega» aunque compartan color. */
.ev-agenda.no-podre {
  border-left-color: #D8344A;
  background: repeating-linear-gradient(135deg, rgba(216,52,74,.10) 0 6px,
                                                rgba(216,52,74,.04) 6px 12px);
}
.ev-agenda.no-podre i { color: #D8344A; font-weight: 600; }
.mes-obra.no-podre { color: #D8344A; font-weight: 600; }
.mes-obra.no-podre i { background: #D8344A; }

/* ── Enviar una cuadrilla arrastrándola ───────────────────────────────── */
.tira-cuadrillas { margin-top: var(--e-4); }
.tira-cuadrillas .rot { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.tira-cuadrillas .rot b { font-size: 13.5px; }
.tira-cuadrillas .rot span { font-size: 12.5px; color: var(--muted); }
.tira-cuadrillas .cus { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.tira-cuadrillas .cu {
  display: flex; align-items: center; gap: 11px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface);
  cursor: grab; min-width: 260px;
}
.tira-cuadrillas .cu:active { cursor: grabbing; }
.tira-cuadrillas .cu.arrastrando { opacity: .4; }
.tira-cuadrillas .cu .ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #54E0BF, #4C6FFF); color: #fff;
  font-size: 11.5px; font-weight: 600;
}
.tira-cuadrillas .cu .txt { flex: 1; min-width: 0; }
.tira-cuadrillas .cu .txt b { display: block; font-size: 13px; font-weight: 600; }
.tira-cuadrillas .cu .txt span { display: block; font-size: 11.5px; color: var(--muted); }
.tira-cuadrillas .cu .txt em { font-style: normal; color: var(--yellow-ink, #8A6420); }
.tira-cuadrillas .cu .donde {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 8px; border-radius: 999px; background: var(--surface-2, #F6F7FB);
  color: var(--muted); white-space: nowrap;
}
.tira-cuadrillas .cu .donde.ok { background: rgba(12,126,113,.1); color: #0C7E71; }
/* La columna que va a recibir la cuadrilla se enciende: soltarla en el día
   equivocado se deshace a mano, persona por persona. */
.agenda-col.recibe { background: rgba(47,194,232,.14); outline: 2px dashed #2FC2E8; }

@media (max-width: 900px) {
  .panel-huecos { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .panel-huecos .dias { height: 74px; }
  .tira-cuadrillas .cu { min-width: 0; width: 100%; }
}

/* ═══ CONFIGURACIÓN — EL PERFIL DEL DUEÑO (D-444) ════════════════════════════
   Piezas propias de `templates/configuracion/index.html`. Lo de la marca —la
   muestra, la paleta, el color libre— se reutiliza tal cual de `.marca-*`, unos
   cientos de líneas más arriba: son el mismo control y no se duplican. */

/* Los datos de la cuenta: rótulo arriba, valor abajo. En dos columnas cuando cabe,
   porque son cuatro renglones cortos y uno debajo de otro dejaban media pantalla
   vacía a la derecha. */
.cfg-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
             gap: var(--e-3); margin-bottom: var(--e-4); }
.cfg-dato { display: flex; flex-direction: column; gap: 4px; }
.cfg-rot { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cfg-val { font-size: 15px; font-weight: 550; color: var(--text); }
/* El usuario en letra de máquina: es una credencial que se dicta por teléfono, y
   distinguir un 1 de una l importa más que la elegancia. */
.cfg-val.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }

/* Un encabezado menor dentro del bloque. Sin esto, los tres asuntos de «Mi cuenta»
   —datos, contraseña, segundo factor— eran un solo muro de texto. */
.cfg-cab-menor { margin: var(--e-4) 0 var(--e-2); font-size: 13px; font-weight: 650;
                 letter-spacing: .03em; text-transform: uppercase; color: var(--text2); }
.cfg-cab-menor:first-child { margin-top: 0; }

.cfg-clave { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: var(--e-2); align-items: center; }

.cfg-logo { display: flex; gap: var(--e-4); align-items: flex-start; flex-wrap: wrap; }
.cfg-logo-vista { flex: 0 0 auto; }
.cfg-logo-acciones { flex: 1 1 280px; display: flex; flex-direction: column;
                     align-items: flex-start; gap: var(--e-2); }
.cfg-logo-acciones .bloque-sub { margin: 0; }
/* «Subir mi logo» y «Quitar» son la misma decisión vista por sus dos lados, así que
   van juntos en un renglón. Apilados —que es como salían— se leen como dos pasos de
   un procedimiento, y el segundo parece el siguiente en vez de lo contrario. */
.cfg-logo-botones { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* Lo contratado. Es una lista para LEER, no para tocar: sin casillas, sin botones y
   sin nada que parezca pulsable — un control apagado invita a intentarlo, y aquí no
   hay nada que intentar. */
.cfg-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
             gap: var(--e-2); }
.cfg-item { padding: var(--e-3); border: 1px solid var(--line); border-radius: 12px;
            background: var(--surface-2, transparent); }
.cfg-item b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.cfg-item span { font-size: 13px; line-height: 1.5; color: var(--muted); }

.cfg-pedido { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.cfg-pedido .search-input { flex: 1 1 320px; }

/* ══ El identificador de compras (D-524…D-543) ══════════════════════════════
   Las piezas que la ventana de «Qué es cada cosa» necesitaba y no existían en
   ninguna hoja: las pestañas de tipo, las palabras escritas y el sello de cada
   recibo en la lista de Gastos. Van bajo `.piel` como todo lo demás — fuera de
   esa clase no aplican, y esa es exactamente la trampa que dejó esta pantalla
   dibujándose en crudo desde que nació. */

/* Las pestañas: un tipo de gasto cada una. Antes solo se podía enseñar qué es
   herramienta, porque la caja de palabras estaba clavada a ese tipo — y el
   mantenimiento importa aparte, que se descuenta de otro sitio. */
.piel .pestanas { display:flex; flex-wrap:wrap; gap:var(--e2); margin:var(--e3) 0 }
.piel .js-pestana {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 14px; border-radius:var(--r-pill);
  border:1px solid var(--linea); background:transparent;
  font:600 12.5px var(--fuente); color:var(--texto-2);
}
.piel .js-pestana:hover { border-color:var(--marca); color:var(--marca) }
.piel .js-pestana.puesto { background:var(--marca); border-color:var(--marca); color:#fff }
.piel .js-pestana .cuantos {
  font:600 10.5px var(--fuente); opacity:.7; font-variant-numeric:tabular-nums;
}

/* Escribir una palabra, y las palabras ya escritas. */
.piel .palabras-herramienta { display:flex; gap:var(--e2); margin-bottom:var(--e3) }
.piel .palabras-herramienta .campo {
  flex:1; min-width:0; height:38px; padding:0 var(--e3);
  border:1px solid var(--linea); border-radius:var(--r-s);
  background:var(--tarjeta); font:400 14px var(--fuente); color:var(--texto);
}
.piel .palabras-herramienta .campo:focus { outline:none; border-color:var(--marca) }
.piel .chips { display:flex; flex-wrap:wrap; gap:var(--e2); list-style:none; padding:0; margin:0 }
.piel .chips .chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 6px 5px 12px; border-radius:var(--r-pill);
  background:var(--marca-suave); color:var(--marca);
  font:600 12.5px var(--fuente);
}
.piel .chips .chip .quitar {
  display:grid; place-items:center; width:18px; height:18px; border:0; padding:0;
  border-radius:50%; cursor:pointer; background:transparent;
  color:inherit; font:600 14px/1 var(--fuente); opacity:.6;
}
.piel .chips .chip .quitar:hover { opacity:1; background:rgba(0,0,0,.08) }

/* El código del artículo, en letra de ancho fijo: se compara con el papel. */
.piel .tabla td.codigo {
  font:600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--texto); white-space:nowrap;
}
.piel .tabla td.alerta { color:var(--ambar); font-weight:600 }

/* El pie con el botón que alcanza a los recibos que YA entraron. */
.piel .caja > .pie-caja {
  display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
  margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--linea);
}

/* El sello de cada recibo en la lista de Gastos: qué trae, según sus renglones.
   Cuatro tonos y no dos, porque «no se pudo leer» NO es «no pasa nada»: pintarlos
   iguales sería vender como comprobado un recibo que nadie miró. */
.piel .sello-recibo {
  display:inline-block; margin-top:4px; padding:3px 9px;
  border-radius:var(--r-pill); font:600 10.5px var(--fuente); white-space:nowrap;
}
.piel .sello-recibo.t-alerta { background:var(--ambar-suave); color:var(--ambar) }
.piel .sello-recibo.t-aviso  { background:var(--marca-suave); color:var(--marca) }
.piel .sello-recibo.t-bien   { background:var(--verde-suave); color:var(--verde) }
.piel .sello-recibo.t-neutro { background:rgba(133,132,156,.14); color:var(--apagado) }

/* El pie de caja sin la línea de arriba: cuando la caja no lleva nada encima que
   separar, la línea dibuja una división de algo que no existe. */
.piel .caja > .pie-caja.sin-linea { margin-top:0; padding-top:0; border-top:0 }

/* La palabra que dedujo el sistema, distinta de la que escribió el dueño (D-531).
   Enseñarlas iguales sería vender como suyo algo que nadie miró — la misma regla
   que separa «Por decidir» de lo confirmado. Va en hueco, con el canto punteado:
   se lee «esto es una propuesta», no «esto lo pusiste tú». */
.piel .aprendidas { margin-top:var(--e3) }
.piel .chips .chip.deducida {
  background:transparent; color:var(--texto-2);
  border:1px dashed var(--linea); font-weight:500;
}
.piel .chips .chip.deducida .quitar:hover { background:var(--rojo-suave); color:var(--rojo) }

/* El dinero de cada cubeta, junto a su cuenta: lo que dice si una marca estuvo bien
   no es el nombre del artículo, es cuánto mueve. */
.piel .caja > header .plata {
  margin-left:auto; font:600 13px var(--fuente); color:var(--texto-2);
  font-variant-numeric:tabular-nums;
}

/* Una fila de tabla que se abre (D-841). El cursor y el realce al pasar son lo único
   que distingue una lista que se mira de una que se puede pulsar: sin ellos, la
   orden se puede abrir y nadie lo intenta. */
.fila-abrible { cursor: pointer; }
.fila-abrible:hover td { background: var(--surface2); }
.fila-abrible:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }