/**
 * Panel de SMS — estilos del front (Mi cuenta).
 *
 * Se apoya en las variables del tema (Blocksy) con valores de reserva, así
 * que hereda la paleta del sitio sin necesidad de configurarlo.
 *
 * @package LaboratorioWP_SaaS
 */

.lm-panel {
  --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-danger: #c0392b;
  --lm-gap: var(--theme-content-spacing, 1.5em);

  /*
   * Canal lateral de las tarjetas. Lo comparten cabecera, cuerpo, franjas
   * de control, celdas de tabla y pie: así todo cae sobre la misma línea
   * vertical y nada queda pegado al borde.
   */
  --lm-gutter: 1.4em;

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

/* ----------------------------- Navegación ----------------------------- */

.lm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  border-bottom: 1px solid var(--lm-line);
  margin: 0 0 var(--lm-gap);
}

.lm-nav a {
  padding: 0 0 .7em;
  font-size: .95em;
  font-weight: 500;
  text-decoration: none;
  color: var(--lm-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}

.lm-nav a:hover,
.lm-nav a:focus-visible {
  color: var(--lm-text);
}

.lm-nav a.is-active {
  color: var(--lm-accent);
  border-bottom-color: var(--lm-accent);
}

/* --------------------------- Resumen de estado -------------------------
 * Cuatro fichas: saldo, cuota, agenda y captación. Cada una responde a
 * "¿cómo voy?" y, si falta algo, enlaza a dónde resolverlo.
 *
 * Fichas de superficie sobre borde, sin rellenos de color: así heredan la
 * paleta del tema y conviven con las tablas de WooCommerce.
 */

.lm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-bottom: var(--lm-gap);
  background: var(--lm-line);
  border: 1px solid var(--lm-line);
}

/* El gap de 1px sobre fondo de línea hace de separador entre fichas:
   un solo trazo entre celdas, sin bordes dobles. */
.lm-stat {
  display: flex;
  flex-direction: column;
  gap: .25em;
  padding: 1.05em var(--lm-gutter);
  background: var(--lm-surface);
}

.lm-stat-label {
  font-size: .74em;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lm-muted);
}

.lm-stat-value {
  font-size: 1.65em;
  font-weight: 600;
  line-height: 1.15;
}

.lm-stat-value small {
  font-size: .5em;
  font-weight: 500;
  color: var(--lm-muted);
}

.lm-stat-value--sm {
  font-size: 1.05em;
  line-height: 1.5;
}

.lm-stat-foot {
  font-size: .8em;
  line-height: 1.4;
  color: var(--lm-muted);
}

.lm-stat .lm-quota {
  margin: .35em 0 .1em;
}

/* Bloque de cifras dentro de una pestaña (p. ej. la landing). */
.lm-stats--inner {
  margin-top: var(--lm-gap);
}

/* --------------------------- Secciones-tarjeta -------------------------
 * Cada bloque del panel es una tarjeta: cabecera, cuerpo y, si toca, franjas
 * de control y una tabla a sangre.
 *
 * La tarjeta pone el ÚNICO borde exterior. Todo lo que va dentro se separa
 * con una regla horizontal, nunca con un borde propio: así no aparecen
 * bordes dobles ni cajas dentro de cajas.
 *
 *   .lm-section
 *     .lm-section-head    título y explicación
 *     .lm-section-body    formularios y texto (con padding)
 *     .lm-strip           franja de controles (filtros, lotes)
 *     .lm-table           tabla a sangre, sin bordes laterales
 *     .lm-datafoot        recuento y paginación
 */

.lm-section {
  border: 1px solid var(--lm-line);
  background: var(--lm-surface);
  margin-bottom: var(--lm-gap);
}

.lm-section-head {
  padding: 1.05em var(--lm-gutter);
  border-bottom: 1px solid var(--lm-line);
}

.lm-section-head h3,
.lm-section-head h4 {
  margin: 0;
  font-size: 1.02em;
  line-height: 1.35;
}

