/* style.css - Estilos Optimizado y Unificado para Agroflor (COMPLETO Y RESPONSIVO) */

:root {
  --color-primary: #3498db; /* Azul */
  --color-secondary: #f4f7f6; /* Gris claro */
  --color-success: #2ecc71; /* Verde */
  --color-danger: #e74c3c; /* Rojo */
  --color-text-main: #34495e; /* Gris oscuro/Azulado */
  --color-highlight: #5E7461; /* Verde militar */
  --color-white: #fff;
  --color-light-gray: #ecf0f1;
  --color-medium-gray: #bdc3c7;
  --color-dark-gray: #95a5a6;
  --color-dark-blue: #2c3e50;
  --color-orange: #f39c12;
  --color-purple: #9b59b6;
}

/* ==============================================
 1. ESTILOS BASE Y GENERALES
 ============================================== */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--color-secondary);
  margin: 0; 
  padding: 0;
  color: var(--color-text-main); /* Texto principal */
  line-height: 1.6;
}

h1 {
  color: var(--color-dark-blue);
  border-bottom: 3px solid var(--color-highlight); /* Línea de color de resalte */
  padding-bottom: 10px;
  margin-bottom: 25px;
}

h2 {
  color: var(--color-highlight);
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-top: 30px;
  margin-bottom: 15px;
}
/* Regla general para hacer que todas las imágenes sean responsivas */
img {
  /* Asegura que la imagen nunca sea más ancha que su contenedor */
  max-width: 100%; 
  /* Permite que la altura se ajuste automáticamente para mantener la proporción */
  height: auto; 
  /* Elimina el espacio extra debajo de las imágenes que a veces aparece */
  display: block; 
}

/* --------------------------------------------------------------------
 Estilos específicos
 -------------------------------------------------------------------- */
/* Ajuste del logo para que no se desborde */
.logo {
  height: 40px; 
  width: auto;
  /* max-width: 100%; ya cubierto por la regla 'img' */
}

/* Si tuvieras imágenes grandes dentro de tarjetas o detalles */
.card img {
  border-radius: 4px;
  margin-bottom: 10px;
}

/* Contenido Principal */
.main-content {
  /* Altura mínima para asegurar que el footer se quede abajo */
  min-height: calc(100vh - 120px); 
  padding: 20px;
  max-width: 1200px; /* Limita el ancho del contenido principal */
  margin: 0 auto;
}

/* Enlaces generales */
.main-content a {
  text-decoration: none;
  color: inherit; 
}

/* --- Mensajes y Alertas --- */
.message-box { 
  padding: 15px; 
  margin-bottom: 20px; 
  border-radius: 6px; 
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.msg-success { 
  background: #e6ffe6; 
  color: var(--color-success); 
  border: 1px solid var(--color-success); 
}
.msg-error, .error-message { 
  background: #ffe6e6; 
  color: var(--color-danger); 
  border: 1px solid var(--color-danger); 
}

/* ==============================================
 2. ESTILOS DE ENCABEZADO Y NAVEGACIÓN (HEADER/NAV)
 ============================================== */
header {
  background-color: var(--color-text-main);
  color: var(--color-white);
  padding: 15px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-branding h2 {
  margin: 0;
  color: var(--color-white);
  font-size: 1.2em;
  font-weight: 500;
  border-bottom: none; /* Eliminar borde del H2 en el header */
  padding-bottom: 0;
}

.logo {
  background: var(--color-white);
  border-radius: 50%;
  height: 40px; 
  width: auto;
  margin-right: 15px;
}

/* --- Menú de Hamburguesa (Mobile) --- */
.menu-toggle {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: var(--color-white);
  display: block; /* Visible en móvil */
}

/* --- Navegación Principal (Mobile First) --- */
#main-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

#main-nav.expanded {
  max-height: 500px; /* Suficiente altura para mostrar el menú */
}

#main-nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

#main-nav ul li a {
  display: block;
  padding: 10px 0;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-light-gray);
  transition: background-color 0.2s;
  text-decoration: none;
}

