/* superadmin.ai.captalog.com: los colores de Plumii, ámbar sobre Stone. Sin fuentes
   externas: la CSP sólo deja cargar lo que sirve la propia Lambda. */

:root {
  --fondo: #fafaf9;
  --tarjeta: #ffffff;
  --borde: #e7e5e4;
  --texto: #1c1917;
  --suave: #57534e;
  --acento: #f59e0b;
  --acento-texto: #1c1917;
  --barra: #fcd34d;
  --series-1: #f59e0b;
  --series-2: #a8a29e;
  --track: #f5f5f4;
  --error: #b91c1c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c0a09;
    --tarjeta: #1c1917;
    --borde: #292524;
    --texto: #fafaf9;
    --suave: #a8a29e;
    --barra: #b45309;
    --series-1: #d97706;
    --series-2: #78716c;
    --track: #292524;
    --error: #f87171;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
}

.marca {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: auto;
}

/* El menú a la izquierda y la vista a la derecha, como en app.plumii.io. En el
   teléfono el menú pasa a una fila de pestañas bajo la barra. */
.cuerpo {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 12px;
  border-right: 1px solid var(--borde);
}

.menu[hidden] {
  display: none;
}

.menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.9375rem;
}

.menu a:hover {
  background: var(--tarjeta);
}

.menu a[aria-current="page"] {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  padding: 7px 11px;
  font-weight: 600;
}

.menu a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

main {
  min-width: 0;
  padding: 24px 24px 48px;
}

/* Sin menú (la entrada), la página ocupa el ancho entero. */
.cuerpo:has(.menu[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
  .cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu {
    flex-direction: row;
    gap: 4px;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--borde);
    overflow-x: auto;
  }

  .menu a {
    white-space: nowrap;
  }

  main {
    padding: 24px 16px 48px;
  }
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 4px;
}

h2 {
  font-size: 1rem;
  margin: 0 0 12px;
}

.nota {
  color: var(--suave);
  font-size: 0.875rem;
  margin: 0 0 24px;
}

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
}

.entrada {
  max-width: 380px;
  margin: 48px auto;
}

.entrada h1 {
  margin-bottom: 16px;
}

label {
  display: block;
  font-size: 0.875rem;
  color: var(--suave);
  margin-bottom: 6px;
}

input {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
  margin-bottom: 12px;
}

button {
  font: inherit;
  font-weight: 600;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--acento);
  color: var(--acento-texto);
  cursor: pointer;
}

select {
  width: 100%;
  font: inherit;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
}

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

button.enlace {
  width: auto;
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
}

/* The link back to the Chat sits next to "Salir" and looks like it. */
a.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}

a.enlace:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.error {
  color: var(--error);
  font-size: 0.875rem;
  min-height: 1.2em;
}

/* AI spend: three headline figures for the last 30 days, the table by period
   with its sources underneath, and three bar lists. Bars are thin and full
   width, rounded at the tip and square at the base; the invoice is amber and
   the activity, the second series, gray: color follows the series and the
   value is always written next to it. */
.period {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--suave);
}

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.figure-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 14px;
}

.figure-label {
  font-size: 0.8125rem;
  color: var(--suave);
}

.figure-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.figure-sub {
  font-size: 0.8125rem;
  color: var(--suave);
}

.card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--suave);
  margin: 0 0 12px;
}

.comparacion th {
  text-align: left;
  font-weight: 500;
  color: var(--suave);
  font-size: 0.8125rem;
  padding: 0 0 8px;
}

.comparacion th.num {
  text-align: right;
}

.comparacion td.num,
.comparacion th.num {
  padding-left: 12px;
}

.comparacion td {
  padding: 9px 0;
}

.comparacion tbody tr:first-child td {
  border-top: 1px solid var(--borde);
}

.comparacion tr.total td {
  font-weight: 600;
  border-top: 2px solid var(--borde);
}

@media (max-width: 480px) {
  .comparacion {
    font-size: 0.875rem;
  }
}

.comparacion td.negativa {
  color: var(--suave);
}