.lm-section-head .lm-hint {
  margin-top: .35em;
}

.lm-section-body {
  padding: 1.25em var(--lm-gutter);
}

.lm-section-body > :last-child {
  margin-bottom: 0;
}

/* Franja de controles: filtros y lotes comparten tratamiento para que se
   lean como el mismo componente, no como dos cajas apiladas. */
.lm-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8em;
  padding: .95em var(--lm-gutter);
  border-top: 1px solid var(--lm-line);
  background: var(--lm-alt);
}

.lm-strip:first-child {
  border-top: 0;
}

.lm-strip .lm-field {
  flex: 1 1 170px;
  margin-bottom: 0;
}

/* Tabla a sangre dentro de la tarjeta: sin bordes propios, separada por
   una regla. Los laterales los pone la tarjeta. */
.lm-section .lm-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--lm-line);
}

/*
 * Las celdas usan el mismo canal que las franjas, así que las columnas
 * quedan alineadas con los controles de arriba. La cadena de clases sube
 * la especificidad para ganarle al padding que trae shop_table de
 * WooCommerce sin recurrir a !important.
 */
.lm-panel .lm-section table.lm-table th,
.lm-panel .lm-section table.lm-table td {
  border-left: 0;
  border-right: 0;
  padding: .95em var(--lm-gutter);
}

/* La cabecera respira un poco menos: es una etiqueta, no contenido. */
.lm-panel .lm-section table.lm-table thead th {
  padding-top: .8em;
  padding-bottom: .8em;
}

.lm-section .lm-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Pie del listado: mismo padding que la franja superior. */
.lm-datafoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  padding: .9em var(--lm-gutter);
  border-top: 1px solid var(--lm-line);
  font-size: .85em;
  color: var(--lm-muted);
}

.lm-datafoot .lm-pager {
  margin: 0;
}

.lm-datafoot .lm-pager a,
.lm-datafoot .lm-pager strong {
  margin: 0 0 0 .5em;
}

/* ---------------------------- Formularios ----------------------------- */

.lm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1em;
  align-items: start;
}

.lm-field {
  margin-bottom: 1em;
}

.lm-field label {
  display: block;
  font-size: .85em;
  font-weight: 500;
  margin-bottom: .35em;
}

.lm-field textarea,
.lm-field select,
.lm-field input[type="text"],
.lm-field input[type="email"],
.lm-field input[type="url"],
.lm-field input[type="tel"],
.lm-field input[type="search"],
.lm-field input[type="number"],
.lm-field input[type="date"],
.lm-field input[type="datetime-local"],
.lm-field input[type="password"] {
  width: 100%;
}

/*
 * Chrome dibuja su selector de datalist (un triangulo tipo <select>) dentro
 * de los input[list], y solo al enfocarlos: parece un fallo en un campo de
 * texto. Se oculta y se deja el comportamiento esperado, que la sugerencia
 * aparezca al escribir.
 */
.lm-field input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
}

.lm-hint {
  font-size: .82em;
  color: var(--lm-muted);
  margin: .4em 0 0;
}

.lm-muted {
  color: var(--lm-muted);
}

.lm-panel .lm-notice {
  margin: 0 0 var(--lm-gap);
  font-size: .9em;
}

.lm-field .lm-notice {
  margin-top: .6em;
}

/* -------------------------- Contador de SMS --------------------------- */

.lm-counter {
  font-size: .82em;
  color: var(--lm-muted);
  margin-top: .5em;
}

.lm-counter b {
  color: var(--lm-text);
  font-weight: 600;
}

.lm-counter.is-unicode b.lm-enc {
  color: var(--lm-warning);
}

/* ------------------------- Programar el envio -------------------------- */

/* Se separa del resto del formulario: es un modo distinto, no un campo mas. */
.lm-schedule-box {
  margin: 0 0 1.2em;
  padding: 1em 1.1em .4em;
  background: var(--lm-alt);
  border: 1px solid var(--lm-line);
  border-radius: 6px;
}