#main-nav ul li a:hover {
  color: var(--color-dark-blue);
  background-color: var(--color-light-gray);
}

/* ==============================================
 3. ESTILOS DE BOTONES Y ACCIONES
 ============================================== */
.btn, .btn-action, .action-bar a {
  display: inline-block;
  padding: 10px 15px;
  margin: 5px 0;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 2px solid transparent;
}

/* Botones Principales (Barra de Acciones Global) */
.action-bar {
  display: flex;
  flex-wrap: wrap; /* Para que se apilen en móvil */
  gap: 10px;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: var(--color-primary); /* Azul */
  color: var(--color-white);
  box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover {
  background-color: #2980b9;
  box-shadow: 0 6px 8px rgba(52, 152, 219, 0.4);
  transform: translateY(-1px);
}

.btn-success {
  background-color: var(--color-success); /* Verde */
  color: var(--color-white);
  box-shadow: 0 4px 6px rgba(46, 204, 113, 0.3);
}

.btn-success:hover {
  background-color: #27ae60;
  box-shadow: 0 6px 8px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--color-light-gray); /* Gris claro */
  color: var(--color-text-main);
  border: 2px solid var(--color-medium-gray);
}

.btn-secondary:hover {
  background-color: var(--color-medium-gray);
  border-color: var(--color-dark-gray);
  color: var(--color-dark-blue);
}

/* Botones de Acción Individual (Tablas, Tarjetas) */
.btn-action {
  padding: 8px 12px;
  font-size: 0.9em;
  margin: 2px;
  border-radius: 4px;
}

.btn-danger {
  background-color: var(--color-danger); /* Rojo */
  color: var(--color-white);
  border: none;
}

.btn-danger:hover {
  background-color: #c0392b;
}

/* ==============================================
 4. ESTILOS DE FORMULARIOS Y ENTRADAS
 ============================================== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr; /* Una columna por defecto (móvil) */
  gap: 20px;
  background-color: var(--color-white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-grid .full-width-field {
    /* Ocupa el espacio de varias columnas en el grid */
    grid-column: 1 / -1; 
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-dark-blue);
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid var(--color-medium-gray);
  border-radius: 4px;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box; /* Incluye padding y borde en el ancho total */
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  outline: none;
}

.full-width {
  grid-column: 1 / -1; /* Ocupa todo el ancho en el grid */
}

/* Lista de Checkboxes de Animales (Asignación) */
.animal-select-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

.animal-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.animal-checkbox-item {
  padding: 5px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.animal-checkbox-item:hover {
  background-color: #f7f7f7;
}

.animal-checkbox-item input[type="checkbox"] {
  margin-right: 10px;
  width: 16px;
  height: 16px;
}

/* ==============================================
 5. ESTILOS DE TABLAS Y GRIDS (RESPONSIVE)
 ============================================== */

/* Contenedor para scroll horizontal en móvil */
.animal-list-table-container {
  overflow-x: auto; 
  width: 100%;
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* Asegura un mínimo de ancho para evitar que se comprima demasiado */
  background-color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden; /* Para que las esquinas redondeadas funcionen */
}

.data-table th, .data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--color-light-gray);
}

.data-table th {
  background-color: var(--color-highlight); /* Color de Agroflor para encabezados */
  color: var(--color-white);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85em;
}

