/**
 * Estilos de los 3 simuladores interactivos de Conducción 1D estacionaria:
 * Analogía Eléctrica, Interfaz Térmica y Circuito Térmico. Son entidades de
 * primer nivel de la app (no forman parte de ningún tema): se llega a ellos
 * desde la portada y desde su propio panel lateral -- ver
 * assets/js/data/simuladores.js.
 *
 * HISTORIA: se portaron el 30-08-2026 conservando la interfaz visual
 * ORIGINAL de la SPA `transmision-calor` (igual que las figuras del tema,
 * ver AGENTS.md y estado-tema-03.md). El grueso de este fichero sigue
 * siendo, deliberadamente, casi una copia literal de las reglas de
 * `transmision-calor/assets/styles.css` y `pantallas.css` -- no una
 * reinterpretación con el sistema de diseño actual de esta app. La única
 * mejora visual pedida explícitamente por Rafael (30-08-2026) es el símbolo
 * de resistencia térmica (zigzag/muelle, ver más abajo); el resto del
 * aspecto original permanece igual salvo que él pida otra cosa.
 *
 * Dos adaptaciones mínimas del resto, ninguna de ellas un cambio de aspecto:
 *
 *   1. Todo queda anidado bajo `.cn-simulador` (el contenedor que envuelve
 *      cada uno de los dos módulos en tema-03.js) para que ninguna clase
 *      genérica de la SPA antigua (`.card`, `.btn`, `.hidden`, `.active`...)
 *      se filtre al resto de la aplicación.
 *   2. Las variables CSS de la SPA antigua (`--color-indigo`, `--color-
 *      tinta`, etc.) se alían aquí a los tokens actuales de `tokens.css`
 *      (`--brand-primary`, `--brand-ink`...) en vez de dejarlas sueltas:
 *      son literalmente los mismos colores de marca (incluso con el mismo
 *      valor hexadecimal en la mayoría de los casos), así que esto no
 *      cambia ni un píxel -- solo evita duplicar `#1D1E94` etc. como hex
 *      suelto, que es justo lo que prohíbe AGENTS.md.
 *
 * Lo que NO se ha "arreglado" a propósito, para no alterar el aspecto ya
 * visto y aprobado del original: `--color-cian` (typo del original en dos
 * sitios; debería decir `--color-cyan`) y `--font-primary`/`--font-
 * secondary` (nunca declaradas en el original tampoco) se dejan
 * indefinidas a propósito -- así como en la SPA antigua, esa regla en
 * concreto no tiene efecto visible. `--radius-sm` sí se reinicia a
 * `initial` dentro de `.cn-simulador`: en el original tampoco estaba
 * definida (esquinas cuadradas en `.comp-select`/`.btn-secondary`), pero
 * esta app sí la define de forma global -- sin este reinicio, esas dos
 * piezas ganarían un radio de 6px que el original no tenía.
 */

.cn-simulador {
  /* Alias 1:1 (o casi) a los tokens de marca ya vigentes en toda la app. */
  --color-niebla: var(--color-bg);
  --color-blanco: var(--color-surface);
  --color-borde: var(--color-border);
  --color-tinta: var(--brand-ink);
  --color-indigo: var(--brand-primary);
  --color-cyan: var(--color-interactive);
  --color-ambar: var(--color-amber);
  --font-title: var(--font-display);

  /* Valores propios del original, sin equivalente actual (ver nota arriba). */
  --color-cyan-hover: #0b7c91;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: initial;
}


/* ===== extraído de styles.css ===== */

.cn-simulador .card {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  transition: box-shadow 0.3s ease;
}

.cn-simulador .card:hover {
  box-shadow: var(--shadow-hover);
}