.lm-schedule-box .lm-field:last-of-type {
  margin-bottom: .6em;
}

/* --------------------------- Autocompletado --------------------------- */

.lm-suggest {
  position: relative;
}

.lm-suggest ul {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  max-height: 190px;
  overflow: auto;
}

.lm-suggest li {
  padding: .55em .8em;
  cursor: pointer;
  font-size: .88em;
  border-bottom: 1px solid var(--lm-line);
}

.lm-suggest li:last-child {
  border-bottom: 0;
}

.lm-suggest li:hover {
  background: var(--lm-alt);
}

/* ------------------------------ Etiquetas ----------------------------- */

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

/* ------------------------------- Cuota -------------------------------- */

.lm-quota {
  height: 4px;
  background: var(--lm-alt);
  margin: .6em 0 .4em;
}

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

/* ------------------------------- Código ------------------------------- */

.lm-code {
  display: block;
  padding: 1em 1.2em;
  font-family: var(--theme-font-family-mono, monospace);
  font-size: .82em;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
}

/* ------------------------------- Tablas ------------------------------- */

.lm-table td,
.lm-table th {
  vertical-align: top;
  font-size: .9em;
}

.lm-more {
  display: inline-block;
  margin-top: .3em;
  padding: 0;
  background: none;
  border: 0;
  color: var(--lm-accent);
  font-size: .82em;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.lm-full {
  display: none;
  margin-top: .4em;
  color: var(--lm-muted);
  font-size: .9em;
  line-height: 1.5;
  word-break: break-word;
}

.lm-full.is-open {
  display: block;
}

tr.is-expanded .lm-excerpt {
  display: none;
}

.lm-inline-form {
  display: inline;
}

.lm-danger {
  color: var(--lm-danger);
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: .85em;
  cursor: pointer;
  text-decoration: underline;
}

/* ----------------------------- Paginación ----------------------------- */

.lm-pager {
  font-size: .85em;
  color: var(--lm-muted);
}

.lm-pager a,
.lm-pager strong {
  margin-right: .6em;
}

/* --------------------------- Documentación ---------------------------- */

.lm-docs h4 {
  margin: 1.6em 0 .5em;
  font-size: .98em;
}

.lm-docs ul {
  margin: 0 0 1em 1.2em;
}

.lm-docs li {
  margin-bottom: .35em;
  font-size: .92em;
}

/* ------------------------------- Móvil -------------------------------- */

@media (max-width: 600px) {
  /* En pantallas estrechas cada píxel de ancho cuenta. */
  .lm-panel {
    --lm-gutter: .9em;
  }

  .lm-nav {
    gap: 1em;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .lm-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .lm-stat-value {
    font-size: 1.4em;
  }
}

/* ------------------------------ Landing QR ----------------------------- */

.lm-qr-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  align-items: flex-start;
  margin-bottom: 1.2em;
}

.lm-qr {
  flex: 0 0 auto;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--lm-line);
  border-radius: 8px;
  line-height: 0;
}

.lm-qr-side {
  flex: 1 1 240px;
  min-width: 240px;
}

.lm-code--inline {
  display: inline-block;
  padding: .5em .7em;
  background: var(--lm-alt);
  border: 1px solid var(--lm-line);
  border-radius: 4px;
  white-space: normal;
  word-break: break-all;
  font-size: .8em;
}

.lm-subhead {
  margin: 1.6em 0 .4em;
  font-size: 1em;
}

/* Prefijo fijo de la URL delante del campo de slug. */
.lm-prefixed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;
}

.lm-prefixed span {
  color: var(--lm-muted);
  font-size: .85em;
  word-break: break-all;
}

.lm-prefixed input {
  flex: 1 1 160px;
  min-width: 160px;
}

.lm-field input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 2px;
  cursor: pointer;
}

/* --------------------------- Casillas sueltas --------------------------- */

/* Un checkbox no encaja en .lm-grid junto a campos de texto: la rejilla
   los alinea por abajo y la casilla queda flotando. Van a ancho completo. */
