/*
  Tokens de diseño de PlazaOS (DISENO.md v1, plan maestro v1 §G). ÚNICO lugar con colores, letras,
  tamaños, espacios, radios y sombras. Ningún componente ni otra hoja escribe un #hex, un rgb() ni un
  font-family: lo vigila tests/estilos.test.ts.

  Dos temas con LOS MISMOS NOMBRES de token (cambia el valor, no la pantalla):
    - oficina  → cara privada (Main / EdificioB / Bandeja de los bocetos: claro, lateral oscuro)
    - showroom → cara pública (Aereo: oscuro, el render como protagonista)
  El tema se elige con data-tema en <html>. Los valores vienen de docs/bocetos/*.dc.html (11-12 oct
  2026); los que no cumplían 3:1 como borde de campo (#C9CEC8, #D3D7D1) se sustituyeron por
  --color-borde-campo con 4.8:1 (DISENO §4). La identidad definitiva la entrega el diseñador:
  cambia este archivo y DISENO.md, no las pantallas.
*/

:root {
  /* Tipografía: Archivo (texto, con eje de ancho para rótulos) e IBM Plex Mono (claves y cifras) */
  --fuente-texto: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
  --fuente-cifra: 'IBM Plex Mono', ui-monospace, monospace;

  /* Escala tipográfica del boceto, en px → rem (base 16) */
  --tamano-11: 0.6875rem;
  --tamano-12: 0.75rem;
  --tamano-13: 0.8125rem;
  --tamano-14: 0.875rem;
  --tamano-17: 1.0625rem;
  --tamano-22: 1.375rem;
  --tamano-26: 1.625rem;
  --tamano-30: 1.875rem;
  --tamano-32: 2rem;
  --interlineado-texto: 1.45;
  --interlineado-titulo: 1.15;

  /* Espacio */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.25rem;
  --espacio-6: 1.5rem;
  --espacio-7: 1.75rem;
  --espacio-8: 2rem;
  --alto-toque: 2.75rem; /* 44 px: ningún control tocable es más chico */
  --ancho-lateral: 15.5rem; /* 248 px, el menú lateral del boceto */
  --ancho-tarjeta-aerea: 22.5rem; /* 360 px, la tarjeta sobre el render */

  /* Forma */
  --radio-chico: 0.5rem;
  --radio: 0.625rem;
  --radio-tarjeta: 0.875rem;
  --radio-pildora: 999px;
  --borde-vence: 2.5px; /* el marco naranja de "vence en menos de 90 días" */
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.45); /* una sola profundidad: la tarjeta sobre el render */

  /* Movimiento */
  --duracion-zoom: 700ms; /* el zoom hacia un edificio en la vista aérea */
  --duracion-corta: 150ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --opacidad-atenuado: 0.16; /* locales fuera del filtro activo */
  --opacidad-zona: 0.28; /* relleno de una zona del render en reposo */
  --opacidad-zona-activa: 0.5;
}

:root[data-tema='oficina'] {
  --color-fondo: #e9ebe6;
  --color-superficie: #ffffff;
  --color-tarjeta: #ffffff;
  --color-lateral: #15211d;
  --color-lateral-hover: #22302b;
  --color-lateral-activo: #2c3b35;
  --color-borde: #d3d7d1; /* decorativo: contorno de tarjetas */
  --color-borde-campo: #6b7570; /* 4.8:1 sobre superficie: borde de campos y chips */
  --color-tinta: #15211d;
  --color-tinta-suave: #4e5a55;
  --color-tinta-inversa: #e9ebe6;
  --color-tinta-inversa-suave: #9aa59f;
  --color-accion: #15211d;
  --color-accion-texto: #ffffff;
  --color-enlace: #2b55c4;
  --color-enlace-fuerte: #1c3e99;
  --color-acento: #2b55c4;
  --color-disponible: #ffffff;
  --color-disponible-suave: #e3f7ee;
  --color-disponible-texto: #0f5a3e;
  --color-apartado: #f2bc5c;
  --color-apartado-suave: #fcefd6;
  --color-apartado-texto: #7a4b00;
  --color-negociacion: #f2bc5c;
  --color-negociacion-claro: #f8d896;
  --color-negociacion-texto: #15211d;
  --color-firma: #3a6fe0;
  --color-firma-texto: #ffffff;
  --color-arrendado: #1e4d3d;
  --color-arrendado-texto: #ffffff;
  --color-sin-dato: #c6cbc4;
  --color-sin-dato-claro: #eef0ec;
  --color-vence: #c2410c;
  --color-vence-texto: #b03a08;
  --color-vence-suave: #fdf0e8;
  --color-ejemplo-fondo: #fbe7d3;
  --color-ejemplo-texto: #7a3b0c;
  --color-ejemplo-borde: #e8b98f;
}

:root[data-tema='showroom'] {
  --color-fondo: #0e1513;
  --color-superficie: #1b2622;
  --color-tarjeta: #f6f7f4;
  --color-lateral: #15211d;
  --color-lateral-hover: #22302b;
  --color-lateral-activo: #2c3b35;
  --color-borde: #2e3b36; /* decorativo: contorno del segmentado */
  --color-borde-campo: #6b7570; /* 4.4:1 sobre la tarjeta clara */
  --color-tinta: #15211d; /* texto sobre la tarjeta clara */
  --color-tinta-suave: #4e5a55;
  --color-tinta-inversa: #f1f3ef; /* texto sobre el fondo oscuro */
  --color-tinta-inversa-suave: #c3cbc6;
  --color-accion: #0f5a3e;
  --color-accion-texto: #ffffff;
  --color-enlace: #2b55c4;
  --color-enlace-fuerte: #1c3e99;
  --color-acento: #8ff0cd;
  --color-disponible: #2ee6a6;
  --color-disponible-suave: #e3f7ee;
  --color-disponible-texto: #0f5a3e;
  --color-apartado: #f2bc5c;
  --color-apartado-suave: #fcefd6;
  --color-apartado-texto: #7a4b00;
  --color-negociacion: #f2bc5c;
  --color-negociacion-claro: #f8d896;
  --color-negociacion-texto: #15211d;
  --color-firma: #3a6fe0;
  --color-firma-texto: #ffffff;
  --color-arrendado: #7f8b86; /* la zona rentada se pinta además con --opacidad-zona */
  --color-arrendado-texto: #ffffff;
  --color-sin-dato: #c6cbc4;
  --color-sin-dato-claro: #eef0ec;
  --color-vence: #c2410c;
  --color-vence-texto: #f6a672; /* sobre el fondo oscuro (vista de teléfono) */
  --color-vence-suave: #fdf0e8;
  --color-ejemplo-fondo: #fbe7d3;
  --color-ejemplo-texto: #7a3b0c;
  --color-ejemplo-borde: #e8b98f;
}