.cn-simulador .grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* Layout del Simulador de Interfaz Térmica: TRES columnas -- mandos (ancho
   fijo) | resultados (ancho fijo, angosto) | dibujo (se lleva el ancho que
   sobra). No son solo dos columnas con resultados+dibujo apilados: Rafael
   probó esa primera versión y el dibujo quedaba "gigantesco" al heredar él
   solo todo el ancho de una vista "simulador" ya de por sí a pantalla
   completa (30-08-2026). Con tres columnas el dibujo sigue mucho más grande
   que en el "laboratorio" original (bien visible el efecto de la
   rugosidad), pero ya no devora la pantalla: comparte fila con los
   resultados en vez de apilarse debajo de ellos. */
.cn-simulador .rc-layout-ancho {
  display: grid;
  grid-template-columns: 300px 320px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1150px) {
  .cn-simulador .rc-layout-ancho { grid-template-columns: minmax(0, 1fr); }
}

.cn-simulador .mt-4 { margin-top: 24px; }

.cn-simulador .mt-3 { margin-top: 16px; }

.cn-simulador .mt-2 { margin-top: 8px; }

.cn-simulador .mb-4 { margin-bottom: 24px; }

.cn-simulador .hidden { display: none !important; }

.cn-simulador .font-bold { font-weight: 700; }

.cn-simulador .math-block {
  background-color: var(--color-niebla);
  color: var(--color-tinta);
  padding: 16px;
  border-radius: var(--radius-md);
  margin: 15px 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--color-borde);
}

.cn-simulador .callout {
  position: relative;
  display: block;
  padding: 18px 20px 18px 52px;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin: 22px 0;
  line-height: 1.75;
}

.cn-simulador .callout > i:first-child {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 1.15rem;
  line-height: 1;
}

.cn-simulador .callout strong { margin-right: 4px; }

.cn-simulador .warning-callout {
  background-color: #FEF3C7;
  border-left-color: var(--color-ambar);
  color: #92400E;
}

.cn-simulador .warning-callout i { color: var(--color-ambar); }

.cn-simulador .text-cyan {
  color: var(--color-cyan);
}

.cn-simulador .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  outline: none;
}

.cn-simulador .btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.cn-simulador .simulator-grid {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.cn-simulador .control-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  position: sticky;
  top: calc(var(--barra-alto-fila, 62px) + 18px);
  max-height: calc(100vh - var(--barra-alto-fila, 62px) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 1100px) {

  .cn-simulador .simulator-grid { grid-template-columns: minmax(0, 1fr); }

  .cn-simulador .control-panel { position: static; max-height: none; overflow-y: visible; }

}

.cn-simulador .panel-header {
  border-bottom: 2px solid var(--color-niebla);
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.cn-simulador .panel-header h3 {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cn-simulador .form-group {
  margin-bottom: 18px;
}

.cn-simulador .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 8px;
}

.cn-simulador .custom-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  background-color: var(--color-niebla);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-tinta);
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cn-simulador .custom-select:focus {
  border-color: var(--color-cyan);
}

.cn-simulador .parameter-section {
  border-top: 1px solid var(--color-borde);
  padding-top: 18px;
  margin-top: 18px;
}

.cn-simulador .param-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--color-indigo);
  margin-bottom: 14px;
}

.cn-simulador .slider-wrapper {
  margin-bottom: 15px;
}

.cn-simulador .slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.cn-simulador .slider-value {
  font-family: var(--font-mono);
  color: var(--color-cyan);
  font-weight: 600;
}

.cn-simulador .slider-wrapper input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-borde);
  border-radius: 3px;
  outline: none;
  transition: background 0.3s ease;
}

.cn-simulador .slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-cyan);
  cursor: pointer;
  transition: transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.cn-simulador .slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--color-cyan-hover);
}

.cn-simulador .slider-wrapper input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--color-cyan);
  cursor: pointer;
  transition: transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.cn-simulador .slider-wrapper input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
  background: var(--color-cyan-hover);
}

.cn-simulador .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.cn-simulador .custom-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-cyan);
  cursor: pointer;
}

