/* Tabs */
.crm-tabs { display: flex; margin-bottom: 10px; }
.crm-tabs button { flex: 1; padding: 10px; cursor: pointer; }
.crm-tab-content { display: none; }
.crm-tab-content.active { display: block; }

/* Modal */
.crm-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.crm-modal-content { background: #fff; margin: 10% auto; padding: 20px; width: 600px; }

/* Forzar DataTable a ocupar todo el ancho */
#crm-clientes_wrapper, .crm-form {
    max-width: 100% !important;
    width: 100% !important;
}
#crm-clientes, .crm-form {
    width: 100% !important;
}

/* ====== CRM Top Nav (Gutenberg Page List) ====== */
:root{
  --crm-primary: #0073aa;
  --crm-primary-600:#005f8d;
  --crm-border:#e5e7eb;
  --crm-bg:#ffffff;
  --crm-pill:#f5f7fa;
  --crm-text:#1f2937;
}

/* Quitar límites de 620px en contenedores "constrained" */
.is-layout-constrained > :where(.wp-block-page-list){
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Contenedor de la lista (la barra) */
.wp-block-page-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;        /* en móvil se parte en varias filas */
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  margin: 10px 0 20px;
  background: var(--crm-bg);
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  width: 100%;
}

/* Reset margenes de <li> */
.wp-block-pages-list__item{
  margin: 0;
  padding: 0;
}

/* Enlaces como píldoras */
.wp-block-pages-list__item__link{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--crm-pill);
  color: var(--crm-text);
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Hover */
.wp-block-pages-list__item__link:hover{
  background: #eef2f6;
}

/* Focus accesible */
.wp-block-pages-list__item__link:focus{
  outline: none;
  border-color: var(--crm-primary);
  box-shadow: 0 0 0 3px rgba(0,115,170,.2);
}

/* Activo (WordPress pone .current-menu-item en el <li>) */
.wp-block-pages-list__item.current-menu-item > .wp-block-pages-list__item__link{
  background: var(--crm-primary);
  color: #fff;
}

/* Opcional: si quieres un “borde fantasma” alrededor del activo al pasar el mouse */
.wp-block-pages-list__item.current-menu-item > .wp-block-pages-list__item__link:hover{
  background: var(--crm-primary-600);
}

/* Pequeños ajustes en pantallas muy estrechas */
@media (max-width: 480px){
  .wp-block-page-list{
    justify-content: flex-start; /* alineado a la izquierda si lo prefieres */
    gap: 8px;
    padding: 8px;
  }
  .wp-block-pages-list__item__link{
    padding: 8px 12px;
  }
}

/* Fila con fondo por estado (usa variable --estado-bg) */
.crm-leads-table tr { transition: background .2s ease; }
.crm-leads-table tr:hover { filter: brightness(0.98); }

/* Badge de estado */
.crm-badge-estado{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: color-mix(in srgb, var(--estado-color, #e5e7eb) 16%, white);
  border: 1px solid color-mix(in srgb, var(--estado-color, #e5e7eb) 40%, white);
}

/* Compatibilidad si el navegador no soporta color-mix */
@supports not (background: color-mix(in srgb, #000 10%, white)) {
  .crm-badge-estado{
    background: #eef2f7;
    border-color: #d8dee9;
  }
}

/* Ajustes tabla DataTable si usas el wrapper por defecto */
#crm-clientes { width: 100% !important; }
#crm-clientes_wrapper { width: 100% !important; max-width: 100% !important; }

table.dataTable tbody tr {
    font-size: 14px;
}
a.button.crm-btn-editar {
    border: 1px #000 solid;
    padding: 1px 5px;
    background: #efefef;
    font-size: 13px;
    text-decoration: none;
}
/* Navegadores modernos (usa :has) */
.wp-block-page-list > .wp-block-pages-list__item:has(> a.wp-block-pages-list__item__link[href$="/editar-cliente/"]) {
  display: none !important;
}
.crm-notas-list .crm-nota .meta {
    font-size: 12px;
}