/* Oficina virtual Chef Daniel Martín · negro, blanco, beige y dorado corporativo #C6A566 */
:root {
  --dorado: #C6A566; --dorado-hondo: #9C7F45; --dorado-suave: rgba(198,165,102,.14);
  --negro: #0E0E0F; --negro-2: #17171A; --negro-3: #222226;
  --fondo: #F6F2EA; --superficie: #FFFFFF; --superficie-2: #FBF8F3; --beige: #EFE7DA; --borde: #E6DDCD; --borde-fuerte: #D6C9B3;
  --texto: #18181B; --texto-2: #5E5A52; --texto-3: #8C867B;
  --lateral: #0E0E0F; --lateral-texto: #CFC8BB; --lateral-activo: #FFFFFF;
  --sombra: 0 1px 2px rgba(20,16,8,.04), 0 6px 24px rgba(20,16,8,.06);
  --sombra-alta: 0 12px 48px rgba(20,16,8,.18);
  --radio: 14px; --radio-s: 9px;
  --e-diseno: #8A7B63; --e-diseno-f: #F1EBE0;
  --e-pendiente: #A86B12; --e-pendiente-f: #FBF0DC;
  --e-config: #2F6690; --e-config-f: #E3EEF6;
  --e-pruebas: #6B4FA0; --e-pruebas-f: #EEE8F7;
  --e-operativo: #2E7D4F; --e-operativo-f: #E2F2E8;
  --e-pausado: #5C6670; --e-pausado-f: #E9ECEF;
  --e-error: #B3261E; --e-error-f: #FBE5E3;
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0F0F11; --superficie: #17171A; --superficie-2: #1C1C20; --beige: #2A2620; --borde: #2A2A2F; --borde-fuerte: #3A3A40;
    --texto: #F1ECE3; --texto-2: #B9B2A6; --texto-3: #8C867B; --dorado-suave: rgba(198,165,102,.16);
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px rgba(0,0,0,.25); --sombra-alta: 0 12px 48px rgba(0,0,0,.5);
    --e-diseno-f: #26231E; --e-pendiente-f: #2D2414; --e-config-f: #16242F; --e-pruebas-f: #231C30; --e-operativo-f: #142519; --e-pausado-f: #1F2328; --e-error-f: #2F1614;
    --e-diseno: #CDBB9B; --e-pendiente: #E7B45E; --e-config: #7FB2DA; --e-pruebas: #B39CE0; --e-operativo: #7CCB98; --e-pausado: #A9B4BF; --e-error: #F08A80;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #0F0F11; --superficie: #17171A; --superficie-2: #1C1C20; --beige: #2A2620; --borde: #2A2A2F; --borde-fuerte: #3A3A40;
  --texto: #F1ECE3; --texto-2: #B9B2A6; --texto-3: #8C867B; --dorado-suave: rgba(198,165,102,.16);
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px rgba(0,0,0,.25); --sombra-alta: 0 12px 48px rgba(0,0,0,.5);
  --e-diseno-f: #26231E; --e-pendiente-f: #2D2414; --e-config-f: #16242F; --e-pruebas-f: #231C30; --e-operativo-f: #142519; --e-pausado-f: #1F2328; --e-error-f: #2F1614;
  --e-diseno: #CDBB9B; --e-pendiente: #E7B45E; --e-config: #7FB2DA; --e-pruebas: #B39CE0; --e-operativo: #7CCB98; --e-pausado: #A9B4BF; --e-error: #F08A80;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); margin: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 650; }
h2 { font-size: 18px; font-weight: 620; }
h3 { font-size: 15px; font-weight: 620; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.g { width: 26px; height: 26px; }
.ico.p { width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; border-radius: 6px; }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--dorado); color: var(--negro); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cargando { display: grid; place-items: center; height: 100vh; color: var(--texto-3); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }

/* ---------- estructura ---------- */
.raiz { min-height: 100vh; }
.app { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }
.lateral { background: var(--lateral); color: var(--lateral-texto); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.marca { padding: 26px 24px 18px; border-bottom: 1px solid #1F1F22; }
.marca-nombre { color: #fff; font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: .34em; font-size: 15px; }
.marca-sub { color: var(--dorado); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin-top: 6px; }
.nav { padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 1px; }
.nav-grupo { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6F6A62; padding: 16px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--lateral-texto); font-size: 14px; transition: background .18s, color .18s; }
.nav a:hover { background: #1A1A1D; color: #fff; }
.nav a[aria-current="page"] { background: linear-gradient(90deg, rgba(198,165,102,.18), rgba(198,165,102,.04)); color: var(--lateral-activo); box-shadow: inset 2px 0 0 var(--dorado); }
.nav a[aria-current="page"] .ico { color: var(--dorado); }
.nav .contador { margin-left: auto; background: var(--dorado); color: var(--negro); font-size: 11px; font-weight: 700; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; }
.lateral-pie { margin-top: auto; padding: 16px 24px 22px; border-top: 1px solid #1F1F22; font-size: 12px; color: #77716A; }
.lateral-pie b { color: var(--lateral-texto); font-weight: 600; }

.cuerpo { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 32px; background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--borde); }
.boton-menu { display: none; }
.buscador { position: relative; flex: 1; max-width: 560px; }
.buscador input { width: 100%; height: 42px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); padding: 0 14px 0 42px; outline: none; transition: border-color .15s, box-shadow .15s; }
.buscador input:focus { border-color: var(--dorado); box-shadow: 0 0 0 4px var(--dorado-suave); }
.buscador > .ico { position: absolute; left: 13px; top: 11px; color: var(--texto-3); }
.resultados { position: absolute; top: 48px; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); max-height: 60vh; overflow: auto; padding: 6px; }
.resultados a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; text-decoration: none; }
.resultados a:hover, .resultados a:focus { background: var(--superficie-2); }
.resultados small { color: var(--texto-3); margin-left: auto; font-size: 12px; }
.barra-acciones { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.icono-boton { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; color: var(--texto-2); transition: border-color .15s, color .15s; }
.icono-boton:hover { border-color: var(--dorado); color: var(--texto); }
.icono-boton .punto { position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--dorado); color: var(--negro); font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.usuario { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 12px; height: 42px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); }
.usuario .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--negro); color: var(--dorado); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.usuario span { font-size: 13px; font-weight: 550; }