.cn-simulador .display-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cn-simulador .results-card {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
}

.cn-simulador .results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.cn-simulador .result-tile {
  background-color: var(--color-niebla);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-borde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cn-simulador .result-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 4px;
}

.cn-simulador .result-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-indigo);
  font-family: var(--font-mono);
}

.cn-simulador .temperatures-detail {
  font-size: 0.85rem;
  color: var(--color-tinta);
  background-color: #F8FAFC;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-borde);
  text-align: center;
}

.cn-simulador .temperatures-detail span {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-cyan);
}

.cn-simulador .display-tabs {
  padding: 0;
  overflow: hidden;
}

.cn-simulador .display-tab-headers {
  display: flex;
  background-color: var(--color-niebla);
  border-bottom: 1px solid var(--color-borde);
}

.cn-simulador .display-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 16px 20px;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cn-simulador .display-tab-btn:hover {
  color: var(--color-indigo);
  background-color: rgba(0, 0, 0, 0.02);
}

.cn-simulador .display-tab-btn.active {
  color: var(--color-indigo);
  background-color: var(--color-blanco);
  border-bottom: 3px solid var(--color-cyan);
}

.cn-simulador .display-tab-content {
  padding: 24px;
  display: none;
}

.cn-simulador .display-tab-content.active {
  display: block;
}

.cn-simulador .plotly-chart-container {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Sin esto, el SVG que dibuja Plotly (un elemento reemplazado, mismo caso que
     .vp-canvas en visor-pdf.css) impone su tamaño intrinseco como "min-content"
     del item flex, y el flex-shrink por defecto (min-width:auto) no deja que
     .profile-layout-grid lo encoja por debajo de eso -- desbordaba a la derecha
     en pantallas estrechas (detectado en la comprobacion a 320px). */
  min-width: 0;
}

.cn-simulador .plotly-chart {
  width: 100%;
  height: 380px;
}

/* La leyenda horizontal de este grafico (ver layout.legend en
   simulador-circuito-termico.render.js) cabe en una sola linea con espacio de
   sobra en escritorio, pero Plotly la envuelve en varias lineas cuando el
   contenedor se estrecha -- a 320px llega a ocupar unas 6 lineas y esas
   lineas ya no caben en los 380px fijos, así que se solapaban con el título
   del eje X y con el bloque siguiente (detectado en la comprobación a
   320px). Plotly redibuja con "responsive:true" en cuanto el contenedor
   cambia de tamaño, así que basta con darle más alto aquí. */
@media (max-width: 480px) {
  .cn-simulador .plotly-chart { height: 520px; }
}

@media (max-width: 1024px) {

  .cn-simulador .simulator-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-simulador .control-panel {
    max-height: none;
  }

}

@media (max-width: 768px) {

  /* minmax(0, 1fr), no "1fr" a secas -- mismo motivo que en .simulator-grid y
     .rc-layout-ancho (ver sus comentarios mas arriba): sin el minimo en 0, el
     Simulador de Analogia Electrica desbordaba a la derecha en pantallas
     estrechas porque el SVG del circuito y el texto de ayuda no podian
     encogerse por debajo de su propio min-content (detectado en la
     comprobación a 320px). */
  .cn-simulador .grid-2-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn-simulador .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

.cn-simulador .dashboard-section {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.cn-simulador .section-title {
  color: var(--color-indigo);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* flex-wrap: sin esto, un titulo largo (con una formula KaTeX en medio, p.ej.
     "Perfil de Temperatura T(x) y Ajuste Rapido") no envuelve como una linea
     de texto normal -- se queda en una sola fila flex y se sale visualmente
     del contenedor en pantallas estrechas, aunque su propio caja siga
     midiendo el ancho correcto (detectado en la comprobación a 320px). */
  flex-wrap: wrap;
}

.cn-simulador .svg-circuit-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.cn-simulador .profile-layout-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.cn-simulador .dashboard-sliders-panel {
  /* flex-shrink pasa de 0 a 1 (y min-width:0) para que este panel de ancho fijo
     ceda espacio en pantallas mas estrechas que 240px + el resto de la fila --
     mismo problema y mismo motivo que min-width:0 en .plotly-chart-container,
     justo aqui al lado dentro de .profile-layout-grid. Sigue sin CRECER mas
     alla de 240px en pantallas anchas (flex-grow se queda en 0). */
  flex: 0 1 240px;
  min-width: 0;
  background-color: #F8FAFC;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cn-simulador .sliders-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-tinta);
  margin-top: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cn-simulador .dash-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cn-simulador .dash-slider label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-tinta);
  display: flex;
  justify-content: space-between;
}

.cn-simulador .dash-slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-cian);
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
}

