/* ============================
   Mensajes de estado flotantes
   ============================ */

   .mensaje-error {
    max-width: 28rem;
    padding: 1rem 2.5rem 1rem 1rem; /* 👉 más espacio a la derecha */
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 1.375rem;           /* 👉 text-xl → text-[1.375rem] aprox (22px) */
    font-weight: 600;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    line-height: 1.5;              /* Mejora la legibilidad */
}

/* Mensaje de error */
.mensaje-error-error {
    color: #dc2626;                /* Tailwind: text-red-600 */
    background-color: #fee2e2;     /* Tailwind: bg-red-100 */
    border: 2px solid #f87171;     /* Tailwind: border-red-400 */
}

/* Mensaje de éxito */
.mensaje-error-exito {
    color: #15803d;                /* Tailwind: text-green-700 */
    background-color: #d1fae5;     /* Tailwind: bg-green-100 */
    border: 2px solid #34d399;     /* Tailwind: border-green-400 */
}

/* Mensaje informativo */
.mensaje-error-info {
    color: #1e40af;                /* Tailwind: text-blue-800 */
    background-color: #dbeafe;     /* Tailwind: bg-blue-100 */
    border: 2px solid #60a5fa;     /* Tailwind: border-blue-400 */
}


/* checkboxes */

/* .checkbox-tick {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    display: inline-block;
  }

  .checkbox-wrapper {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
  }
  
  .checkbox-wrapper svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
  
  .checkbox-wrapper input:checked + svg {
    opacity: 1;
  } */

/* Contenedor */
.checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

/* Caja del checkbox */
.checkbox-tick {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  background-color: var(--soft-color); /* Fondo claro */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  position: relative;
  z-index: 1;
}

/* Tick (SVG) */
.checkbox-wrapper svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  z-index: 2;
  stroke: var(--primary-color); /* Tick en color primario */
  stroke-width: 3;
  fill: none;
}

/* Tick visible al marcar */
.checkbox-tick:checked + svg {
  opacity: 1;
}

/* Efecto de foco */
.checkbox-tick:focus {
  outline: none;
  border-color: var(--highlight-color); /* resalta suavemente */
}


/* Lista estilo Yoda (para checkboxes de microorganismos) */
.yoda-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jedi-item {
  display: flex;
  align-items: center;
  margin-top: 0.5rem; /* separa las filas */
  margin-bottom: 0.5rem; /* separa las filas */
}

/* Ajuste del label para que no cree sangrías */
.yoda-label {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* separación mínima entre checkbox y texto */
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--primary-color);
  font-weight: 500;
}

/* Checkbox estilo Star Wars ajustado */
.yoda-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  background-color: #f9fdf9; /* claro, en armonía con el primary */
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.yoda-checkbox:checked {
  background-color: #fff; /* mantiene fondo claro */
  border-color: var(--primary-color);
}

.yoda-checkbox::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid var(--primary-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.yoda-checkbox:checked::after {
  opacity: 1;
}

/* Texto */
.yoda-text {
  color: var(--primary-color);
  font-weight: 500;
  font-size: 0.95rem;
}




/* === Clases comunes extraídas de los themes === */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}
.btn-primary:hover {
    background-color: var(--secondary-color);
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
a.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}
a.btn-primary:hover {
    background-color: var(--secondary-color);
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-secondary {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: transparent;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}
.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.alert {
    background-color: rgba(16, 91, 99, 0.2);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}
.checkbox-tick:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}



.add-image,
.add-doc {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  cursor: pointer;
}


/* === Botones de acción con iconos + símbolo "+" superpuesto === */


.btn-icon {
  position: relative;
  width: 2rem;            
  height: 2rem;
  /*background-color: #fff; */
  background-size: 100%;     
  background-repeat: no-repeat;
  background-position: center;
  border: none;             
  border-radius: 0rem;
  padding: 0;
}

/* Sobrescribe el tamaño del botón cuando tenga ambas clases */
.btn-icon.icono-grande {
  width: 3rem;
  height: 3rem;
}

/* Fondo del botón según tipo */
.icon-foto {
  background-image: var(--icon-foto);
}

