/**
 * Resumen del Panel de SMS en el escritorio de "Mi cuenta".
 *
 * Hoja aparte de panel.css: el escritorio lo ve todo el mundo en cada
 * visita a su cuenta, y solo necesita estas reglas —no las 900 del panel.
 *
 * Usa las mismas variables del tema que el panel, con los mismos valores de
 * reserva, para que ambas pantallas hereden una única paleta.
 *
 * @package LaboratorioWP_SaaS
 */

.lm-account-summary {
  --lm-line: var(--theme-border-color, rgba(0, 0, 0, .1));
  --lm-accent: var(--theme-palette-color-1, #3eaf7c);
  --lm-text: var(--theme-palette-color-3, #3a4f66);
  --lm-muted: var(--theme-palette-color-4, #7a8a99);
  --lm-surface: var(--theme-palette-color-8, #fff);
  --lm-alt: var(--theme-palette-color-7, #f5f7f9);
  --lm-warning: #b26a00;
  --lm-gap: var(--theme-content-spacing, 1.5em);
  --lm-gutter: 1.4em;

  font-family: var(--theme-font-family, inherit);
  color: var(--lm-text);
  margin: var(--lm-gap) 0;
}

/* --------------------------- Fila de tarjetas --------------------------
 * Tres tarjetas de igual altura que se apilan solas al estrecharse: cada
 * una responde a "¿cómo voy?" en uno de los servicios y termina en el
 * enlace que lleva a resolverlo.
 */

.lm-account-summary .lm-sum-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25em;
  align-items: stretch;
}

.lm-account-summary .lm-sum-card {
  flex: 1 1 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lm-line);
  background: var(--lm-surface);
}

/* ------------------------------- Cabecera ------------------------------ */

.lm-account-summary .lm-sum-head {
  display: flex;
  align-items: flex-start;
  gap: .9em;
  padding: 1.05em var(--lm-gutter);
  border-bottom: 1px solid var(--lm-line);
  background: var(--lm-alt);
}

.lm-account-summary .lm-sum-icon {
  flex: 0 0 2.4em;
  width: 2.4em;
  height: 2.4em;
  border: 1px solid var(--lm-line);
  border-radius: 50%;
  background: var(--lm-surface);
  color: var(--lm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lm-account-summary .lm-sum-icon svg {
  width: 1.15em;
  height: 1.15em;
}

.lm-account-summary .lm-sum-title {
  display: flex;
  flex-direction: column;
  gap: .1em;
  line-height: 1.3;
  min-width: 0;
}

.lm-account-summary .lm-sum-title strong {
  font-size: .74em;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lm-muted);
}

.lm-account-summary .lm-sum-count {
  font-size: 1.65em;
  font-weight: 600;
  line-height: 1.15;
}

.lm-account-summary .lm-sum-count small {
  font-size: .5em;
  font-weight: 500;
  color: var(--lm-muted);
}

.lm-account-summary .lm-sum-count--sm {
  font-size: 1.05em;
  line-height: 1.5;
}

.lm-account-summary .lm-sum-sub {
  font-size: .8em;
  line-height: 1.4;
  color: var(--lm-muted);
}

/* -------------------------------- Cuerpo ------------------------------- */

.lm-account-summary .lm-sum-body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1;
  padding: 1.05em var(--lm-gutter);
}

.lm-account-summary .lm-sum-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85em;
}

.lm-account-summary .lm-sum-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: .55em 0;
  border-bottom: 1px dashed var(--lm-line);
}

.lm-account-summary .lm-sum-list li:first-child {
  padding-top: 0;
}

.lm-account-summary .lm-sum-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* La cifra de la derecha no se parte aunque el rótulo sea largo. */
.lm-account-summary .lm-sum-list li > :last-child {
  white-space: nowrap;
}

.lm-account-summary .lm-sum-note,
.lm-account-summary .lm-sum-empty {
  margin: 0;
  font-size: .85em;
  line-height: 1.5;
  color: var(--lm-muted);
}

.lm-account-summary .lm-sum-tag {
  display: inline-block;
  padding: .15em .6em;
  font-size: .9em;
  border: 1px solid var(--lm-line);
  border-radius: 2em;
  color: var(--lm-muted);
}

/* Solo lo que sigue en marcha se colorea; lo terminado es un dato neutro. */
.lm-account-summary .lm-sum-tag--warn {
  border-color: currentColor;
  color: var(--lm-warning);
}

/* Misma barra de cuota que el panel, para que se lean como lo mismo. */
.lm-account-summary .lm-sum-quota {
  height: 4px;
  background: var(--lm-alt);
}

.lm-account-summary .lm-sum-quota i {
  display: block;
  height: 100%;
  background: var(--lm-accent);
}

/* -------------------------------- Enlace ------------------------------- */

/* Pegado al fondo: las tres tarjetas terminan a la misma altura aunque
   sus listas tengan distinto largo. */
.lm-account-summary .lm-sum-btn {
  margin-top: auto;
  display: block;
  padding: .65em 1em;
  border: 1px solid var(--lm-accent);
  color: var(--lm-accent);
  background: none;
  font-size: .85em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.lm-account-summary .lm-sum-btn:hover,
.lm-account-summary .lm-sum-btn:focus-visible {
  background: var(--lm-accent);
  color: var(--lm-surface);
}