.cn-simulador .comparador-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cn-simulador .comp-col {
  flex: 1;
  min-width: 250px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease;
}

/* min-width: 0 en pantallas estrechas -- el "min-width: 250px" de arriba resuelve el caso "no
   caben las DOS columnas de comparacion lado a lado" (para eso esta flex-wrap:wrap en
   .comparador-layout), pero no el caso "no cabe ni UNA columna": en el panel de Resultados del
   Circuito Termico, en moviles estrechos el contenedor disponible baja de 250px y la columna
   desbordaba igual aunque ya estuviera sola en su propia fila (detectado en la comprobación a
   320px: .comp-col medía 250px de ancho en un contenedor de 180px). Esta regla va DESPUES de la
   base a proposito: con la misma especificidad (.cn-simulador .comp-col en ambas), gana la que
   aparece mas abajo en el archivo -- declararla antes (p.ej. dentro del @media de mas arriba)
   no tenia efecto por eso mismo. */
@media (max-width: 480px) {
  .cn-simulador .comp-col {
    min-width: 0;
  }
}

.cn-simulador #comp-config-a:hover {
  border-color: var(--color-indigo);
}

.cn-simulador #comp-config-b:hover {
  border-color: var(--color-cian);
}

.cn-simulador .comp-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-tinta);
  border-bottom: 1.5px dashed var(--color-borde);
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cn-simulador .comp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.cn-simulador .comp-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
}

.cn-simulador .comp-select {
  padding: 8px 12px;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  color: var(--color-tinta);
  background-color: #F8FAFC;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.cn-simulador .comp-select:focus {
  border-color: var(--color-indigo);
}

.cn-simulador .comp-results {
  background-color: #F8FAFC;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.85rem;
}

.cn-simulador .comp-results p {
  margin: 4px 0;
  display: flex;
  justify-content: space-between;
  color: var(--color-tinta);
}

.cn-simulador .comp-results b {
  color: var(--color-indigo);
}

.cn-simulador .comp-summary-alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}

.cn-simulador .comp-summary-alert.info-alert {
  background-color: #F0F9FF;
  border-color: #E0F2FE;
  color: #0369A1;
}

.cn-simulador .comp-summary-alert.success-alert {
  background-color: #F0FDF4;
  border-color: #DCFCE7;
  color: #15803D;
}

.cn-simulador .comp-summary-alert.danger-alert {
  background-color: #FEF2F2;
  border-color: #FEE2E2;
  color: #B91C1C;
}

.cn-simulador .btn-secondary {
  background-color: transparent;
  color: var(--color-indigo);
  border: 1.5px solid var(--color-borde);
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.cn-simulador .btn-secondary:hover {
  background-color: #E2E8F0;
  border-color: #CBD5E1;
}

.cn-simulador .flex {
  display: flex;
}

.cn-simulador .justify-between {
  justify-content: space-between;
}

.cn-simulador .items-center {
  align-items: center;
}

.cn-simulador .math-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100%;
}

.cn-simulador .analogy-workbench {
  background: #FFFFFF;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 0 2px 10px rgba(27, 29, 58, 0.04);
}