.icon-controls {
  background-image: var(--icon-controles);
}
.icon-doc {
  background-image: var(--icon-doc);
}

.icon-notes {
  background-image: var(--icon-notes);
}

.icon-notes-all {
  background-image: var(--icon-notes-all);
}

.icon-versions {
  background-image: var(--icon-versions);
}

.icon-plus {
  position: absolute;
  bottom: -0.4rem;
  right: -0.4rem;
  background-color: var(--primary-color);
  color: white;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px white;
  transition: transform 0.2s ease;
}

.icon-trash {
  background-image: var(--icon-trash);
}

/* Solo el + crece al hacer hover */
.btn-icon:hover .icon-plus {
  transform: scale(1.2);
}



/* Grupo de campos de formulario */
.campo-group {
  margin-bottom: 1rem;
}

/* Etiqueta de campo */
.campo-label {
  display: block;
  font-weight: 500;
  font-size: 0.875rem; /* text-sm */
  margin-bottom: 0.25rem;
  color: var(--primary-color, #55a17a); /* Aplica color corporativo */
}

/* Campo de texto, select o textarea */
.campo-formulario {
  width: 100%;
  padding: 0.25rem 0.5rem;  /* py-1 px-2 */
  border: 1px solid #ccc;
  border-radius: 0.375rem;  /* rounded */
  font-size: 1rem;          /* text-base */
  line-height: 1.5;
  background-color: #fff;
  color: #111;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Interacción: enfoque y hover */
.campo-formulario:focus {
  outline: none;
  border-color: var(--primary-color, #55a17a);
  box-shadow: 0 0 0 1px var(--primary-color, #55a17a);
}

.campo-formulario:hover {
  border-color: #999;
}


.preview-flotante {
  pointer-events: none;
}



.accion-icono:hover {
  transform: scale(1.2);
}
/* 
.accion-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; 
  transition: transform 0.2s ease;
}

.accion-icono i[data-feather] {
  width: 2em;
  height: 2em;
  color: var(--primary-color);
  transition: transform 0.2s ease;
}

.accion-icono i[data-feather] svg {
  width: 2em;
  height: 2em;
  vertical-align: middle;
  stroke-width: 2;
}

.accion-icono:hover i[data-feather] {
  transform: scale(1.25);
}

.accion-icono svg {
  width: 2em;
  height: 2em;
  max-width: 2.5rem;
  max-height: 2.5rem;
  transition: transform 0.2s ease;
  color: var(--primary-color);
  vertical-align: middle;
} */

.accion-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* necesario para el contador */
  transition: transform 0.2s ease;
}

.accion-icono svg {
  width: 2em;
  height: 2em;
  max-width: 2.5rem;
  max-height: 2.5rem;
  color: var(--primary-color);
  vertical-align: middle;
  transition: transform 0.2s ease;
  stroke-width: 2; /* para homogeneizar grosor */
}

/* .accion-icono:hover svg {
  transform: scale(1.25);
} */

.accion-icono.has-contador {
  margin-right: 0.3rem;
}

/* contador */
.accion-contador {
  position: absolute;
  bottom: -0.25rem; /* ajusta según veas */
  right: -0.25rem;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  border-radius: 9999px;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


.titulo-con-boton {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.5rem; /* mb-2 equivalente */
}

.titulo-con-boton .featclass_desc {
  margin: 0;
  margin-left: 0.5rem; /* ml-2 equivalente */
}

td.acciones {
  padding: 0.2rem 0.4rem; /* menos espacio vertical y horizontal */
  white-space: nowrap;
}




.iconos-accion {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem; 
}

.iconos-accion a svg {
  width: 2em;
  height: 2em;
  max-width: 2.5rem;
  max-height: 2.5rem;
  transition: transform 0.2s ease;
  color: var(--primary-color);
  vertical-align: middle;
}

.iconos-accion a:hover svg {
  transform: scale(1.25);
}

.iconos-accion > * {
  display: flex;
  margin: 0;
  padding: 0;
}

.iconos-accion .switch {
  transition: transform 0.2s ease;
}

.iconos-accion .switch:hover {
  transform: scale(1.25);
}

/* Evita el efecto zoom en iconos marcados como "no interactivos" */
.iconos-accion a.no-scale:hover svg {
  transform: none !important;
}


.tooltip-wrap {
  display: inline-flex;
  align-items: center;

}

.tooltip-wrap i[class^="feather"],
.tooltip-wrap svg {
  width: 1em;
  height: 1em;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
  vertical-align: middle;
}

.grupo-compacto {
  display: inline-flex;
  align-items: center;
  /* gap: -0.05rem !important; o incluso 0 si quieres que estén pegados */
}


/* Footer: color de texto y enlaces en primario */
#foot.footer {
  color: var(--primary-color);
  margin-top: 10px;
}

/* Forzar el color en todos los estados del enlace dentro del footer */
#foot.footer a,
#foot.footer a:link,
#foot.footer a:visited {
  color: var(--primary-color) !important;
  text-decoration: none;
}

#foot.footer a:hover,
#foot.footer a:focus,
#foot.footer a:focus-visible {
  /* color: var(--highlight-color) !important;  */
  text-decoration: underline;
  outline: none;
}

#foot.footer a:active {
  color: var(--primary-color) !important;
}