.data-table tbody tr:hover {
  background-color: #f9f9f9;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* ==============================================
 6. ESTILOS DE TARJETAS (DASHBOARD Y REBAÑOS)
 ============================================== */

.card, .count-item {
  background-color: var(--color-white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.animal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  border-color: #34495e;
}

.animal-card {
  background: #ffffff;
  padding: 15px; /* Reducción de padding para la ficha resumida */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra más suave */
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 5px solid var(--color-dark-gray); /* Borde predeterminado */
}

.chart-container {
  height: 300px;
}

/* --- Resumen de Contadores (index.php) --- */
.count-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-ajustable */
  gap: 20px;
}

.count-item strong {
  font-size: 1.1em;
  color: var(--color-highlight);
}

.count-value {
  font-size: 2.5em;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.total { color: var(--color-primary); }
.machos { color: var(--color-highlight); }
.hembras { color: var(--color-danger); }

/* --- Grilla de Rebaños (index.php y rebanos.php) --- */
/* Se utiliza .rebano-grid-list en rebanos.php */
.rebano-grid-list, .rebano-grid {
  display: grid;
  grid-template-columns: 1fr; /* Móvil: una sola columna */
  gap: 25px;
}

/* Estilos internos de Rebano Card */
.rebano-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.rebano-header h3 {
  margin: 0;
  color: var(--color-dark-blue);
}

.rebano-count {
  background-color: var(--color-orange); /* Naranja para el conteo */
  color: var(--color-white);
  padding: 5px 12px;
  border-radius: 15px;
  font-weight: bold;
  font-size: 0.9em;
}

.rebano-description {
  font-size: 0.95em;
  color: #7f8c8d;
  margin-bottom: 10px;
}

.rebano-aretes-list {
  font-size: 0.85em;
  color: var(--color-dark-gray);
  word-break: break-all;
  min-height: 40px; /* Consistencia en la altura de las tarjetas */
}

/* ==============================================
 7. ESTILOS DE DETALLES DE FICHA (animales.php)
 ============================================== */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr; /* Móvil: una columna */
  gap: 15px;
  background-color: var(--color-white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.detail-item {
  padding: 10px;
  border-bottom: 1px dotted var(--color-light-gray);
}

.detail-item strong {
  display: block;
  color: var(--color-highlight);
  font-size: 0.9em;
  margin-bottom: 3px;
}

.detail-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

/* --------------------------------------------------------------------
 Estilos del Avatar (Elemento: .avatar-img)
 *** CLAVE PARA EL ARREGLO DEL TAMAÑO Y FORMA ***
 -------------------------------------------------------------------- */
.avatar-img {
  /* 1. Dimensiones Fijas y Forma (Para un círculo de 100px) */
  width: 100px;     
  border-radius: 6px;   /* <--- CORREGIDO: Convierte el cuadrado en círculo */
  
  /* 2. Evita que la imagen se deforme al ajustarla al tamaño */
  object-fit: cover;  
  
  /* 3. Estética (Opcional) */
  border: 2px solid var(--color-highlight); /* Borde con color de resalte */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  
  /* 4. Comportamiento en línea y centrado */
  display: block;    
  margin: 10px auto 20px auto; /* Margen superior e inferior para separación y centrado horizontal */
}

/* --------------------------------------------------------------------
 Estilos del Contenedor del Avatar
 -------------------------------------------------------------------- */
.avatar-container {
  /* Asegura que la imagen centrada se vea bien en el layout de grid */
  grid-column: 1 / -1; /* Ocupa todo el ancho en el grid (incluso en móvil) */
  text-align: center;
}

/* ==============================================
 8. MEDIA QUERIES (RESPONSIVENESS)
 ============================================== */

/* Dispositivos de tamaño medio (Tablets) */
@media (min-width: 600px) {
  
  .form-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  }

  .detail-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  }
  
  .action-bar {
    /* Permite que los botones ocupen el espacio que necesiten */
    justify-content: flex-start;
  }
}

/* Pantallas grandes (Desktop) */
@media (min-width: 900px) {
  
  /* Encabezado y Navegación Horizontal */
  .header-branding {
    justify-content: flex-start;
  }

  .menu-toggle {
    display: none; /* Ocultar en escritorio */
  }

  #main-nav {
    max-height: none;
    overflow: visible;
    margin-left: auto; /* Empuja el menú a la derecha */
  }
  
  #main-nav ul {
    display: flex;
    gap: 15px;
    margin: 0;
  }

  #main-nav ul li a {
    padding: 8px 15px;
    border-bottom: none;
    border-radius: 4px;
  }

  #main-nav ul li a:hover {
    background-color: var(--color-light-gray);
  }
  
  /* CORRECCIÓN DE LAYOUTS A 3 COLUMNAS */
  .rebano-grid-list, .rebano-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en desktop */
  }

  .detail-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en desktop */
  }
}

/* ==============================================
 9. PIE DE PÁGINA (FOOTER)
 ============================================== */
footer {
  background-color: var(--color-text-main);
  color: var(--color-white);
  text-align: center;
  padding: 15px 0;
  font-size: 0.9em;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.rebano-card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.rebano-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* ==============================================
   10. ESTILOS DE TARJETAS (FORMULARIOS)
   ============================================== */

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen a los hijos */
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 15px 20px;
    font-size: 1.2em;
    color: var(--color-dark-blue);
}

.card-header h3 {
    margin: 0;
    padding: 0;
    border: none;
}

.card-body {
    padding: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.form-row .form-group {
    flex: 1;
    min-width: 250px; /* Evita que los campos se compriman demasiado */
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}


   /* ==============================================
   ESTILOS PARA ASIGNACIÓN DE ANIMALES (rebanos.php?view=assign_animals)
   ============================================== */

/* Contenedor principal para las dos columnas y acciones */
.assignment-container {
    display: flex;
    flex-direction: column; /* Apilado en móvil */
    gap: 20px;
    margin-top: 20px;
}

/* Estilo para las cajas de lista (disponibles y seleccionados) */
.animal-list-box {
    flex: 1; /* Ocupa el espacio disponible */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.animal-list-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    color: var(--color-dark-blue);
    font-size: 1.1em;
}

/* Estilo para los elementos select de animales */
.animal-select {
    width: 100%;
    height: 300px; /* Altura fija para hacerlas scrollable */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 0.95em;
}

.animal-select option {
    padding: 8px 10px;
}

.animal-select option:checked { /* Estilo para ítems seleccionados dentro del select */
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Contenedor de botones de acción central */
.assignment-actions {
    display: flex;
    flex-direction: row; /* Horizontal en móvil */
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.assignment-actions .btn-action {
    min-width: 40px;
    padding: 8px;
    font-size: 1.1em;
}

/* Media query para desktop: layout de 3 columnas */
@media (min-width: 768px) {
    .assignment-container {
        flex-direction: row; /* De vuelta a horizontal en desktop */
    }

    .assignment-actions {
        flex-direction: column; /* Vertical en desktop */
        flex-basis: 60px; /* Ancho fijo para la columna de botones */
        flex-grow: 0;
        flex-shrink: 0;
    }
}


/* ==============================================
   10. LOGIN PAGE
   ============================================== */ 
/* Estilos para centrar la página de login (Desktop y Mobile) */
body.login-page { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /*min-height: 100vh; */
    background-color: #ecf0f1; 
    margin: 0;
}

.login-container {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 350px; 
    max-width: 90%; 
    text-align: center;
}

.login-logo {
  width: 100px; 
  height: 100px;
  border-radius: 50%; 
  object-fit: cover;
  /* MODIFICACIÓN CLAVE: Cambiar margin-bottom por margin auto */
  margin: 0 auto 20px auto; /* 0 arriba, auto a los lados (centrado), 20px abajo */
  /* Alternativa más simple: display: block; margin: 20px auto; */
  border: 3px solid #5E7461; 
}

.login-container h2 { 
    color: #2c3e50; 
    margin-bottom: 25px; 
}

.login-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.login-container button {
    width: 100%;
    padding: 10px;
    background-color: #5E7461 ;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-container .error { 
    color: #e74c3c; 
    margin-bottom: 15px; 
}
/* ==============================================
   11. ESTILOS DEL FOOTER (Pie de Página)
   ============================================== */

footer {
    background-color: #34495e; /* Fondo oscuro */
    color: #ecf0f1; /* Texto claro */
    padding: 15px 20px;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no añada ancho extra */
    text-align: center; /* Centrado por defecto para móviles */
}

/* Contenedor Flex para alinear contenido y versión */
.footer-content {
    display: flex;
    justify-content: space-between; /* Espacia el contenido y la versión */
    align-items: center;
    max-width: 1200px; /* Alinea con el main-content */
    margin: 0 auto;
}

/* Estilo para el número de versión */
.system-version {
    font-size: 0.75em; /* Letras pequeñas */
    color: #bdc3c7; /* Color gris suave */
    opacity: 0.8; /* Ligeramente transparente */
}

/* Ajuste para pantallas pequeñas (opcional, pero recomendado) */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Apila el contenido y la versión */
    }
    .system-version {
        margin-top: 5px; /* Pequeño espacio entre el copyright y la versión */
        text-align: center;
    }
}
/* ==============================================
   ESTILOS PARA ASIGNACIÓN DE ANIMALES (rebanos.php?view=assign_animals)
   ============================================== */

/* Contenedor principal de doble columna */
.dual-list-interface {
    display: flex;
    gap: 20px; /* Espacio entre las columnas */
    margin-top: 20px;
}

/* Estilo para cada columna */
.list-column {
    flex: 1; /* Ocupa el mismo ancho */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.list-column h3 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    color: #5E7461;
    font-size: 1.1em;
}

/* Campo de búsqueda */
.list-search-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Asegura que padding no afecte el ancho total */
}

/* Lista de animales (contenedor) */
.animal-list-select {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px; /* Altura fija para desplazamiento */
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* Ítem individual de la lista */
.animal-list-select li {
    padding: 10px 15px;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    transition: background-color 0.1s;
    font-size: 0.9em;
}

/* Efecto hover */
.animal-list-select li:hover {
    background-color: #e8f5e9; /* Tono suave de verde al pasar el ratón */
}

/* Ítems seleccionados (columna derecha) */
#selectedList li {
    background-color: #f7fcf7; /* Ligeramente más claro para la columna de destino */
}

/* Si la columna derecha tiene un estilo especial, lo definimos */

/* ==============================================
   12. ESTILOS DE LA FICHA DETALLADA DEL ANIMAL (animales.php?view=details)
   ============================================== */

.details-header {
    display: flex;
    flex-wrap: wrap; /* Para que se ajuste en móvil */
    align-items: center;
    gap: 20px;
}

.details-header .avatar-container {
    flex-shrink: 0;
}

.details-header .avatar-img {
    width: 80px; /* Tamaño del avatar en la ficha */
    height: 80px;
    border-radius: 50%; /* Círculo perfecto */
    margin: 0;
}

.animal-main-info {
    flex-grow: 1;
}

.animal-main-info h2 {
    margin: 0;
    border: none;
    padding: 0;
    color: var(--color-dark-blue);
    font-size: 1.8em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.animal-arete {
    font-size: 0.7em;
    padding: 4px 10px;
    border-radius: 12px;
    background-color: var(--color-highlight);
    color: var(--color-white);
    font-weight: bold;
}

.animal-subtitle {
    font-size: 1.1em;
    color: var(--color-text-main);
}

.details-actions-header {
    margin-left: auto; /* Empuja el botón de volver a la derecha */
}


.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding-top: 20px;
}

.grid-span-all {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    font-size: 1.1em;
    color: var(--color-highlight);
}

.detail-item {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-item strong {
   color: var(--color-dark-blue);
   font-size: 0.9em;
   margin-bottom: 5px;
}

.detail-item span {
    font-size: 1.1em;
    font-weight: 500;
}

.table-responsive {
    overflow-x: auto;
}


@media (max-width: 768px) {
    .details-header {
        flex-direction: column;
        text-align: center;
    }
    .details-actions-header {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .animal-main-info h2 {
        flex-direction: column;
    }
}
*/
.selected-column {
    border-left: 3px solid #5E7461; /* Borde visualmente diferente para la columna destino */
}