main { padding: 28px 32px 64px; max-width: 1360px; width: 100%; animation: entrar .28s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera .antetitulo { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-hondo); font-weight: 600; margin-bottom: 6px; }
.cabecera p { color: var(--texto-2); margin-top: 6px; max-width: 760px; }
.migas { font-size: 13px; color: var(--texto-3); margin-bottom: 10px; }
.migas a { text-decoration: none; color: var(--texto-2); }
.migas a:hover { color: var(--dorado-hondo); }

/* ---------- piezas ---------- */
.rejilla { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .r3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .r4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rauto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); min-width: 0; }
.tarjeta.pulsable { cursor: pointer; transition: transform .18s ease, border-color .18s, box-shadow .18s; text-align: left; width: 100%; }
.tarjeta.pulsable:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); box-shadow: 0 2px 4px rgba(20,16,8,.05), 0 14px 36px rgba(20,16,8,.10); }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tarjeta-cab h2, .tarjeta-cab h3 { display: flex; align-items: center; gap: 10px; }
.tarjeta-cab .ico { color: var(--dorado-hondo); }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .etq { font-size: 12.5px; color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.kpi .etq .ico { color: var(--dorado-hondo); width: 18px; height: 18px; }
.kpi .num { font-family: var(--fuente-titulo); font-size: 32px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.kpi .det { font-size: 12.5px; color: var(--texto-3); }
.aviso-fase { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(120deg, var(--negro) 0%, var(--negro-3) 100%); color: #EDE6D8; border-radius: var(--radio); padding: 18px 22px; margin-bottom: 20px; border: 1px solid #2A2A2E; }
.aviso-fase .ico { color: var(--dorado); margin-top: 2px; }
.aviso-fase b { color: #fff; }
.aviso-fase p { color: #BDB5A7; font-size: 13.5px; margin-top: 3px; }
.vacio { color: var(--texto-3); font-size: 14px; padding: 18px; text-align: center; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-s); }
.nota { font-size: 13px; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 10px 12px; }
.muted { color: var(--texto-3); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li { padding: 10px 0; border-top: 1px solid var(--borde); display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.lista li:first-child { border-top: 0; }
.lista .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lista .f { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.puntos { margin: 0; padding-left: 18px; } .puntos li { margin: 3px 0; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-2); text-decoration: none; white-space: nowrap; }
a.etiqueta:hover { border-color: var(--dorado); }

.estado { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 650; letter-spacing: .05em; padding: 4px 10px 4px 9px; border-radius: 99px; white-space: nowrap; text-transform: uppercase; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-diseno { color: var(--e-diseno); background: var(--e-diseno-f); }
.e-pendiente { color: var(--e-pendiente); background: var(--e-pendiente-f); }
.e-config { color: var(--e-config); background: var(--e-config-f); }
.e-pruebas { color: var(--e-pruebas); background: var(--e-pruebas-f); }
.e-operativo { color: var(--e-operativo); background: var(--e-operativo-f); }
.e-operativo::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-operativo) 25%, transparent); animation: latido 2.4s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 5px transparent; } }
.e-pausado { color: var(--e-pausado); background: var(--e-pausado-f); }
.e-error { color: var(--e-error); background: var(--e-error-f); }
.e-persona { color: var(--dorado-hondo); background: var(--dorado-suave); }
.demo { display: inline-flex; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 2px 7px; border-radius: 5px; color: var(--negro); background: repeating-linear-gradient(135deg, #E4CF9F 0 6px, #C6A566 6px 12px); }
.prio { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--borde); color: var(--texto-2); }
.prio-urgente { color: var(--e-error); border-color: currentColor; } .prio-alta { color: var(--e-pendiente); border-color: currentColor; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--superficie); cursor: pointer; font-size: 14px; font-weight: 550; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.boton:hover { border-color: var(--dorado); }
.boton:active { transform: scale(.98); }
.boton.principal { background: var(--negro); color: #fff; border-color: var(--negro); }
.boton.principal:hover { background: var(--negro-3); }
.boton.oro { background: var(--dorado); color: var(--negro); border-color: var(--dorado); }
.boton.peligro { color: var(--e-error); }
.boton.mini { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.filtros select, .filtros input, .campo input, .campo select, .campo textarea { height: 38px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); padding: 0 12px; outline: none; }
.campo textarea { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; width: 100%; line-height: 1.45; }
.filtros select:focus, .filtros input:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--dorado); box-shadow: 0 0 0 4px var(--dorado-suave); }
.chip-filtro { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; font-size: 13px; }
.chip-filtro[aria-pressed="true"] { background: var(--negro); color: #fff; border-color: var(--negro); }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo input, .campo select { width: 100%; }
.campo small { color: var(--texto-3); font-size: 12px; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.pulsable { cursor: pointer; } tr.pulsable:hover td { background: var(--superficie-2); }

/* ---------- organigrama ---------- */
.org { display: flex; flex-direction: column; align-items: center; padding: 8px 0 24px; overflow-x: auto; }
.org-nivel { display: flex; justify-content: center; gap: 16px; position: relative; }
.org-linea { width: 2px; height: 34px; background: linear-gradient(var(--dorado), var(--borde-fuerte)); }
.org-hijos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 34px 18px; padding-top: 34px; width: 100%; max-width: 1080px; }
.org-hijos::before { content: ""; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 2px; background: var(--borde-fuerte); }
.org-hijos > .nodo::before { content: ""; position: absolute; top: -34px; left: 50%; width: 2px; height: 34px; background: var(--borde-fuerte); }
.org-hijos > .nodo:nth-child(n+4)::before { display: none; }
.nodo { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 16px; width: 100%; max-width: 340px; justify-self: center; box-shadow: var(--sombra); cursor: pointer; text-align: left; transition: transform .2s ease, border-color .2s, box-shadow .2s; }
.nodo:hover { transform: translateY(-3px); border-color: var(--dorado); box-shadow: 0 16px 40px rgba(20,16,8,.12); }
.nodo-cab { display: flex; align-items: center; gap: 12px; }
.nodo-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--dorado-suave); color: var(--dorado-hondo); flex: none; }
.nodo h3 { font-size: 14.5px; line-height: 1.3; }
.nodo .id { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); }
.nodo-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--texto-3); }
.nodo.dg { background: var(--negro); color: #fff; border-color: #2B2B30; width: 340px; }
.nodo.dg .nodo-ico { background: rgba(198,165,102,.18); color: var(--dorado); }
.nodo.dg .id, .nodo.dg .nodo-pie { color: #A39C90; }
.nodo.director { border-color: var(--dorado); box-shadow: 0 0 0 4px var(--dorado-suave), var(--sombra); width: 340px; }
.org-futuro { margin-top: 30px; width: 100%; max-width: 1080px; }
.org-dept { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); margin: 26px 0 12px; text-align: center; }

/* ---------- ficha ---------- */
.ficha-cab { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ficha-cab .nodo-ico { width: 60px; height: 60px; border-radius: 16px; }
.ficha-cab .ico { width: 28px; height: 28px; }
.ficha-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 13px; color: var(--texto-2); }
.ficha-meta b { color: var(--texto); font-weight: 600; }
.secciones { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 20px; }
details.seccion { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); }
details.seccion[open] { border-color: var(--borde-fuerte); }
details.seccion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 600; font-size: 14px; }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary .n { font-family: var(--mono); font-size: 11px; color: var(--dorado-hondo); width: 22px; }
details.seccion > summary .chev { margin-left: auto; transition: transform .2s; color: var(--texto-3); }
details.seccion[open] > summary .chev { transform: rotate(180deg); }
.seccion-cuerpo { padding: 0 16px 16px 48px; font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.seccion-cuerpo .acciones { margin-top: 12px; }
.pendiente { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--e-pendiente); background: var(--e-pendiente-f); padding: 3px 8px; border-radius: 6px; }
.calc { font-size: 11px; color: var(--texto-3); }