/* Where each number comes from: under the table, the source name on the left
   and the explanation in small type. */
.sources {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-size: 0.8125rem;
  color: var(--suave);
}

.sources > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 8px;
}

.sources dt {
  font-weight: 600;
  color: var(--texto);
}

.sources dd {
  margin: 0;
}

@media (max-width: 480px) {
  .sources > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.pie-tabla {
  margin: 12px 0 0;
}

.tarjeta + .columnas {
  margin-top: 12px;
}

.columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.legend {
  display: flex;
  align-items: center;
  gap: 6px 4px;
  flex-wrap: wrap;
  margin: -4px 0 12px;
  font-size: 0.8125rem;
  color: var(--suave);
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-left: 10px;
}

.swatch:first-child {
  margin-left: 0;
}

.swatch.invoice {
  background: var(--series-1);
}

.swatch.activity {
  background: var(--series-2);
}

.bar-list,
.months {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.bar-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bar-amount {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bar-foot,
.month-series {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-share {
  flex: none;
  min-width: 3rem;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}

.bar-track {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: var(--track);
  overflow: hidden;
}

.bar-track .relleno {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--series-1);
  transition: width 0.3s;
}

.bar-track .relleno.activity {
  background: var(--series-2);
}

.month-name {
  display: block;
  margin-bottom: 6px;
}

.month-name::first-letter {
  text-transform: uppercase;
}

.comparacion .since {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--suave);
}

.month-series {
  margin-bottom: 4px;
}

.month-series .bar-amount {
  min-width: 5.5rem;
  text-align: right;
  font-size: 0.875rem;
}

.pie {
  margin: 0;
  color: var(--suave);
  font-size: 0.8125rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

td {
  padding: 6px 0;
  border-top: 1px solid var(--borde);
  vertical-align: middle;
}

tr:first-child td {
  border-top: 0;
}

td:first-child {
  padding-right: 12px;
}

.relleno {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--barra);
  min-width: 0;
}

td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .figures {
    grid-template-columns: minmax(0, 1fr);
  }

  .figure-card {
    padding: 12px 16px;
    gap: 2px;
  }

  .figure-value {
    font-size: 1.625rem;
  }
}

/* El techo de gasto: la cifra grande, el estado del corte, la barra y el
   formulario para cambiarlo. */
.limite-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.limite-cifra {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.suave {
  color: var(--suave);
  font-weight: 400;
  font-size: 1rem;
}

.estado {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--suave);
}

.estado.cortado,
.estado.fallado {
  color: var(--error);
  border-color: var(--error);
}

.medidor {
  margin: 12px 0 0;
  height: 8px;
  border-radius: 4px;
  background: var(--borde);
  overflow: hidden;
}

.medidor .relleno {
  width: 0;
  transition: width 0.3s;
}

.medidor .relleno.pasado {
  background: var(--error);
}

.aviso {
  color: var(--error);
}

.limite-form {
  margin-top: 16px;
}

.limite-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.limite-campos input {
  flex: 1 1 140px;
  margin-bottom: 0;
}

.limite-campos button {
  width: auto;
  padding: 0 16px;
}

/* La actividad: una fila por vez que alguien usó IA, agrupadas por día. */
.actividad th {
  text-align: left;
  font-weight: 500;
  color: var(--suave);
  font-size: 0.8125rem;
  padding: 0 12px 6px 0;
}

.actividad th.num {
  text-align: right;
  padding-right: 0;
}

.actividad td {
  padding: 8px 12px 8px 0;
  vertical-align: top;
}

.actividad td:last-child,
.actividad th:last-child {
  padding-right: 0;
}

.actividad td.dia {
  padding-top: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--suave);
  border-top: 0;
}

.actividad tr:first-child td.dia {
  padding-top: 0;
}

.actividad td.cuando {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--suave);
}

.actividad td.quien > span,
.actividad td.que > span {
  display: block;
}

.actividad td.quien > .sub,
.actividad td.que > .sub {
  font-size: 0.8125rem;
  color: var(--suave);
}

.actividad td.que > .etiqueta {
  display: inline-block;
  margin-top: 4px;
}