.cn-simulador .analogy-resistor rect {
  transition: filter 0.18s ease, stroke-width 0.18s ease;
}

.cn-simulador .analogy-resistor:hover rect {
  filter: drop-shadow(0 0 6px rgba(14, 155, 181, 0.6));
  stroke-width: 3 !important;
}

.cn-simulador .analogy-resistor.active-res rect {
  filter: drop-shadow(0 0 8px rgba(14, 155, 181, 0.8));
  stroke: #0E9BB5 !important;
  stroke-width: 3 !important;
}

/* Enlace inline a otro simulador, dentro del texto de una descripción (por ahora, solo en la de
   R_c'' -> Simulador de Interfaz Térmica). Se pinta como un enlace de texto normal -- subrayado,
   color cian -- para que se note que es distinto del resto de la frase, aunque sea un <button>
   por accesibilidad (ver simulador-analogia-electrica.js). */
.cn-simulador .link-inline-simulador {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: #0E9BB5;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cn-simulador .link-inline-simulador:hover { color: #0B7E93; }

.cn-simulador #analogy-info-panel,
.cn-simulador #analogy-formula-viewer {
  overflow: visible !important;
}

.cn-simulador #analogy-formula-viewer {
  transition: opacity 0.2s ease;
  flex: 1 1 auto;
  min-height: auto;
}

.cn-simulador #analogy-formula-viewer .formula-badge {
  display: inline-block;
  background: var(--color-indigo);
  color: #fff;
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

/* ===== extraído de pantallas.css ===== */

.cn-simulador .rc-campo { margin-bottom: 14px; }

.cn-simulador .rc-campo label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-indigo);
  margin-bottom: 6px;
}

.cn-simulador .rc-campo select,
.cn-simulador .rc-campo input[type="number"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  background-color: var(--color-blanco);
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--color-tinta);
}

.cn-simulador .rc-campo select:focus-visible,
.cn-simulador .rc-campo input:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }

.cn-simulador .rc-atenuado { opacity: 0.45; }

.cn-simulador .rc-manual {
  border-top: 1px solid var(--color-borde);
  padding-top: 16px;
}

.cn-simulador .rc-manual__interruptor {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-indigo);
  cursor: pointer;
}

.cn-simulador .rc-resultados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.cn-simulador .rc-tile {
  background-color: var(--color-niebla);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.cn-simulador .rc-tile--principal {
  background-color: rgba(14, 155, 181, 0.10);
  border-color: rgba(14, 155, 181, 0.40);
}

.cn-simulador .rc-tile__etiqueta {
  display: block;
  font-size: 0.75rem;
  color: #4A4E70;
  margin-bottom: 4px;
}

.cn-simulador .rc-tile__valor {
  display: block;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-indigo);
  word-break: break-word;
}

.cn-simulador .rc-reparto {
  font-size: 0.83rem;
  color: #4A4E70;
  margin-bottom: 14px;
}

.cn-simulador .rc-detalle { width: 100%; border-collapse: collapse; font-size: 0.8rem; }

.cn-simulador .rc-detalle td { padding: 7px 0; border-bottom: 1px solid var(--color-borde); }

.cn-simulador .rc-detalle td:first-child { color: #4A4E70; }

.cn-simulador .rc-detalle td:last-child { text-align: right; font-family: var(--font-mono); color: var(--color-tinta); }

.cn-simulador .rc-avisos { margin-top: 14px; }

.cn-simulador .rc-aviso {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #92400E;
  background-color: #FEF3C7;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.cn-simulador .rc-aviso i { margin-top: 3px; flex-shrink: 0; }

.cn-simulador .rc-aviso--ok { color: #226B42; background-color: rgba(46, 139, 87, 0.12); }

@media (max-width: 720px) {

  .cn-simulador .rc-resultados { grid-template-columns: 1fr 1fr; }

}