/* ---------- flujos ---------- */
.flujo { display: flex; flex-direction: column; gap: 0; position: relative; }
.paso { display: grid; grid-template-columns: 44px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.paso::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: repeating-linear-gradient(var(--borde-fuerte) 0 5px, transparent 5px 10px); }
.paso:last-child::before { display: none; }
.paso-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--borde-fuerte); font-family: var(--mono); font-size: 13px; font-weight: 700; }
.paso.aprob .paso-n { background: var(--negro); color: var(--dorado); border-color: var(--negro); }
.paso-c { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.paso.aprob .paso-c { border-color: var(--dorado); background: color-mix(in srgb, var(--dorado) 7%, var(--superficie)); }

/* ---------- barras de informe ---------- */
.barra-dato { display: grid; grid-template-columns: 180px 1fr 44px; gap: 12px; align-items: center; font-size: 13px; margin: 8px 0; }
.barra-pista { height: 10px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borde); overflow: hidden; }
.barra-relleno { height: 100%; width: 0; background: linear-gradient(90deg, var(--dorado-hondo), var(--dorado)); border-radius: 99px; transition: width .6s ease; }

/* ---------- capas: diálogo, panel, avisos ---------- */
.capa { position: fixed; inset: 0; background: rgba(10,10,12,.48); backdrop-filter: blur(3px); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 6vh 16px; overflow-y: auto; animation: aparecer .2s ease; }
.capa[hidden] { display: none; }
@keyframes aparecer { from { opacity: 0; } }
.dialogo { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-alta); width: 100%; max-width: 640px; animation: subir .24s cubic-bezier(.2,.8,.2,1); }
.dialogo.ancho { max-width: 860px; }
@keyframes subir { from { transform: translateY(14px) scale(.985); opacity: 0; } }
.dialogo-cab { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.dialogo-cab h2 { flex: 1; }
.dialogo-cuerpo { padding: 16px 22px; }
.dialogo-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; flex-wrap: wrap; }
.contenido-exacto { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; max-height: 260px; overflow: auto; }
.panel-notif { position: fixed; top: 64px; right: 24px; width: min(380px, calc(100vw - 32px)); background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-alta); z-index: 40; padding: 14px; max-height: 70vh; overflow: auto; animation: subir .2s ease; }
.avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aviso { background: var(--negro); color: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: var(--sombra-alta); font-size: 14px; display: flex; gap: 10px; align-items: center; animation: subir .2s ease; max-width: 92vw; }
.aviso.error { background: var(--e-error); }
.aviso .ico { color: var(--dorado); } .aviso.error .ico { color: #fff; }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.acceso-arte { background: radial-gradient(1200px 600px at 20% 10%, #24211B 0%, #0E0E0F 60%); color: #EDE6D8; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.acceso-arte .marca-nombre { font-size: 20px; }
.acceso-arte h1 { font-size: 40px; line-height: 1.12; color: #fff; max-width: 520px; font-weight: 600; letter-spacing: -.02em; }
.acceso-arte h1 em { font-style: normal; color: var(--dorado); }
.acceso-arte p { color: #A9A194; max-width: 460px; margin-top: 16px; }
.acceso-form { display: grid; place-items: center; padding: 32px 20px; }
.acceso-form form { width: 100%; max-width: 380px; }
.acceso-form h2 { font-size: 24px; margin-bottom: 6px; }
.acceso-form .boton { width: 100%; height: 46px; margin-top: 6px; }
.acceso-form input { height: 46px !important; }

/* ---------- barra inferior móvil ---------- */
.tabbar { display: none; }

@media (max-width: 1180px) { .r4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .org-hijos { grid-template-columns: repeat(2, minmax(220px, 1fr)); } .org-hijos::before { left: 25%; right: 25%; } .org-hijos > .nodo:nth-child(n+3)::before { display: none; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 45; width: 288px; left: 0; top: 0; transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .app.menu-abierto .lateral { transform: none; box-shadow: var(--sombra-alta); }
  .app.menu-abierto::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 44; }
  .boton-menu { display: grid; }
  .barra { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .usuario span { display: none; }
  main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }
  .r2, .r3, .secciones { grid-template-columns: 1fr; }
  .org-hijos { grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
  .org-hijos::before, .org-hijos > .nodo::before { display: none; }
  .nodo.dg, .nodo.director { width: 100%; }
  .acceso { grid-template-columns: 1fr; } .acceso-arte { padding: 32px 24px; min-height: 0; } .acceso-arte h1 { font-size: 28px; } .acceso-arte .pie-arte { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--negro) 94%, transparent); backdrop-filter: blur(14px); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #222; }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: #9F988C; text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; position: relative; }
  .tabbar [aria-current="page"] { color: var(--dorado); }
  .tabbar .contador { position: absolute; top: 2px; left: calc(50% + 6px); background: var(--dorado); color: var(--negro); font-size: 9.5px; font-weight: 800; border-radius: 99px; padding: 0 5px; }
  .barra-dato { grid-template-columns: 110px 1fr 34px; }
  .panel-notif { right: 16px; top: 60px; }
  .dialogo-cab, .dialogo-cuerpo { padding-left: 18px; padding-right: 18px; } .dialogo-pie { padding: 0 18px 18px; }
  .seccion-cuerpo { padding-left: 16px; }
}
@media (max-width: 560px) { .r4 { grid-template-columns: 1fr 1fr; } .kpi .num { font-size: 26px; } .tarjeta { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .lateral, .barra, .tabbar { display: none; } .app { display: block; } }

/* ---------- v0.3 · capa operativa ---------- */
.chat-marco { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.chat-lista { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; max-height: 72vh; overflow: auto; }
.chat-lista li.activa { background: var(--dorado-suave); border-radius: var(--radio-s); }
.chat { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; min-height: 60vh; }
.chat-mensajes { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 62vh; }
.burbuja { max-width: 86%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borde); background: var(--superficie-2); }
.burbuja.yo { align-self: flex-end; background: var(--negro); color: #F1ECE3; border-color: var(--negro); }
.burbuja.yo .burbuja-cab span, .burbuja.yo a { color: var(--dorado); }
.burbuja-cab { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; margin-bottom: 6px; color: var(--texto-3); }
.burbuja-texto { line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.trabajando { align-self: flex-start; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .trabajando { animation: none; } }
.chat-form { border-top: 1px solid var(--borde); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-form textarea { width: 100%; resize: vertical; min-height: 70px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s); padding: 10px 12px; font: inherit; background: var(--superficie); color: var(--texto); }
.chat-pie { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--texto-2); }
a.ref { font-family: var(--mono); font-size: .9em; color: var(--dorado-hondo); text-decoration: none; border-bottom: 1px dotted currentColor; }
.burbuja.yo a.ref { color: var(--dorado); }
ul.arbol { list-style: none; margin: 0; padding-left: 0; }
ul.arbol ul.arbol { padding-left: 18px; border-left: 2px solid var(--borde); margin: 6px 0 6px 6px; }
ul.arbol li { padding: 5px 0; }
ul.arbol a.actual { font-weight: 700; color: var(--dorado-hondo); }
.pasos { display: flex; flex-direction: column; gap: 6px; }
.paso-trb { border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 8px 12px; background: var(--superficie-2); }
.paso-trb.fallo { border-color: var(--e-error); background: var(--e-error-f); }
.paso-trb summary { cursor: pointer; }
pre.json { white-space: pre-wrap; word-break: break-word; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 10px; font-family: var(--mono); font-size: .8rem; max-height: 340px; overflow: auto; }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.buscar-crm { display: flex; gap: 8px; align-items: center; flex: 1; max-width: 520px; }
.buscar-crm input { flex: 1; }
.demo.simulado { background: var(--e-pruebas-f); color: var(--e-pruebas); border-color: var(--e-pruebas); }
.nota.error { border-color: var(--e-error); background: var(--e-error-f); color: var(--e-error); }
.acciones-grandes { display: flex; gap: 12px; flex-wrap: wrap; }
.tarjeta h3 { margin-top: 14px; }
button[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) {
  .chat-marco { grid-template-columns: 1fr; }
  .chat-lista { max-height: 200px; }
  .burbuja { max-width: 100%; }
  .chat-mensajes { max-height: 55vh; }
}

/* v0.4 · Coordinador General */
.encargo-resumen { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--borde-fuerte); display: flex; flex-direction: column; gap: 6px; font-size: .86rem; }
.burbuja.yo .encargo-resumen { border-color: rgba(255,255,255,.2); }
.nodo.coordinador { border-color: var(--dorado); box-shadow: 0 0 0 2px var(--dorado-suave), var(--sombra); }
.acciones-grandes .boton { display: inline-flex; }
.panel-dg .kpi .det { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }