/* Metrados — hoja de estilos
   Marco de la familia CICOM (CICOM-UI): barra lateral blanca con la sigla del
   sistema, encabezado en su color e IBM Plex en el marco. El color de Metrados
   es el magenta de las capas de CAD: no se confunde con los otros sistemas
   (4D azul, QA verde azulado, PC naranja, EDMS violeta) ni con los estados de
   la revisión (aprobado verde, observado ámbar, falla rojo).
   El contenido conserva el lenguaje del plano: rótulo, tinta y «redline». */

@font-face { font-family: 'IBM Plex Sans'; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url(fonts/barlow-semi-condensed-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* identidad del sistema */
  --sis-color: #94336B; --sis-oscuro: #6E2550; --sis-tinte: #F6E8F0; --sis-borde: #E5C2D5;
  --cicom-azul: #1E3A5F;
  /* papel y tinta */
  --papel: #EDEFF2;
  --blanco: #ffffff;
  --tinta: #14243A;
  --tinta-2: #4B5563;
  --gris: #5B6575;
  --lapiz: #77808D;
  --trazo: #D5DAE1;
  --trazo-suave: #E6E9EE;
  --azul: #1E3A5F;          /* acciones: azul CICOM */
  --azul-claro: #EAEFF6;
  --redline: #B32B23;       /* correcciones y fallas */
  --redline-claro: #FBEAE9;
  --visto: #17754A;         /* aprobado */
  --visto-claro: #E4F2EA;
  --ambar: #9A6100;         /* avisos / observado */
  --ambar-claro: #FDF3E0;
  --radio: 5px;
  --fuente: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-ui: 'Barlow Semi Condensed', 'Roboto Condensed', 'Segoe UI Semibold', system-ui, sans-serif;
  --f-mo: 'IBM Plex Mono', Consolas, monospace;
  --riel: 15.2rem; --alto-barra: 3.6rem;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fuente); line-height: 1.45; }
a { color: var(--azul); }
:focus-visible { outline: 2px solid var(--sis-color); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-family: var(--f-ui); }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.07rem; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tenue { color: var(--tinta-2); }
.chico { font-size: .87rem; }
[hidden] { display: none !important; }