.etiqueta.fallo {
  color: var(--error);
  border-color: var(--error);
}

/* En el teléfono no caben cinco columnas: cada fila es un bloque con la hora
   y el costo arriba, y quién y qué debajo, a todo el ancho; los tokens no van. */
@media (max-width: 720px) {
  .actividad {
    font-size: 0.875rem;
  }

  .actividad thead {
    display: none;
  }

  .actividad tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--borde);
  }

  .actividad tr:first-child,
  .actividad tr:has(td.dia) {
    border-top: 0;
  }

  .actividad tr:has(td.dia) {
    display: block;
    padding: 0;
  }

  .actividad td {
    padding: 0;
    border-top: 0;
  }

  .actividad td.cuando {
    grid-column: 1;
    grid-row: 1;
  }

  .actividad td.num:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
  }

  .actividad td.num:nth-child(4) {
    display: none;
  }

  .actividad td.quien {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .actividad td.que {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .actividad td.quien > span {
    display: inline;
  }

  .actividad td.quien > .sub::before {
    content: " · ";
  }
}

/* Las personas de app.plumii.io: la lista y la invitación. */
.titulo-con-accion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.titulo-con-accion h1 {
  margin: 0;
}

.titulo-con-accion button {
  width: auto;
  padding: 0 16px;
}

.invitar {
  margin-bottom: 16px;
}

.invitar .nota {
  margin-bottom: 16px;
}

.invitar .campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.invitar .campos input {
  margin-bottom: 0;
}

.invitar .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
}

.invitar .acciones button {
  width: auto;
  padding: 0 16px;
}

.invitar .acciones button.enlace {
  min-height: 44px;
}

.listo {
  margin: 0 0 16px;
  border-color: var(--acento);
}

.personas th {
  text-align: left;
  font-weight: 500;
  color: var(--suave);
  font-size: 0.8125rem;
  padding: 0 12px 6px 0;
}

.personas th.num {
  text-align: right;
  padding-right: 0;
}

.personas td {
  padding: 8px 12px 8px 0;
  vertical-align: top;
}

.personas td.num {
  color: var(--suave);
}

/* Quitar a alguien: a button that does not grow the row, in the error color
   because it deletes their account. */
.personas td.accion {
  padding-right: 0;
  text-align: right;
}

.personas button.quitar {
  margin: -6px 0;
  color: var(--error);
}

/* One group per person: their cell spans their spaces, so the border between
   people is the one on the first row of each group, and the thin ones between
   a person's spaces start after their cell. */
.por-persona tbody + tbody tr:first-child td {
  border-top: 1px solid var(--borde);
}

.por-persona td.quien > span:first-child {
  font-weight: 600;
}

/* What is done to the account, under the name: text links, the delete one in
   the error color. */
.por-persona .de-la-cuenta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 6px;
}

.por-persona .de-la-cuenta button {
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.8125rem;
}

/* «Dirección…» on a company from before the addresses: a link inside the
   company's detail line, not a button of its own. */
.personas button.direccion {
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Where removing someone says what went wrong; empty, it takes no room. */
#personas-error:empty {
  display: none;
}

/* Text only a screen reader reads, like the header of the Quitar column. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.personas td > span {
  display: block;
  overflow-wrap: anywhere;
}

.personas td > .sub {
  font-size: 0.8125rem;
  color: var(--suave);
}

.personas td > .etiqueta {
  display: inline-block;
  margin-top: 4px;
}

/* OpenCode: one checkbox per person. Its label only shows on a phone, where
   there is no table header. */
.personas label.opencode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -12px 0 -12px;
  color: var(--texto);
  cursor: pointer;
}

