/* Ventana clara: jerarquía de lectura y marco discreto. */
#control .control__cabecera { display: flex; flex-direction: column; align-items: center; text-align: center; }
#control .eyebrow { justify-content: center; }
/* La línea de oro baja del titular y entra a la ventana. */
#control .control__hilo { display: block; width: 1px; height: clamp(48px, 7vh, 80px); margin-top: clamp(28px, 4vh, 40px); background: var(--oro); transform-origin: top; }
/* Panel a todo el ancho sobre el eje del hilo; debajo, sus cuatro anotaciones. */
#control .control__composicion { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(32px, 4vw, 48px); }
#control .control__figura { min-width: 0; }
#control .control__perspectiva { perspective: 1400px; }
#control .control__panel { overflow: hidden; border: 1px solid var(--hilo); border-radius: var(--radio-l); background: var(--blanco-calido); box-shadow: 0 2px 4px rgba(12, 24, 48, .025), 0 24px 56px rgba(12, 24, 48, .055); }
/* Misma ventana que #desarrolladores: barra, aros y separación idénticos. */
#control .control__barra { position: relative; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 20px; background: var(--marfil-2); border-bottom: 1px solid var(--hilo); }
/* Indicador de ambiente: el hilo de oro recorre la barra al pasar a Producción. */
#control .control__barra::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1.5px; background: var(--oro); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--expo); }
#control .control__panel[data-ambiente="produccion"] .control__barra::after { transform: scaleX(1); }
#control .control__punto { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--oro); }
#control .control__indicador { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--texto-2); font-size: .75rem; font-weight: 500; }
#control .control__indicador b { font-weight: 500; }
#control .control__indicador i { width: 8px; height: 8px; border: 1px solid var(--oro); border-radius: 50%; background: transparent; transition: background-color .35s, box-shadow .5s var(--expo); }
#control .control__panel[data-ambiente="produccion"] .control__indicador { color: var(--tinta); }
#control .control__panel[data-ambiente="produccion"] .control__indicador i { background: var(--oro); box-shadow: 0 0 0 4px var(--hilo); }
#control .control__aplicacion { display: grid; grid-template-columns: 176px minmax(0, 1fr); }
#control .control__lateral { background: var(--marfil-2); padding: 20px 10px; }
#control .control__lateral ul { display: grid; gap: 6px; }
#control .control__lateral li { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: .875rem; color: var(--texto-2); border-radius: var(--radio-s); }
#control .control__lateral li.control__activo { background: var(--blanco-calido); color: var(--tinta); box-shadow: 0 1px 3px rgba(12, 24, 48, .04); }
#control .control__lateral .icono { width: var(--ico-s, 20px); height: var(--ico-s, 20px); flex: none; }
#control .control__lateral li.control__activo .icono { color: var(--oro-texto); }
#control .control__principal { min-width: 0; padding: clamp(20px, 2.4vw, 32px); }
#control .control__empresa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
#control .control__empresa > p { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
#control .control__ambientes { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--radio-s); background: var(--ivory); isolation: isolate; }
#control .control__pildora { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: var(--radio-s); background: var(--blanco-calido); box-shadow: 0 1px 3px rgba(12, 24, 48, .08); transform: translateX(calc(var(--ambiente-indice, 0) * 100%)); transition: transform .45s var(--expo); }
#control .control__ambiente { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 16px; font-size: .8125rem; color: var(--texto-2); cursor: pointer; }
#control .control__ambiente input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#control .control__ambiente:has(input:focus-visible) { outline: 2px solid var(--oro-texto); outline-offset: 2px; border-radius: var(--radio-s); }
#control .control__ambiente input:checked + span { color: var(--tinta); font-weight: 600; }
#control .control__saldo { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border-radius: var(--radio-s); background: var(--ivory); }
#control .control__saldo > p { color: var(--texto-2); font-size: .8125rem; margin-bottom: 12px; }
#control .control__saldo > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
#control .control__saldo strong { font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
#control .control__saldo span { color: var(--texto-2); font-size: .75rem; font-weight: 500; }
#control .control__saldo-arcos { position: absolute; z-index: -1; top: 0; right: -32px; height: 100%; width: 210px; stroke: var(--oro); stroke-width: .7; opacity: .18; }
/* Saldo y las dos tarjetas comparten fila, como un resumen de un vistazo. */
#control .control__resumen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr); gap: 16px; margin-bottom: 32px; }
#control .control__tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#control .control__tarjeta { min-width: 0; padding: 20px; border: 1px solid rgba(12, 24, 48, .07); border-radius: var(--radio-s); }
#control .control__tarjeta .icono { width: var(--ico-s, 20px); height: var(--ico-s, 20px); margin-bottom: 10px; color: var(--oro-texto); }
#control .control__tarjeta h3 { font-size: .875rem; font-weight: 500; margin-bottom: 5px; }
#control .control__tarjeta p { font-size: .8125rem; color: var(--texto-2); overflow-wrap: anywhere; }
#control .control__registros h3 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
#control table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .875rem; }
#control col:nth-child(1) { width: 15%; }
#control col:nth-child(2) { width: 39%; }
#control col:nth-child(3) { width: 17%; }
#control col:nth-child(4) { width: 29%; }
#control th { padding: 10px 4px; color: var(--texto-2); font-weight: 400; background: var(--marfil-2); text-align: left; overflow-wrap: anywhere; }
#control td { height: 44px; padding: 10px 4px; font-family: var(--mono); font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(12, 24, 48, .065); overflow-wrap: anywhere; }
#control tbody tr:last-child td { border-bottom: 0; }
#control th:first-child, #control td:first-child { padding-left: 8px; }
#control th:last-child, #control td:last-child { text-align: right; padding-right: 8px; }
#control .control__estado { display: inline-flex; align-items: center; gap: 5px; }
#control .control__estado i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--oro); flex: none; }
#control figcaption { margin-top: 20px; color: var(--texto-3); font-size: .8125rem; text-align: center; }
/* Cuatro columnas bajo el panel; el hilo corre sobre cada anotación. */
#control .control__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 32px); }
#control .control__lista li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding-top: 16px; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.02em; }
#control .control__lista .icono { flex: none; width: var(--ico-m, 24px); height: var(--ico-m, 24px); color: var(--oro-texto); }
#control .control__tramo { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--oro); transform-origin: 0 50%; }
#control .control__tramo::before { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); }
@media (min-width: 900px) and (max-width: 1199px) {
  #control .control__aplicacion { grid-template-columns: 132px minmax(0, 1fr); }
  #control .control__lateral { padding-inline: 6px; }
  #control .control__lateral li { padding-inline: 8px; font-size: .8125rem; }
  #control .control__resumen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  #control .wrap { padding-inline: 16px; }
  #control .control__cabecera { align-items: flex-start; text-align: left; margin-bottom: 32px; }
  #control .eyebrow { justify-content: flex-start; }
  #control .control__hilo { display: none; }
  #control .control__composicion { row-gap: 24px; }
  #control .control__resumen { grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
  #control .control__tarjeta { padding: 14px; }
  #control figcaption { text-align: left; }
  #control .control__aplicacion { grid-template-columns: minmax(0, 1fr); }
  #control .control__lateral { padding: 8px; }
  #control .control__lateral ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  #control .control__lateral li { flex-direction: column; justify-content: center; gap: 5px; padding: 6px 0; font-size: .78125rem; letter-spacing: -.01em; }
  /* En móvil es decoración: ninguna pestaña parece seleccionable. */
  #control .control__lateral li.control__activo { background: none; box-shadow: none; color: var(--texto-2); }
  #control .control__lateral li.control__activo .icono { color: inherit; }
  #control .control__principal { padding: 20px 12px 12px; }
  #control .control__empresa { gap: 14px; margin-bottom: 20px; }
  #control .control__ambientes { width: 100%; }
  #control .control__ambiente { font-size: .8125rem; }
  #control .control__saldo { padding: 24px 18px; }
  #control .control__saldo strong { font-size: clamp(1.8rem, 7.5vw, 2.8rem); }
  #control .control__tarjetas { gap: 12px; }
  #control .control__tarjeta p { font-size: .78125rem; }
  /* Registros en dos líneas: la llamada arriba y su resultado abajo. */
  #control table, #control tbody, #control tr { display: block; }
  #control colgroup { display: none; }
  #control thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #control tr { padding: 10px 4px; border-bottom: 1px solid rgba(12, 24, 48, .065); font-size: .8125rem; line-height: 1.45; }
  #control tbody tr:last-child { border-bottom: 0; }
  #control td, #control tbody tr:last-child td, #control th:first-child, #control td:first-child, #control th:last-child, #control td:last-child { display: inline; height: auto; padding: 0; border: 0; text-align: left; }
  #control td:nth-child(1)::after { content: " "; }
  #control td:nth-child(2)::after { content: "\A"; white-space: pre; }
  #control td:nth-child(n+3) { color: var(--texto-2); }
  #control td:nth-child(4)::before { content: " · "; }
  #control td:nth-child(4)::after { content: " ms"; }
  /* Las cuatro anotaciones en 2×2 compacta. */
  #control .control__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  #control .control__lista li { min-height: 52px; gap: 8px; padding-top: 12px; font-size: .875rem; letter-spacing: -.01em; }
  #control .control__lista .icono { width: var(--ico-s, 20px); height: var(--ico-s, 20px); }
  #control .control__indicador, #control .control__saldo span { font-size: .8125rem; }
}
@media (forced-colors: active) {
  #control .control__pildora { border: 2px solid Highlight; }
}