/* ── Marco: barra lateral + principal ─────────────────────────── */
.marco { display: flex; min-height: 100vh; }
.lateral { width: var(--riel); flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
           background: #fff; border-right: 1px solid #E1E5EB; font-family: var(--fuente); z-index: 30; }
html.menu-oculto .lateral { display: none; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sis-cuadro { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--sis-color); color: #fff;
              font-family: var(--f-ui); font-weight: 700; line-height: 1; }
.sis-sigla-fondo { position: absolute; font-family: var(--f-ui); font-weight: 700; line-height: 1; color: var(--sis-color); opacity: .09; pointer-events: none; user-select: none; }
.lateral-sistema { position: relative; overflow: hidden; flex: none; display: flex; align-items: center; gap: .74rem; padding: 1.33rem 1.04rem;
                   background: var(--sis-tinte); text-decoration: none; color: var(--tinta); }
.lateral-sistema .sis-sigla-fondo { right: -.9rem; top: -1.33rem; font-size: 8.9rem; }
.lateral-sistema .sis-cuadro { position: relative; width: 3.4rem; height: 3.4rem; border-radius: .8rem; font-size: 1.6rem; }
.lateral-sistema .sis-nombre { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lateral-sistema .sis-nombre strong { font-family: var(--f-ui); font-weight: 700; font-size: 1.32rem; line-height: 1.05; }
.lateral-sistema .sis-nombre img { height: 1.26rem; width: auto; align-self: flex-start; }
.lateral-sistema:hover .sis-nombre strong { color: var(--sis-oscuro); }
.lateral-marca { padding: 2px 14px 8px; }
.lateral-entorno { margin: 12px 0 0; padding: 2px 0; border: 1px solid #EBD5A6; border-radius: var(--radio); background: #FDF3E0; color: #8A5A00;
                   font-family: var(--f-ui); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.lateral-proyecto { margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: #F4F6F8; border: 1px solid #E1E5EB; display: flex; flex-direction: column; gap: 2px; }
.lateral-proyecto-rotulo { font-family: var(--f-mo); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sis-oscuro); }
.lateral-proyecto strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.lateral-proyecto a { font-size: 12px; color: var(--sis-oscuro); }
.nav { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radio); color: #3A4554; text-decoration: none; font-size: .94rem; }
.nav-item svg { flex: none; opacity: .85; }
.nav-item:hover { background: #F4F6F8; color: var(--tinta); }
.nav-item.on { background: var(--sis-tinte); color: var(--sis-oscuro); font-weight: 600; }
.lateral-pie { border-top: 1px solid #E1E5EB; padding: 10px 8px; flex: none; }
.usuario { display: flex; align-items: center; gap: 9px; padding: 4px 6px 8px; }
.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--sis-color); color: #fff; display: grid; place-items: center;
          font-family: var(--f-ui); font-weight: 700; font-size: .95rem; }
.usuario-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.usuario-txt strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-txt em { font-style: normal; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pie-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radio); color: var(--gris); }
.pie-ico:hover { background: #F4F6F8; color: var(--tinta); }
button.pie-ico { border: 0; background: none; cursor: pointer; padding: 0; }
.form-salir { margin: 0; }
.lateral-version { padding: 0 6px; font-family: var(--f-mo); font-size: 11px; color: var(--gris); }

.barra-sup { height: var(--alto-barra); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: var(--sis-color);
             border-bottom: 1px solid var(--sis-oscuro); color: #fff; position: sticky; top: 0; z-index: 20; }
.barra-sup h1 { font-size: 1.28rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.barra-proyecto { font-family: var(--f-mo); font-size: .8rem; opacity: .85; white-space: nowrap; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.barra-dominio { font-size: 13px; opacity: .85; white-space: nowrap; }
.btn-menu { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 30px; height: 30px; padding: 6px; border: 0; background: none; cursor: pointer; border-radius: var(--radio); flex: none; }
.btn-menu span { display: block; height: 2px; background: #fff; border-radius: 1px; }
.btn-menu:hover { background: rgba(255,255,255,.12); }
.btn-cicom { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.55);
             background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.btn-cicom:hover, .btn-cicom:focus-visible { background: rgba(255,255,255,.2); border-color: #fff; }

.contenido { width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px; }
.migas { display: flex; gap: 8px; font-size: .9rem; margin-bottom: 12px; flex-wrap: wrap; }
.migas a { color: var(--sis-oscuro); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas .sep { color: var(--lapiz); }
.titulo-proyecto { font-size: 1.5rem; font-weight: 700; }

/* riel angosto: solo la sigla y los íconos */
@media (max-width: 900px) and (min-width: 761px) {
  :root { --riel: 64px; }
  .lateral-sistema { padding: 10px 4px; justify-content: center; }
  .lateral-sistema .sis-nombre, .lateral-sistema .sis-sigla-fondo, .lateral-proyecto, .nav-item span, .usuario-txt, .lateral-version { display: none; }
  .lateral-sistema .sis-cuadro { width: 44px; height: 44px; border-radius: 10px; font-size: 20px; }
  .lateral-marca { padding: 2px 6px 6px; }
  .lateral-entorno { font-size: 7px; letter-spacing: .04em; }
  .nav-item { justify-content: center; }
  .usuario { flex-direction: column; padding: 4px 0; }
}
/* celular: el menú sale encima */
@media (max-width: 760px) {
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-102%); transition: transform .2s; box-shadow: 0 14px 44px rgba(13,17,23,.22); width: 17rem; }
  html.menu-oculto .lateral { display: flex; }
  html.menu-abierto .lateral { transform: none; }
  .barra-dominio, .barra-proyecto { display: none; }
  .contenido { padding: 16px; }
  .barra-sup { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }

/* ── Pantalla de acceso (sin sesión, errores del ingreso) ─────── */
body.pantalla-acceso { background: var(--sis-tinte); }
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
.acceso-arte { position: relative; overflow: hidden; padding: 72px 64px 56px; }
.acceso-arte .sis-sigla-fondo { right: -40px; bottom: 40px; font-size: 380px; }
.sis-identidad { position: relative; display: flex; align-items: center; gap: 20px; }
.acceso-arte .sis-cuadro { width: 88px; height: 88px; border-radius: 18px; font-size: 40px; }
.acceso-arte .sis-nombre { display: flex; flex-direction: column; gap: 8px; }
.acceso-arte .sis-nombre strong { font-family: var(--f-ui); font-weight: 700; font-size: 34px; line-height: 1; }
.sis-solucion { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
.sis-solucion img { height: 24px; width: auto; }
.acceso-lema { position: relative; margin-top: 88px; max-width: 30ch; font-family: var(--f-ui); font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; color: var(--tinta); }
.acceso-panel { background: #fff; padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; gap: 14px; border-left: 1px solid var(--sis-borde); }
.acceso-panel h1 { font-size: 1.9rem; }
.acceso-panel p { margin: 0; max-width: 46ch; color: var(--tinta-2); font-size: 1.02rem; }
.acceso-panel .btn { align-self: flex-start; margin-top: 8px; }
.acceso-pie { margin-top: 32px !important; font-family: var(--f-mo); font-size: .8rem !important; color: var(--gris) !important; }
@media (max-width: 820px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-arte { padding: 36px 24px 28px; }
  .acceso-lema { margin-top: 32px; font-size: 24px; }
  .acceso-arte .sis-sigla-fondo { font-size: 220px; bottom: -30px; }
  .acceso-panel { padding: 36px 24px; border-left: 0; border-top: 1px solid var(--sis-borde); justify-content: flex-start; }
}

/* ── Rótulo del plano (title block) ───────────────────────────── */
.rotulo { display: grid; grid-template-columns: 2.4fr repeat(5, minmax(90px, 1fr)); border: 1.5px solid var(--tinta); background: var(--blanco); margin-bottom: 20px; }
.rotulo > div { padding: 8px 12px; border-left: 1px solid var(--tinta); }
.rotulo > div:first-child { border-left: 0; }
.rotulo small { display: block; font-size: .78rem; color: var(--tinta-2); }
.rotulo strong { display: block; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; font-family: var(--f-ui); }
.rotulo .codigo strong { font-size: 1.35rem; }
@media (max-width: 900px) { .rotulo { grid-template-columns: 1fr 1fr; } .rotulo > div { border-left: 0; border-top: 1px solid var(--tinta); } .rotulo > div:first-child { grid-column: 1 / -1; border-top: 0; } }

/* ── Botones y formularios ────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 500; font-size: .93rem; padding: 7px 14px; border-radius: var(--radio);
       border: 1px solid var(--trazo); background: var(--blanco); color: var(--tinta); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--tinta-2); }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover { background: #224a6e; }
.btn.peligro { color: var(--redline); }
.btn.peligro:hover { border-color: var(--redline); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.chico { padding: 4px 10px; font-size: .87rem; }
label { font-weight: 500; font-size: .9rem; display: block; margin-bottom: 4px; }
input[type=text], input[type=number], select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--trazo); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 2px var(--azul-claro); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 16px; align-items: end; }
.ayuda { font-size: .85rem; color: var(--tinta-2); margin-top: 4px; }

/* ── Paneles ──────────────────────────────────────────────────── */
.panel { background: var(--blanco); border: 1px solid var(--trazo); border-radius: var(--radio); margin-bottom: 20px; }
.panel > header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--trazo-suave); }
.panel > header h2, .panel > header h3 { flex: 1; min-width: 200px; }
.panel .cuerpo { padding: 16px; }
.cabecera { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecera > div:first-child { flex: 1; min-width: 260px; }
.cabecera p { margin: 4px 0 0; color: var(--tinta-2); }

.aviso-caja { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 16px; border: 1px solid; }
.aviso-caja.error { background: var(--redline-claro); border-color: #efc4bf; color: #7d2118; }
.aviso-caja.ok { background: var(--visto-claro); border-color: #bcd9c5; color: #1f4f31; }
.aviso-caja.info { background: var(--azul-claro); border-color: #c4d5e6; color: #1d3f5f; }

/* ── Tablas de datos ──────────────────────────────────────────── */
.tabla-scroll { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.datos th { text-align: left; font-weight: 600; font-size: .84rem; color: var(--tinta-2); padding: 7px 10px; border-bottom: 1.5px solid var(--tinta); background: var(--blanco); position: sticky; top: 0; }
table.datos td { padding: 7px 10px; border-bottom: 1px solid var(--trazo-suave); vertical-align: top; }
table.datos tr:last-child td { border-bottom: 0; }
table.datos th.num, table.datos td.num { text-align: right; }
table.datos tfoot td { border-top: 1.5px solid var(--tinta); font-weight: 600; }
tr.seccion td { background: var(--papel); font-weight: 600; font-size: .85rem; color: var(--tinta-2); padding: 5px 10px; }
.fila-link { cursor: pointer; }
.fila-link:hover td { background: #f1f4f6; }
.vacio { padding: 36px 16px; text-align: center; color: var(--tinta-2); }
.vacio strong { display: block; color: var(--tinta); font-size: 1.05rem; margin-bottom: 4px; }

/* ── Etiquetas de estado ──────────────────────────────────────── */
.marca-estado { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .8rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.e-pendiente { background: #eef0f1; color: var(--tinta-2); }
.e-aprobada, .e-ok { background: var(--visto-claro); color: var(--visto); }
.e-observada, .e-sin_tablas { background: var(--ambar-claro); color: var(--ambar); }
.e-excluida { background: #f1f1f1; color: var(--lapiz); text-decoration: line-through; }
.e-error, .e-falla { background: var(--redline-claro); color: var(--redline); }
.e-info { background: var(--azul-claro); color: var(--azul); }
.e-reemplazado { background: #f1f1f1; color: var(--lapiz); }

/* Barra de avance de revisión */
.avance { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #e8eaeb; min-width: 120px; }
.avance i { display: block; height: 100%; }
.avance .a { background: var(--visto); } .avance .o { background: #d9a43a; } .avance .x { background: #b9bfc3; }

/* ── Revisión del plano ───────────────────────────────────────── */
.revision { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.revision > * { min-width: 0; }
@media (max-width: 960px) { .revision { grid-template-columns: 1fr; } .indice { position: static; } }
.indice { position: sticky; top: 16px; background: var(--blanco); border: 1px solid var(--trazo); border-radius: var(--radio); padding: 12px; font-size: .92rem; }
.indice h3 { font-size: .9rem; color: var(--tinta-2); font-weight: 600; margin: 4px 0 6px; }
.indice ul { list-style: none; margin: 0 0 10px; padding: 0; }
.indice li a { display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px; border-radius: 3px; text-decoration: none; color: var(--tinta); }
.indice li a:hover { background: var(--azul-claro); }
.indice li a span { color: var(--lapiz); font-variant-numeric: tabular-nums; }
.indice .hoja-nombre { font-weight: 600; padding: 6px 6px 2px; }
.indice .btn { white-space: normal; text-align: left; justify-content: flex-start; }
table.datos td > a > strong { white-space: nowrap; }

.tabla-plano { scroll-margin-top: 16px; }
.tabla-plano > header .clase { font-size: .85rem; color: var(--tinta-2); }
.controles { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--trazo-suave); background: #fbfbfa; font-size: .88rem; }
.controles div { display: flex; gap: 8px; align-items: baseline; }
.controles .marca-estado { min-width: 64px; text-align: center; }

/* Cantidad: valor del plano y corrección en "redline" */
.cant { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cant input { width: 110px; text-align: right; font-variant-numeric: tabular-nums; padding: 4px 6px; }
.cant .original { color: var(--redline); text-decoration: line-through; font-size: .85rem; }
.cant input.corregida { border-color: var(--redline); color: var(--redline); font-weight: 600; background: var(--redline-claro); }

.acciones { display: flex; gap: 4px; justify-content: flex-end; }
.acciones button { font: inherit; font-size: .82rem; font-weight: 600; border: 1px solid var(--trazo); background: var(--blanco); border-radius: var(--radio); padding: 3px 8px; cursor: pointer; color: var(--tinta-2); }
.acciones button:hover { border-color: var(--tinta-2); color: var(--tinta); }
.acciones button[data-on="1"][data-estado=aprobada] { background: var(--visto); border-color: var(--visto); color: #fff; }
.acciones button[data-on="1"][data-estado=observada] { background: var(--ambar); border-color: var(--ambar); color: #fff; }
.acciones button[data-on="1"][data-estado=excluida] { background: var(--lapiz); border-color: var(--lapiz); color: #fff; }
tr[data-estado=excluida] td:not(.no-tachar) { color: var(--lapiz); text-decoration: line-through; }
tr[data-estado=aprobada] td:first-child { box-shadow: inset 3px 0 0 var(--visto); }
tr[data-estado=observada] td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
.avisos { margin: 4px 0 0; padding: 0; list-style: none; font-size: .84rem; color: var(--ambar); }
.avisos li::before { content: "⚠ "; }
.desc { max-width: 520px; }
.desc small { display: block; color: var(--lapiz); }
select.tipo { font-size: .85rem; padding: 3px 4px; width: auto; max-width: 190px; }
input.obs { font-size: .85rem; padding: 3px 6px; margin-top: 4px; }

/* Tabla original del plano */
details.original-plano { border-top: 1px solid var(--trazo-suave); }
details.original-plano summary { padding: 8px 16px; cursor: pointer; font-size: .9rem; color: var(--azul); }
.grilla-original { font-size: .85rem; }
.grilla-original td { border: 1px solid var(--trazo-suave); padding: 3px 6px; }
.grilla-original th { border: 1px solid var(--trazo); background: var(--papel); padding: 3px 6px; position: static; }

/* Resumen */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--trazo); background: var(--blanco); border-radius: var(--radio); margin-bottom: 20px; }
.cifras div { padding: 12px 16px; border-left: 1px solid var(--trazo-suave); }
.cifras div:first-child { border-left: 0; }
.cifras b { display: block; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cifras span { font-size: .87rem; color: var(--tinta-2); }

.pestanas { display: flex; gap: 2px; border-bottom: 1.5px solid var(--tinta); margin-bottom: 20px; }
.pestanas a { padding: 8px 16px; text-decoration: none; color: var(--tinta-2); font-weight: 500; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0; }
.pestanas a[aria-current=page] { background: var(--blanco); border-color: var(--tinta); color: var(--tinta); margin-bottom: -1.5px; border-bottom: 1.5px solid var(--blanco); }

.toast { position: fixed; bottom: 20px; right: 20px; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: var(--radio); font-size: .92rem; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 10; }
.toast.ver { opacity: 1; transform: none; }
.toast.error { background: var(--redline); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

.cargando { position: fixed; inset: 0; background: rgba(246,247,245,.85); display: none; align-items: center; justify-content: center; z-index: 20; font-size: 1.05rem; }
.cargando.ver { display: flex; }
.cargando div { background: var(--blanco); border: 1px solid var(--trazo); padding: 18px 24px; border-radius: var(--radio); }

/* ── Configuración y permisos ──────────────────────────────── */
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 14px 0 16px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--trazo); border-radius: var(--radio); cursor: pointer; font-weight: 400; margin: 0; }
.opcion:has(input:checked) { border-color: var(--sis-color); background: var(--sis-tinte); }
.opcion input { margin-top: 3px; accent-color: var(--sis-color); }
.opcion strong { display: block; }
.opcion small { display: block; color: var(--tinta-2); font-size: .84rem; }
.opcion.apagada { opacity: .6; cursor: default; }
dl.ficha { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
dl.ficha dt { font-family: var(--f-mo); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
dl.ficha dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.etq-b2 { display: inline-block; font-family: var(--f-mo); font-size: .7rem; padding: 0 5px; border: 1px solid var(--trazo); border-radius: 3px; color: var(--gris); }
.solo-lectura .cant input, .solo-lectura select.tipo { background: transparent; border-color: transparent; color: inherit; opacity: 1; }
.solo-lectura .cant input.corregida { color: var(--redline); }

/* ── Visor del plano y modelo 3D ─────────────────────────────── */
button.enlace { background: none; border: 0; padding: 0 0 0 6px; font: inherit; font-size: .84rem; font-weight: 500; color: var(--azul); cursor: pointer; text-decoration: underline; }
dialog.visor { width: min(96vw, 1500px); height: 92vh; max-height: 92vh; padding: 0; border: 1.5px solid var(--tinta); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); }
dialog.visor[open] { display: flex; flex-direction: column; }
dialog.visor::backdrop { background: rgba(29, 42, 51, .55); }
.visor > header { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--trazo); flex-wrap: wrap; }
.visor > header h2 { flex: 1; min-width: 200px; font-size: 1.05rem; }
.visor > header select { width: auto; max-width: 260px; }
.visor-pestanas { display: flex; gap: 2px; }
.visor-pestanas button { font: inherit; font-weight: 500; padding: 6px 14px; border: 1px solid var(--trazo); background: var(--papel); color: var(--tinta-2); cursor: pointer; border-radius: var(--radio); }
.visor-pestanas button[aria-selected=true] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.visor-pestanas button:disabled { opacity: .4; cursor: default; }
.visor-plano, .visor-3d { flex: 1; min-height: 0; display: flex; }
.visor-plano { flex-direction: column; }
.visor-plano[hidden], .visor-3d[hidden] { display: none; }
.visor-herr { display: flex; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--trazo-suave); flex-wrap: wrap; }
.lienzo { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fbfbf9; cursor: grab; touch-action: none; }
.lienzo.arrastrando { cursor: grabbing; }
.lienzo svg { width: 100%; height: 100%; display: block; }
.lienzo .resalte { fill: rgba(44, 90, 133, .06); stroke: var(--azul); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 8 5; }
.lienzo .resalte-tabla { fill: rgba(192, 57, 43, .05); stroke: var(--redline); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.visor-3d { gap: 0; }
.escena-marco { flex: 1; min-width: 0; position: relative; display: flex; }
.escena { flex: 1; min-width: 0; position: relative; background: linear-gradient(#f4f6f7, #e4e8ea); }
.camaras { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; }
.escena canvas { display: block; width: 100% !important; height: 100% !important; }
.medidas { width: 360px; flex: none; overflow-y: auto; padding: 12px 16px; border-left: 1px solid var(--trazo); font-size: .9rem; }
.medidas fieldset { border: 0; border-top: 1px solid var(--trazo-suave); padding: 8px 0 4px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.medidas legend { font-weight: 600; font-size: .9rem; padding: 0 4px 0 0; }
.medidas label { font-weight: 500; font-size: .82rem; color: var(--tinta-2); margin: 0; }
.medidas input { padding: 4px 6px; font-variant-numeric: tabular-nums; }
.nota-3d { margin: 0 0 8px; font-size: .86rem; color: var(--tinta-2); }
.comparacion { margin: 10px 0; font-size: .86rem; }
.comparacion td, .comparacion th { padding: 4px 6px; }
.dif-ok { color: var(--visto); font-weight: 600; } .dif-mal { color: var(--redline); font-weight: 600; }
.acciones-3d { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-bottom: 8px; }
@media (max-width: 900px) { .visor-3d { flex-direction: column; } .medidas { width: auto; border-left: 0; border-top: 1px solid var(--trazo); max-height: 45%; } .escena, .escena-marco { min-height: 280px; } }