/* ui.css — Sistema visual StructurAr 3D. Fuente única de verdad: tokens + componentes base.
   Incluir en cada pantalla con <link rel="stylesheet" href="ui.css"> y usar las clases .ui-*. */
:root{
  --ground:#eef1f4; --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#eceff2;
  --line:#e4e8ed; --line-strong:#d4d9e0;
  --ink:#23262b; --ink-2:#666e78; --ink-3:#9aa1ab;
  --amber:#eeaa2d; --amber-deep:#b07d1e; --amber-soft:#faedd0; --amber-hover:#f5bb4a;
  --green:#2f8a48; --green-soft:#e8f5ec;
  --danger:#d9534f; --danger-soft:#fbeceb;
  --radius:14px; --radius-sm:9px;
  --shadow:0 8px 24px rgba(30,35,45,.06);
  --shadow-pop:0 14px 40px rgba(30,35,45,.13);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}

/* ── Marca bicolor: Structur + Ar (ámbar) + 3D (gris) ── */
/* Texto en línea: "Structur" y "AR" van UNIDOS; el espacio antes de "3D" es un &nbsp; en el HTML. */
.ui-marca{ font-family:var(--font); font-weight:800; letter-spacing:.2px; color:var(--ink); line-height:1; }
.ui-marca .ar{ color:var(--amber); }
.ui-marca .d3{ color:var(--ink-3); font-weight:700; }

/* ── Botones: solo 3 tipos ── */
.ui-btn{ font-family:var(--font); font-size:13px; font-weight:700; border-radius:var(--radius-sm);
         padding:10px 18px; cursor:pointer; border:1px solid transparent; display:inline-flex;
         align-items:center; justify-content:center; gap:8px; transition:background .15s, border-color .15s, color .15s; }
.ui-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.ui-btn-primario{ background:var(--amber); color:#3a2c07; }
.ui-btn-primario:hover{ background:var(--amber-hover); }
.ui-btn-secundario{ background:transparent; border-color:var(--line-strong); color:var(--ink-2); }
.ui-btn-secundario:hover{ border-color:var(--amber); color:var(--amber-deep); }
.ui-btn-fantasma{ background:transparent; color:var(--ink-2); }
.ui-btn-fantasma:hover{ background:var(--surface-3); color:var(--ink); }

/* ── Superficie / tarjeta ── */
.ui-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ── Formularios ── */
.ui-label{ font-size:11px; color:var(--ink-2); font-weight:700; text-transform:uppercase;
           letter-spacing:.4px; display:block; margin-bottom:6px; }
.ui-input{ font-family:var(--font); width:100%; padding:11px 12px; border-radius:var(--radius-sm);
           border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
           font-size:14px; outline:none; transition:border-color .15s, background .15s; }
.ui-input:focus{ border-color:var(--amber); background:var(--surface); }
.ui-input::placeholder{ color:var(--ink-3); }

/* ── Chips de estado (forma + color semántico) ── */
.ui-pill{ font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:20px;
          display:inline-flex; align-items:center; gap:6px; }
.ui-pill-amber{ background:var(--amber-soft); color:var(--amber-deep); }
.ui-pill-green{ background:var(--green-soft); color:var(--green); }
.ui-pill-danger{ background:var(--danger-soft); color:var(--danger); }
.ui-pill-neutro{ background:var(--surface-3); color:var(--ink-2); }

/* ── Eyebrow / micro-etiqueta ── */
.ui-eyebrow{ font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-3); }

/* ── Barra de aplicación: cabecera unificada de TODAS las pantallas ──
   Zonas: izquierda (volver + marca), centro (contexto de la pantalla), derecha (acciones).
   Variante clara por defecto; .app-bar.oscura para las herramientas con interior oscuro. */
.app-bar{ display:flex; align-items:center; gap:16px; padding:11px 22px; flex:0 0 auto;
          background:var(--surface); border-bottom:1px solid var(--line); font-family:var(--font); }
.app-bar .app-izq{ display:flex; align-items:center; gap:14px; min-width:0; }
.app-bar .app-centro{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.app-bar .app-der{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* Volver a Proyectos: único botón de retorno, presente en toda pantalla */
.app-volver{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); text-decoration:none;
             font-size:13px; font-weight:600; padding:6px 11px; border-radius:var(--radius-sm);
             transition:background .15s, color .15s; white-space:nowrap; cursor:pointer; border:none; background:transparent; }
.app-volver:hover{ background:var(--surface-3); color:var(--ink); }
.app-bar .sep{ width:1px; height:20px; background:var(--line-strong); flex:0 0 auto; }

/* Marca en la barra: cubo ámbar + StructurAR (ámbar) 3D (gris) */
.app-marca{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:15px;
            letter-spacing:.2px; white-space:nowrap; }
.app-marca .cubo{ color:var(--amber-deep); }
.app-marca .n1{ color:var(--ink); } .app-marca .ar{ color:var(--amber); } .app-marca .d3{ color:var(--ink-3); font-weight:700; }

/* Título de la sección actual (centro de la barra) */
.app-seccion{ font-size:13.5px; font-weight:700; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.app-seccion i{ color:var(--amber-deep); }

/* ── Variante oscura (herramientas con interior oscuro: taller, optimización) ── */
.app-bar.oscura{ background:#1a1c1f; border-bottom:1px solid #2c2f34; }
.app-bar.oscura .app-volver{ color:#9aa1ab; }
.app-bar.oscura .app-volver:hover{ background:#26292e; color:#fff; }
.app-bar.oscura .sep{ background:#2c2f34; }
.app-bar.oscura .app-marca .n1{ color:#f2f4f7; }
.app-bar.oscura .app-marca .d3{ color:#7c828c; }
.app-bar.oscura .app-seccion{ color:#c3c8cf; }

/* ── Alias de compatibilidad (nombres viejos que ya usan algunas pantallas). A migrar. ── */
:root{ --bg:var(--ground); --txt:var(--ink); --txt-2:var(--ink-2); --txt-3:var(--ink-3); }