.personas label.opencode input {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

.personas label.opencode span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .invitar .campos {
    grid-template-columns: minmax(0, 1fr);
  }

  .personas {
    font-size: 0.875rem;
  }

  .personas thead {
    display: none;
  }

  .personas tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--borde);
  }

  .personas tr:first-child {
    border-top: 0;
  }

  .personas td {
    padding: 0;
    border-top: 0;
  }

  .personas td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .personas td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .personas td.accion {
    grid-column: 1 / -1;
    grid-row: 4;
    text-align: left;
  }

  .personas button.quitar {
    min-height: 44px;
    margin: 0;
  }

  /* The people table: a person is a block, their name across the top (the
     rowspan means nothing in a grid), and each space a grid of named areas;
     a row without the person cell leaves that area empty, at no height. */
  .por-persona tbody {
    display: block;
    padding: 10px 0;
    border-top: 1px solid var(--borde);
  }

  .por-persona tbody:first-of-type {
    border-top: 0;
  }

  .por-persona tr {
    grid-template-areas:
      "quien quien"
      "espacio alta"
      "opencode opencode"
      "accion accion";
    padding: 0;
    border-top: 0;
  }

  .por-persona tr + tr {
    margin-top: 10px;
  }

  .por-persona td.quien {
    grid-area: quien;
    margin-bottom: 8px;
  }

  .por-persona td.espacio {
    grid-area: espacio;
  }

  .por-persona td.opencode {
    grid-area: opencode;
  }

  .por-persona td.num {
    grid-area: alta;
  }

  .por-persona td.accion {
    grid-area: accion;
  }

  .por-persona .de-la-cuenta button {
    min-height: 36px;
  }

  .personas label.opencode {
    margin: 0;
  }

  .personas label.opencode span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* El catálogo de modelos: un renglón por proveedor y una tarjeta por modelo. */
.resumen {
  font-size: 0.9375rem;
  margin: 0 0 16px;
}

h2.proveedor {
  font-size: 1.125rem;
  margin: 24px 0 8px;
}

h2.proveedor .sede {
  color: var(--suave);
  font-weight: 400;
  font-size: 0.875rem;
  margin-left: 8px;
}

/* Filters and sort over the catalog: two selects and two checkboxes in a row,
   stacked on a phone. */
.models-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 12px 16px;
  margin: 0 0 8px;
}

.models-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--texto);
  cursor: pointer;
}

.models-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--acento);
}

.modelo-cabeza .model-provider {
  color: var(--suave);
  font-size: 0.875rem;
}

.modelo {
  margin-bottom: 10px;
}

.modelo.en-el-chat {
  border-color: var(--acento);
}

.modelo-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.modelo-cabeza .hace {
  color: var(--suave);
  font-size: 0.875rem;
  margin-left: auto;
}

.etiqueta {
  font-size: 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--suave);
}

.etiqueta.si {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

.descripcion {
  margin: 4px 0 10px;
}

.modelo-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px;
}

.modelo-cifra {
  display: flex;
  flex-direction: column;
}

.modelo-cifra .rotulo,
.modelo-cifra .sub {
  font-size: 0.75rem;
  color: var(--suave);
}

.modelo-cifra .monto {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.motivo {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--suave);
}

.modelo.en-el-chat .motivo {
  color: var(--texto);
}

/* El mapa: las funcionalidades de Plumii que usan Bedrock a la izquierda, las
   piezas de Bedrock que usamos a la derecha y un SVG encima que las une. Lo
   que no usamos va en una franja aparte, abajo. Las tarjetas son compactas: el
   detalle se abre al fijarlas con un clic. */

.mapa-interruptor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 0.875rem;
  color: var(--texto);
  cursor: pointer;
}

.mapa-interruptor input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--acento);
}

.punto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  background: var(--acento);
}

.punto.sin-usar {
  background: transparent;
  border-color: var(--suave);
}

.punto.apagado {
  background: var(--suave);
  border-color: var(--suave);
}

.mapa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 140px;
  align-items: start;
}

.mapa-lineas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.mapa-linea {
  fill: none;
  stroke: var(--suave);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
  transition: stroke 0.15s, opacity 0.15s;
}

.mapa-linea-fin {
  fill: var(--suave);
  fill-opacity: 0.6;
}

.mapa-linea.encendida {
  stroke: var(--acento);
  stroke-opacity: 1;
  stroke-width: 2.5;
}

.mapa-linea-fin.encendida {
  fill: var(--acento);
  fill-opacity: 1;
}

.mapa.enfocado .mapa-linea:not(.encendida),
.mapa.enfocado .mapa-linea-fin:not(.encendida) {
  opacity: 0.15;
}

.mapa-columna {
  position: relative; /* las tarjetas van sobre las líneas */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mapa-titulo {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--suave);
  margin: 0;
}

.mapa-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mapa-puerta {
  font-size: 0.875rem;
  color: var(--suave);
  font-weight: 600;
  margin: 0;
}

.mapa-texto {
  margin: 0;
  font-size: 0.875rem;
}

.mapa-tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  transition: border-color 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.mapa-tarjeta.funcion {
  border-left: 4px solid var(--acento);
}

.mapa-tarjeta.funcion.sin-bedrock {
  border-left-color: var(--borde);
}

.mapa-boton {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  color: var(--texto);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: left;
  border-radius: 10px;
}

.mapa-boton:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.mapa-nombre {
  flex: 1;
  min-width: 0;
}

.mapa-cuenta {
  flex: none;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--suave);
}

.mapa-detalle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
}

.mapa-detalle[hidden] {
  display: none;
}

.mapa-tarjeta.encendida {
  border-color: var(--acento);
}

.mapa-tarjeta.fija {
  box-shadow: 0 0 0 2px var(--acento);
}

.mapa.enfocado .mapa-tarjeta:not(.encendida) {
  opacity: 0.4;
}

.mapa-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mapa-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 0.75rem;
}

.mapa-chips .rotulo {
  color: var(--suave);
  margin-right: 2px;
  min-width: 52px;
}

.mapa-chips .chip {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--barra);
  color: var(--acento-texto);
}

.mapa-chips.aws .chip {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--suave);
}

.mapa-pendiente,
.mapa-porque {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--suave);
}

/* La franja de lo que no usamos: aparte del mapa, sin líneas. */
.mapa-sin-usar {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}

/* One group per reason the capability stays unused, each with its heading. */
.mapa-sin-usar-grupos {
  display: grid;
  gap: 20px;
}

.mapa-motivo {
  font-size: 0.875rem;
  color: var(--suave);
  font-weight: 600;
  margin: 0 0 8px;
}

.mapa-sin-usar-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.mapa-sin-usar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--borde);
  border-radius: 10px;
  color: var(--suave);
}

.mapa-sin-usar-item .mapa-cabeza {
  align-items: flex-start;
}

.mapa-sin-usar-item .punto {
  margin-top: 5px;
}

.mapa-sin-usar-item h3 {
  font-size: 0.875rem;
  margin: 0;
  color: var(--texto);
}

@media (prefers-color-scheme: dark) {
  .mapa-chips .chip {
    color: var(--texto);
  }
}

@media (max-width: 1000px) {
  .mapa {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .mapa-lineas {
    display: none;
  }
}

/* The reconciliation: four figures on top, two tables side by side, and one
   row per call of the Bedrock invocation log, which scrolls sideways on a
   phone instead of folding. */
.figures.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.columnas.two {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.wide-table {
  overflow-x: auto;
}

.wide-table .comparacion {
  width: 100%;
}

.wide-table .comparacion td:first-child {
  white-space: nowrap;
}

.calls {
  min-width: 640px;
}

.calls th {
  text-align: left;
  font-weight: 500;
  color: var(--suave);
  font-size: 0.8125rem;
  padding: 0 12px 6px 0;
}

.calls th.num {
  text-align: right;
  padding-right: 0;
}

.calls td {
  padding: 8px 12px 8px 0;
  vertical-align: top;
}

.calls td:last-child,
.calls th:last-child {
  padding-right: 0;
}

.calls td.cuando {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--suave);
}

.calls td > span {
  display: block;
}

.calls td > .sub {
  font-size: 0.8125rem;
  color: var(--suave);
  white-space: nowrap;
}

.calls td > .etiqueta {
  display: inline-block;
}

@media (max-width: 1000px) {
  .figures.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .figures.four {
    grid-template-columns: minmax(0, 1fr);
  }
}