/* ==========================================================
   Panel de Automatizacion Orbex — componentes reutilizables
   Piezas de UI usadas en mas de una pagina/pestana: checkboxes
   propios, pills, badges de estado, tablas, modales, avisos.
   Requiere css/base.css cargado antes (usa sus variables).
   ========================================================== */

/* ---------- Checkbox/radio propios (mod-option) ----------
   Usado en "Agregar negocio" (index.php) y en el selector de
   tipo de base de datos (negocio.php, pestana Bases de datos). */
.mod-option {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 10px 12px; font-size: 13px; cursor: pointer; color: var(--text-dim);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mod-option:hover { border-color: var(--teal); color: var(--text); }
.mod-option i { font-size: 16px; }
/* Checkbox/radio propios: un <input> real (invisible, sigue siendo
   clickeable y accesible) + un <span class="mo-box"> hermano que dibuja
   la caja/circulo y la marca. No se usa ::after sobre el <input> mismo
   porque los <input> son "elementos reemplazados" y varios navegadores
   no pintan contenido generado sobre ellos aunque el estilo calculado
   diga que existe — por eso se dibuja todo en un span aparte. */
.mod-option .mo-check { position: relative; width: 15px; height: 15px; flex-shrink: 0; display: inline-block; }
.mod-option .mo-check input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1;
}
.mod-option .mo-box {
  position: absolute; inset: 0;
  border: 1.5px solid var(--border-strong); background: var(--surface-2);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mod-option .mo-check input[type="checkbox"] ~ .mo-box { border-radius: 4px; }
.mod-option .mo-check input[type="radio"] ~ .mo-box { border-radius: 50%; }
.mod-option .mo-check input:hover ~ .mo-box { border-color: var(--teal); }
.mod-option .mo-check input:checked ~ .mo-box { border-color: var(--teal-soft); background: rgba(0, 168, 150, 0.18); }
.mod-option .mo-check input[type="checkbox"]:checked ~ .mo-box::after {
  content: ""; position: absolute; left: 3.5px; top: -1px;
  width: 5px; height: 9px; border: solid var(--teal-soft); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.mod-option .mo-check input[type="radio"]:checked ~ .mo-box::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-soft);
  box-shadow: 0 0 5px rgba(0, 201, 179, 0.7);
  transform: translate(-50%, -50%);
}
.mod-option .mo-check input:disabled ~ .mo-box { opacity: 0.55; cursor: not-allowed; }
.mod-option.mod-proximamente { cursor: not-allowed; opacity: 0.45; }
.mod-option.mod-proximamente:hover { border-color: var(--border-strong); color: var(--text-dim); }
.mod-option .mod-tag { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }

/* ---------- Pills y badges de estado ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--teal-glow); color: var(--teal-soft);
  border-radius: 20px; padding: 3px 10px; font-size: 12px; margin: 0 4px 4px 0;
}
.pill i { font-size: 13px; }
.pill.rol-dueno { background: var(--teal-glow); color: var(--teal-soft); }
.pill.rol-entrenador { background: rgba(96, 165, 250, 0.14); color: #7ab8fd; }
.pill.rol-editor { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); }
.pill.tipo-instruccion { background: var(--teal-glow); color: var(--teal-soft); }
.pill.tipo-limitacion { background: rgba(255, 107, 94, 0.14); color: var(--danger); }

.estado-prueba {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 3px 9px; border-radius: 20px; cursor: default;
}
.estado-prueba::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.estado-prueba.sin-probar { background: rgba(255, 255, 255, 0.06); color: var(--text-faint); }
.estado-prueba.sin-probar::before { background: var(--text-faint); }
.estado-prueba.ok { background: rgba(74, 222, 128, 0.12); color: var(--ok); }
.estado-prueba.ok::before { background: var(--ok); }
.estado-prueba.error { background: rgba(255, 107, 94, 0.14); color: var(--danger); }
.estado-prueba.error::before { background: var(--danger); }

/* ---------- Uso/costo de IA (Configuracion del sistema, Bot e IA) ---------- */
.uso-limite { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); min-width: 110px; }
.uso-limite .barra { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.uso-limite .barra-relleno { height: 100%; border-radius: 3px; background: var(--ok); transition: width 0.2s ease; }
.uso-limite .barra-relleno.medio { background: #eab308; }
.uso-limite .barra-relleno.alto { background: var(--danger); }
.uso-costo { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.uso-costo strong { color: var(--text); }
.empty-state { color: var(--text-dim); font-size: 13px; padding: 1rem 0; }

/* ---------- Estado de WhatsApp (tarjeta de negocio + pestana WhatsApp) ---------- */
.whatsapp-estado { font-size: 12px; margin: 8px 0 0; display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.whatsapp-estado .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); display: inline-block; }
.whatsapp-estado.conectado .dot { background: var(--ok); }
.whatsapp-estado.pendiente .dot { background: var(--warn); }

/* ---------- Tablas ---------- */
/* .tabla-wrap: contenedor con scroll horizontal PROPIO, en cualquier
   ancho de pantalla (no solo movil) -- sin esto, una tabla con muchas
   columnas (ej. Entradas) empuja el ancho real mas alla de la card y
   el ultimo contenido (la columna de acciones) queda cortado o se
   sale del recuadro, tanto en desktop como en movil. Envolver
   <table class="tabla"> en <div class="tabla-wrap"> para tablas
   anchas; las tablas cortas (ya caben siempre) no lo necesitan. */
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; color: var(--text-faint); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tabla td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabla input { padding: 7px 9px; font-size: 13px; }
.tabla .accion { text-align: right; white-space: nowrap; }
.tabla .accion-iconos { display: flex; gap: 4px; justify-content: flex-end; }
.link-accion { background: none; border: none; cursor: pointer; font-size: 13px; font-family: inherit; padding: 4px 6px; }
.link-guardar { color: var(--teal-soft); }
.link-eliminar { color: var(--danger); }

@media (max-width: 640px) {
  .tabla th, .tabla td { padding: 8px 12px; }
}

/* ---------- Modales ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 1.6rem; max-width: 340px; width: 100%;
  text-align: center;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-box h3 { margin: 0 0 0.5rem; font-size: 16px; }
.modal-box p { font-size: 13px; color: var(--text-dim); margin: 0 0 1rem; line-height: 1.5; }
.modal-box img { width: 220px; height: 220px; border-radius: var(--radius); background: #fff; padding: 8px; }
.modal-box-ancho { max-width: 640px; text-align: left; }

/* ---------- Avisos inline ---------- */
.aviso-ok { color: var(--ok); font-size: 13px; }
.aviso-error { color: var(--danger); font-size: 13px; }