/* Modal base */
.mb-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.mb-modal.open { display: block; }
.mb-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }

.mb-modal-dialog {
  position: relative; margin: 4vh auto 0;
  width: min(900px, 96vw); height: 88vh;
  background: var(--soft-color, #fff);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Franja superior fija para el botón (no solapa el contenido) */
.mb-modal-toolbar {
  height: 48px; /* reserva vertical */
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 .75rem;
  border-bottom: 1px solid var(--highlight-color, #ddd);
  background: #fff;
}

.mb-modal-close {
  border: 0; background: transparent; cursor: pointer; line-height: 0;
  color: var(--primary-color);
}
.mb-modal-close:hover { opacity: .85; }

.mb-modal-body { flex: 1; }
.mb-modal-iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* Evitar scroll de la página trasera cuando está abierto */

body.no-scroll { overflow: hidden; }


/* Modal base */
.mb-modal {
  position: fixed;
  inset: 0;
  display: none;               /* oculto por defecto */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .2s ease-in-out;
  z-index: 99999;              /* alto para ir por encima de headers fijos */
}

/* Al abrir */
.mb-modal.show {
  display: flex;               /* visible y centrado */
  opacity: 1;                  /* hace el fade-in */
}

/* Contenido del modal */
.mb-modal-content {
  background: #fff;
  border-radius: .75rem;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transform: translateY(-10px);
  transition: transform .2s ease-in-out;
}

.mb-modal.show .mb-modal-content {
  transform: translateY(0);
}

/* ========== Badges estándar mentaBase ========== */
/* ========== Badges específicos para historiales (no colisionan con .badge) ========== */
.badge-hist {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  background: var(--soft-color);
  color: var(--primary-color);
  vertical-align: middle;
}

.badge-hist::before {
  content: '•';
  display: inline-block;
  margin-right: 6px;
  opacity: .85;
}

/* Tipos semánticos (fondos diferenciados) */
.badge-hist--success { /* Created / Recovered */
  background: rgba(16, 185, 129, 0.15);   /* verde suave */
}

.badge-hist--danger {
  background-color: #dc2626; /* rojo intenso */
  color: #fff;               /* texto blanco visible */
}

.badge-hist--warn {    /* Modified */
  background: rgba(245, 158, 11, 0.20);   /* amarillo suave */
}

.badge-hist--info {    /* Otros */
  background: var(--soft-color);
}
/* ========== Tarjeta historial ========== */
.card-history {
  border: 1px solid var(--soft-color);
  border-radius: 12px;
  padding: 12px;
}
.card-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.card-history__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  font-size: 0.875rem; /* text-sm */
}
.card-history__user {
  font-size: 0.875rem;
  opacity: .8;
}


/* Cabeceras: ya no separamos a izquierda/derecha globalmente */
.titulo-con-boton {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Solo los iconos que deban ir a la derecha llevan esta clase */
.icono-borrados,
.push-right {
  margin-left: auto;
}

.btn-icon {
  position: relative; /* necesario para que .badge se posicione correctamente */
}


/* Botón de cierre general (modales, formularios, etc.) */
.btn-cerrar {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-cerrar:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.btn-cerrar:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--highlight-color);
}

.history__user {
  width: 14px;
  height: 14px;
  color: var(--primary-color);
  flex-shrink: 0;
}



/* Iconos para cabeceras de modales de historial */
.hist-icon {
  width: 42px;
  height: 42px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Ejemplos de tipos (usan tus variables ya definidas) */
.hist-icon.users {
  background-image: var(--icon-users);
}

.hist-icon.feature {
  background-image: var(--icon-strains);
}

.hist-icon.batches {
  background-image: var(--icon-batches);
}

.hist-icon.database {
  background-image: var(--icon-database);
}

.hist-icon.history {
  background-image: var(--icon-history);
}

.hist-icon.strains {
  background-image: var(--icon-strains);
}

.hist-icon.controls {
  background-image: var(--icon-controles);
}


/* Título estándar de los modales de histórico */
.modal-titulo {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 8px; /* separación con icono si lo hay */
}


/* Contenedor principal de los modales (aplica a todos los históricos) */
.modal-contenido,
.modal-historial,
.card-history-modal {
  background-color: #fff;
  border: 1px solid var(--primary-color);
  border-radius: 0.75rem; /* coherente con tus cards */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  overflow: hidden; /* evita que la sombra se solape con el contenido */
}

/* Cabecera del modal de histórico (ajuste visual sutil) */
.modal-contenido .border-b {
  border-color: var(--primary-color);
}

/* Iconos de estado de usuario (listados de usuarios) */
.ico-online,
.ico-offline,
.ico-never {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Colores y opacidades según estado */
.ico-online {
  color: var(--primary-color);
  opacity: 0.85;
}

.ico-offline {
  color: var(--primary-color);
  opacity: 0.6;
}

.ico-never {
  /* color: #aaa; */
  opacity: 0.5;
}

/* Efecto hover (común) */
.ico-online:hover,
.ico-offline:hover,
.ico-never:hover {
  transform: scale(1.15);
  opacity: 1;
}



/* Filtros cabecera controles */
.ctl2-filtros input[type="text"],
.ctl2-filtros select {
  border: 1px solid var(--primary-color);
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.5rem 2.5rem 0.5rem 0.5rem; /* p-2 pr-10 */
  width: 100%; /* w-full */
  transition: all 0.3s ease-in-out;
}

.ctl2-filtros input[type="text"]:focus,
.ctl2-filtros select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--soft-color);
}

/* Extiende el estilo de filtros también a los date */
.ctl2-filtros input[type="date"] {
  border: 1px solid var(--primary-color);
  border-radius: 0.375rem;
  padding: 0.5rem 2.5rem 0.5rem 0.5rem;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

/* Mantén el focus consistente */
.ctl2-filtros input[type="date"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--soft-color);
}

/* === Modal de edición de controles === */

/* Fondo del modal centrado */
/* No fuerces display por defecto */
#modal-controles-editar2 {
  align-items: center;
  justify-content: center;
}

/* Solo cuando esté visible */
#modal-controles-editar2:not(.hidden) {
  display: flex;
}
/* Caja blanca interna */
#modal-controles-editar2 .bg-white {
  max-height: 50vh;        /* altura más baja */
  overflow-y: auto;
  width: 100%;
  max-width: 42rem;        /* igual que max-w-2xl */
  padding: 1.5rem;         /* p-6 */
  border-radius: 1rem;     /* rounded-2xl */
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
              0 8px 10px -6px rgb(0 0 0 / 0.1);
  position: relative;
  background-color: #fff;
}

/* Campo de fecha + botón redondo */
#modal-controles-editar2 .fecha-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#modal-controles-editar2 #ctl2-edit-fecha {
  max-width: 180px;
  flex: none;
}

/* Botón del calendario */
#modal-controles-editar2 #ctl2-btn-cal-fecha {
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 9999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#modal-controles-editar2 #ctl2-btn-cal-fecha:hover {
  background-color: var(--secondary-color);
}