.lm-check-row {
  margin-bottom: 1.2em;
}

.lm-inline-check {
  display: flex;
  align-items: flex-start;
  gap: .55em;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.lm-inline-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin: .15em 0 0;
  width: auto;
}

.lm-inline-check span {
  font-size: .92em;
  line-height: 1.45;
}

.lm-check-row .lm-hint {
  margin-left: 1.9em;
}

/* Campos numéricos cortos: no necesitan el 100 % de ancho. */
.lm-field input.lm-input-sm {
  width: auto;
  min-width: 7em;
}

.lm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: .8em 0 0;
}

/* --------------------------- Selector de estilo ------------------------- */

.lm-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8em;
  margin: 0 0 1.4em;
  padding: 0;
  border: 0;
}

.lm-style {
  display: block;
  position: relative;
  margin: 0;
  padding: .9em .9em 1em;
  border: 1px solid var(--lm-line);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 400;
  transition: border-color .15s, box-shadow .15s;
}

.lm-style:hover {
  border-color: var(--lm-accent);
}

.lm-style input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lm-style:has(input:checked) {
  border-color: var(--lm-accent);
  box-shadow: 0 0 0 2px var(--lm-accent) inset;
}

.lm-style:has(input:focus-visible) {
  outline: 2px solid var(--lm-accent);
  outline-offset: 2px;
}

.lm-style-name {
  display: block;
  margin-top: .6em;
  font-size: .88em;
  font-weight: 600;
  color: var(--lm-text);
}

.lm-style-desc {
  display: block;
  margin-top: .2em;
  font-size: .76em;
  line-height: 1.4;
  color: var(--lm-muted);
}

/* ---------------------- Miniaturas de cada estilo -----------------------
 * Reproducen en pequeño el "material" de cada acabado: <i> es la tarjeta
 * y <b> el botón. No pretenden ser exactas, solo dejar ver la diferencia
 * antes de guardar. */

.lm-style-demo {
  display: block;
  height: 56px;
  padding: 9px;
  border-radius: 6px;
  background: var(--lm-alt);
}

.lm-style-demo i {
  display: block;
  height: 16px;
  margin-bottom: 6px;
  background: var(--lm-surface);
  border-radius: 3px;
}

.lm-style-demo b {
  display: block;
  height: 12px;
  width: 62%;
  background: var(--lm-accent);
  border-radius: 3px;
}

/* Flat: sin nada. */
.lm-demo--flat i,
.lm-demo--flat b { border-radius: 2px; }

/* Material: sombras de elevación. */
.lm-demo--material i { border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .22); }
.lm-demo--material b { border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }

/* Skeuomorfismo: degradado y bisel. */
.lm-demo--skeu { background: linear-gradient(180deg, #dfe4ea, #c9d1da); }
.lm-demo--skeu i { background: linear-gradient(180deg, #fff, #e5eaef); border: 1px solid #adb6c0; box-shadow: inset 0 1px 0 #fff; }
.lm-demo--skeu b { border: 1px solid rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(0, 0, 0, .3); }

/* Neumorfismo: doble sombra sobre el mismo tono. */
.lm-demo--neu { background: #e8ebf0; }
.lm-demo--neu i { background: #e8ebf0; border-radius: 6px; box-shadow: 3px 3px 6px #c6cbd3, -3px -3px 6px #fdfeff; }
.lm-demo--neu b { background: #e8ebf0; border-radius: 6px; box-shadow: 2px 2px 5px #c6cbd3, -2px -2px 5px #fdfeff; }

/* Glassmorfismo: translúcido sobre color. */
.lm-demo--glass { background: linear-gradient(135deg, var(--lm-accent), #b06ab3); }
.lm-demo--glass i { background: rgba(255, 255, 255, .3); border: 1px solid rgba(255, 255, 255, .5); border-radius: 5px; }
.lm-demo--glass b { background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .6); border-radius: 5px; }

/* Claymorfismo: inflado y muy redondeado. */
.lm-demo--clay { background: color-mix(in srgb, var(--lm-accent) 12%, #f2f0fb); }
.lm-demo--clay i { border-radius: 9px; box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .06), inset 2px 2px 4px rgba(255, 255, 255, .9), 0 3px 6px rgba(0, 0, 0, .12); }
.lm-demo--clay b { border-radius: 8px; box-shadow: 0 3px 0 color-mix(in srgb, var(--lm-accent) 65%, #000); }

/* Biomorfismo: contornos irregulares. */
.lm-demo--bio { background: color-mix(in srgb, var(--lm-accent) 10%, #f7f5ef); }
.lm-demo--bio i { border-radius: 12px 4px 10px 6px; }
.lm-demo--bio b { border-radius: 9px 4px 8px 5px; }

/* Auromorfismo: halo sobre fondo oscuro. */
.lm-demo--auro { background: #0b0f16; }
.lm-demo--auro i { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; }
.lm-demo--auro b { border-radius: 5px; box-shadow: 0 0 10px var(--lm-accent); }

/* Sin :has() (navegadores antiguos), el radio se muestra para no dejar al
   usuario sin saber cuál está elegido. */
@supports not selector(:has(*)) {
  .lm-style input {
    position: static;
    opacity: 1;
    pointer-events: auto;
    margin-bottom: .5em;
  }
}

/* ------------------------------- Agenda -------------------------------- */

.lm-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 520px;
}

.lm-tiny {
  font-size: .8em;
}

/* Renombrar grupo: campo y boton en la misma linea. */
.lm-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
}

.lm-rename input {
  flex: 1 1 130px;
  min-width: 120px;
}

/*
 * Tarjeta de edicion. Sin barras de color: se distingue por el fondo suave
 * del tema y por estar separada del resto, no por un adorno.
 */
.lm-editing {
  padding: 1.1em var(--lm-gutter);
  margin-bottom: 1.3em;
  border: 1px solid var(--lm-line);
  background: var(--lm-alt);
}

.lm-editing h4 {
  margin: 0 0 .9em;
  font-size: .98em;
}

/* La fila que se esta editando se marca con fondo, no con un contorno. */
.lm-table--contacts tr.is-editing > td {
  background: var(--lm-alt);
}

/* Filtros y lotes son la misma franja (.lm-strip); aquí solo lo propio
   de cada uno. */

.lm-bulkbar {
  align-items: center;
}

.lm-bulkcount {
  flex: 1 1 auto;
  font-size: .85em;
  color: var(--lm-muted);
}

.lm-bulkbar select {
  width: auto;
  min-width: 9em;
}

.lm-bulkbar .button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* Todas las celdas centradas verticalmente: la fila lleva casillas, texto
   y botones, y con alineación superior cada cosa quedaba a una altura. */
.lm-table--contacts th,
.lm-table--contacts td {
  vertical-align: middle;
}

/* Ancho justo para la casilla más el canal a ambos lados. */
.lm-col-check {
  width: 3.4em;
  text-align: center;
}

.lm-panel .lm-section table.lm-table th.lm-col-check,
.lm-panel .lm-section table.lm-table td.lm-col-check {
  padding-right: .4em;
}

.lm-col-check input {
  margin: 0;
  width: auto;
  vertical-align: middle;
}

.lm-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9em;
  align-items: center;
}

/* Dentro de una fila los enlaces de acción no arrastran el margen que
   llevan cuando actúan como pie de un texto. */
.lm-row-actions .lm-more {
  margin-top: 0;
}

/*
 * Solo lo que necesita atencion lleva color. El origen de un contacto es
 * un dato neutro; que este sin verificar, no.
 */
.lm-tag--ok {
  color: var(--lm-text);
}

.lm-tag--warn {
  border-color: currentColor;
  color: var(--lm-warning);
}

/* Por si el tema no lo trae. */
.lm-panel .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .lm-bulkbar { align-items: stretch; }
  .lm-bulkcount { flex-basis: 100%; }
  .lm-row-actions { gap: .6em; }
}