/* ========================= */
/*      RESET GLOBAL         */
/* ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ========================= */
/*   CONTENEDOR PRINCIPAL    */
/* ========================= */
.autocrm-dashboard-container {
  padding: 5px;
  background-color: #f9f9f9;
  height: 100vh; /* Ocupa toda la altura de la pantalla */
  display: flex;
  flex-direction: column;
}

/* ========================= */
/*        MODALES            */
/* ========================= */
.autocrm-simple-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.autocrm-simple-modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Botones dentro del modal */
.autocrm-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.autocrm-modal-buttons button {
  padding: 6px 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.autocrm-modal-buttons button:hover {
  background-color: #0056b3;
}

/* ========================= */
/*         SECCIONES         */
/* ========================= */
.autocrm-main-container {
  width: 100%;
}

/* ========================= */
/*  SECCIÓN COMPLETA (TARJETA BLANCA)  */
/* ========================= */
.autocrm-section {
  flex-grow: 1; /* Permite que el contenedor use todo el espacio disponible */
  margin-bottom: 0; /* Elimina margen extra que generaba espacio en blanco */
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  max-height: 65vh; /* Ajusta el tamaño sin dejar tanto espacio en blanco */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Secciones específicas */
.autocrm-section-selection { /* Estilos específicos para selección */ }
.autocrm-section-data-display { /* Estilos específicos para visualización de datos */ }
.autocrm-section-saved-tables { /* Estilos específicos para tablas guardadas */ }
.autocrm-section-import-export { /* Estilos específicos para importación/exportación */ }

/* ========================= */
/*  CONTENEDORES DE SELECT   */
/* ========================= */
.autocrm-select-container,
.autocrm-group-select {
  margin-bottom: 15px;
}

/* ========================= */
/*      MENSAJES & UTILS     */
/* ========================= */
.autocrm-loading {
  color: #007bff;
  font-weight: 500;
}

.autocrm-error-message {
  color: #d9534f;
  font-weight: bold;
}

.autocrm-info {
  color: #6c757d;
  font-style: italic;
}

/* ========================= */
/*   LISTA DE PROCEDIMIENTOS */
/* ========================= */
.autocrm-selected-procedures {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #fafafa;
  border-radius: 4px;
}

.autocrm-selected-procedures h3 {
  margin-bottom: 0.5rem;
}

.autocrm-selected-procedures ul {
  list-style: disc;
  margin-left: 1.5rem;
}

/* ========================= */
/*     TOOLBOX & BOTONES     */
/* ========================= */
.autocrm-toolbox {
  /* Lo que ya tienes: fondo verde, padding, etc. */
  margin-bottom: 1rem;
  padding: 10px 15px;
  background-color: #fafafa;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

  /* NUEVO: convertimos la toolbox en flex-container */
  display: flex;
  align-items: center;   /* Alineación vertical */
  /* justify-content: space-between; <-- si deseas un espacio fijo en cada sección,
     puedes usar "justify-content: space-between;" o dejarlo en center si quieres que
     cada sección ocupe su ancho exacto. */
}

.autocrm-toolbar-section {
  flex: 1;                /* Cada sección ocupa 1/3 del espacio */
  display: flex;          /* Cada sección también es flex-container */
  justify-content: center;/* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
}

.autocrm-btn-save-columns {
  padding: 10px 15px;
  background-color: #5cb85c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.autocrm-btn-save-columns:hover {
  background-color: #4cae4c;
}

/* ========================= */
/*    TABLAS (CARD STYLE)    */
/* ========================= */

/* Contenedor de la tabla */
.autocrm-data-table-container {
  flex-grow: 1; /* Permite que la tabla se expanda dentro del contenedor */
  margin-top: 0; /* Elimina margen extra */
  max-width: 100%;
  max-height: 65vh; /* Ajusta la altura de la tabla sin dejar espacio extra */
  overflow-x: auto;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 15px;
}

/* Tabla genérica */
.autocrm-data-table {
  width: 100%;
  border-collapse: collapse;
}

/* Encabezado de tabla genérica */
.autocrm-data-table-head {
  position: sticky;
  top: 0;
  z-index: 10; /* Asegura que quede por encima de los demás contenidos */
  background-color: #f5f5f5; /* O el color que desees para el fondo */
}

.autocrm-data-table-head th {
  padding: 10px;
  border: 1px solid #ddd;
  font-weight: bold;
  text-align: left;
  /* Ancho mínimo y máximo para cada columna */
  min-width: 200px;
  max-width: 300px;
}

/* Cuerpo de tabla genérica */
.autocrm-data-table-body td {
  padding: 10px;
  border: 1px solid #ddd;
  vertical-align: top;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  /* Ancho mínimo y máximo para cada celda */
  min-width: 200px;
  max-width: 300px;
}

.autocrm-data-table-body tr:nth-child(even) {
  background-color: #fafafa;
}

/* ========================= */
/*         TOOLBOX           */
/* ========================= */
.autocrm-toolbox {
  margin-bottom: 1rem;
  padding: 10px 15px;
  background-color: #e9f1f7;  /* Fondo claro, por ejemplo, un verde pálido */
  border: 0px solid #e9f1f7;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ========================= */
/*      TABLAS GUARDADAS     */
/* ========================= */
.autocrm-saved-tables {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.autocrm-saved-tables thead th {
  background-color: #f1f1f1;
  padding: 10px;
  border: 1px solid #ddd;
  font-weight: bold;
  text-align: left;
}

.autocrm-saved-tables th,
.autocrm-saved-tables td {
  border: 1px solid #ddd;
  padding: 8px;
  vertical-align: top;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  text-align: left;
}

.autocrm-saved-tables tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* ========================= */
/*       ACCIONES (BOTONES)  */
/* ========================= */
.autocrm-action-buttons button {
  margin-right: 5px;
  padding: 6px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.autocrm-action-buttons button:hover {
  background-color: #0056b3;
}

.autocrm-btn {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.autocrm-btn-danger {
  background-color: #d9534f;
  color: #fff;
}

.autocrm-btn-full {
  width: 100%;
  background-color: #007bff;
  color: #fff;
}

.autocrm-ml-2 {
  margin-left: 8px;
}

.autocrm-btn-export-csv,
.autocrm-btn-import-csv {
  padding: 8px 12px;
  background-color: #5cb85c;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

.autocrm-btn-import-csv input {
  display: none;
}

.autocrm-btn-copy {
  margin-top: 5px;
  padding: 6px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.autocrm-save-config-btn {
  margin-top: 10px;
  background-color: #28a745;
  color: #fff;
}

/* ========================= */
/*    IMPORT/EXPORT          */
/* ========================= */
.autocrm-import-export-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ========================= */
/*       COMPONENTE CARD     */
/* ========================= */
.autocrm-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

.autocrm-card--max-width {
  max-width: 1200px;
}

.autocrm-card-content {
  padding: 20px;
}

.autocrm-title {
  font-size: 1.5rem;
  margin-bottom: 15px;
  text-align: center;
}

/* ========================= */
/*   FORMULARIOS & LISTAS    */
/* ========================= */
.autocrm-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.autocrm-margin-bottom {
  margin-bottom: 15px;
}

.autocrm-subtitle {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.autocrm-list {
  list-style: disc;
  margin-left: 20px;
}

.autocrm-list-item {
  margin-bottom: 8px;
}

/* Utilidades flex */
.autocrm-flex {
  display: flex;
}

.autocrm-justify-between {
  justify-content: space-between;
}

.autocrm-items-center {
  align-items: center;
}

.autocrm-text-gray {
  color: #6c757d;
}

/* ========================= */
/*    GESTOR COLUMNAS        */
/* ========================= */

.autocrm-columns-list {
  margin-top: 15px;
}

.autocrm-data-table-head th {
  background-color: #f1f1f1;
  padding: 10px;
  border: 1px solid #ddd;
}

.autocrm-data-table-body td {
  padding: 10px;
  border: 1px solid #ddd;
}

.autocrm-save-dashboard {
  margin-top: 20px;
  text-align: center;
}

/* ========================= */
/*   CONFIGURACIÓN DE COLUMNAS */
/* ========================= */

.autocrm-dropdown-config {
  margin-top: 10px;
}

.autocrm-no-options {
  font-style: italic;
  color: #6c757d;
}

.autocrm-option-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.autocrm-number-config,
.autocrm-correo-config,
.autocrm-text-config {
  margin-top: 10px;
}

/* ========================= */
/*      INTERFAZ DE EMAIL    */
/* ========================= */
.autocrm-email-field {
  margin-bottom: 15px;
}

.autocrm-textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* ========================= */
/*    SHORTCODE (Dashboards) */
/* ========================= */
.autocrm-shortcode-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ========================= */
/*   ESTILOS ESPECÍFICOS WP  */
/* ========================= */
.wp-admin .autocrm-data-table th,
.wp-admin .autocrm-data-table td {
  min-width: 300px;
  padding: 10px 15px;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.wp-admin .autocrm-data-table {
  border-collapse: collapse;
}

/* ========================= */
/*      INPUTS UNIFICADOS    */
/* ========================= */
.autocrm-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  background-color: #fff;
  font: inherit;
  color: #333;
  outline: none;
  box-sizing: border-box;
}

.autocrm-input:hover {
  border-color: #999;
}

.autocrm-input:focus {
  border-color: #007bff;
}


/* ========================= */
/*      Table Wrapper    */
/* ========================= */
.autocrm-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 70vh;
  overscroll-behavior: contain;
}

/* ========================= */
/*     Gestor de Columnas    */
/* ========================= */

/* Contenedor para el input (alias) y el botón de guardar */
.autocrm-alias-field {
  display: flex;
  align-items: center;
  gap: 8px; /* Separación horizontal entre el input y el botón */
}

/* El input crecerá hasta ocupar espacio disponible, 
   pero no excederá un ancho máximo */
.autocrm-alias-field .autocrm-input {
  flex: 1;
  max-width: 250px; /* Ajusta este valor a tu preferencia */
}

/* El botón no se encogerá */
.autocrm-alias-field .autocrm-btn {
  flex-shrink: 0;
}

/* ========================= */
/*        TIPOGRAFÍA        */
/* ========================= */
body {
  font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;  font-size: 14px;
  color: #333;
}

/* ========================= */
/*       ENCABEZADOS        */
/* ========================= */
.autocrm-data-table-head th {
  background-color: #f8f9fa;
  color: #212529;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 12px;
  border-bottom: 2px solid #dee2e6;
}

/* ========================= */
/*         CELDAS           */
/* ========================= */
.autocrm-data-table-body td {
  font-size: 16px;
  color: #495057;
  padding: 10px 12px;
  border-bottom: 1px solid #dee2e6;
}

/* ========================= */
/*     SELECCIÓN DE FILA    */
/* ========================= */
.autocrm-data-table-body tr:hover {
  background-color: rgba(0, 123, 255, 0.1);
  transition: background 0.2s ease-in-out;
}

/* ========================= */
/*       BOTONES            */
/* ========================= */
.autocrm-btn {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background 0.2s ease-in-out;
}

.autocrm-btn-primary {
  /* Color base: un gris claro */
  background-color: #fafafa;
  color: #333;
  border: 1px solid #ccc;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.autocrm-btn-primary:hover {
  /* Hover: un tono ligeramente más oscuro y/o cambio en el borde */
  background-color: #f0f0f0; /* un poco más oscuro que #fafafa */
  border-color: #999;        /* marca un poco más el borde */
  color: #111;               /* si quieres que el texto sea algo más oscuro al hover */
}


.autocrm-btn-danger {
  background-color: #dc3545;
  color: white;
  border: none;
}
.autocrm-btn-danger:hover {
  background-color: #a71d2a;
}

/* ========================= */
/*        FORMULARIOS       */
/* ========================= */
.autocrm-input {
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border 0.2s ease-in-out;
}

.autocrm-input:focus {
  border-color: #007bff;
  outline: none;
}


.autocrm-overlay {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.autocrm-overlay-content {
  color: #fff;
  font-size: 1.2rem;
  /* Spinner, imagen, etc. */
}


.autocrm-filas-correo {
  max-width: 300px;       /* Limita el ancho */
  column-count: 2;        /* Divide el contenido en dos columnas */
  column-gap: 16px;       /* Espacio entre columnas */
}

.autocrm-filas-correo .autocrm-modal-field-item {
  break-inside: avoid;    /* Evita que se corte el contenido entre columnas */
  margin-bottom: 8px;      /* Separación vertical entre filas */
  display: flex;
  align-items: center;
  gap: 8px;               /* Espacio entre el checkbox y el label */
}


.autocrm-btn-danger {
  background-color: #dc3545 !important; /* Rojo Bootstrap-like */
  border-color: #dc3545 !important;
  color: #fff !important;
}