/* pethome-styles.css
 * Panel de listado de reservas (modificado para ser un CPT 'reserva_guarda' o WC_Booking)
 * Panel de gestión de Clientes con buscador y paginación.
 * Plugin Name: PetHomeHoney Plugin
 * Plugin URI:  https://pethomehoney.com.ar
 * Description: Plugin para gestionar reservas de guarda con WooCommerce y CPT.
 * Version:     1.0 (Final y Estable)
 * Author:      Adrián Enrique Badino
 * Author URI:  https://pethomehoney.com.ar
 * Desarrolla   www.streaminginternacional.com 
 */

.section-block { background:#f9f9f9; border:2px solid #ccc; border-radius:16px; padding:20px; margin:30px 0; }
.section-block h2 { color:#5e4365; margin-bottom:20px; }
.button-primary { background:#5e4365; color:#fff; border:none; border-radius:6px; padding:10px 20px; font-weight:bold; cursor:pointer; }
.button-primary:hover { background:#7a5d8d; }

/* Guarda */
.guarda-subsections { display:flex; gap:24px; }
.sub-left { flex:0 0 30%; }
.sub-left .fechas-calendar { width:100%; }
.sub-right { flex:1; display:flex; flex-direction:column; gap:12px; }

/* Horas */
.campo-horas { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.campo-horas label { display:block; margin-bottom:4px; color:#5e4365; font-weight:bold; }
.campo-horas input { width:100%; padding:6px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; }

/* Producto / Servicio + Días */
.fila-producto-dias { display:flex; gap:12px; margin-bottom:12px; }
.campo-producto { flex:0 0 80%; display:flex; flex-direction:column; }
.campo-producto label { margin-bottom:4px; color:#5e4365; font-weight:bold; }
.campo-producto select {
  width:100%; padding:6px 8px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; box-sizing:border-box; height:40px;
}
.campo-dias { flex:0 0 20%; display:flex; flex-direction:column; }
.campo-dias label { margin-bottom:4px; color:#5e4365; font-weight:bold; }
.campo-dias input {
  width:100%; padding:6px 8px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; box-sizing:border-box; height:40px;
}

/* Precios */
.campo-precios { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.precio-item label { display:block; margin-bottom:4px; color:#5e4365; font-weight:bold; }
.precio-item input { width:100%; padding:6px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; }

/* Fechas */
.fechas-input { margin-top:16px; }
.fechas-input label { display:block; margin-bottom:4px; color:#5e4365; font-weight:bold; }
.fechas-input input { width:100%; padding:6px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; }

/* Cliente (este bloque parece ser remanente de un formulario de cliente,
   pero los campos nombre, apellido, email, telefono están ahora bajo "Datos del Guarda")
   Mantengo los estilos si tienes un cliente-grid en otro lado,
   pero los campos específicos de este formulario ya no los necesitan
   ya que están dentro de un form-table estándar de WP.
   Ajusta o elimina si es necesario.
*/
.cliente-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    "nombre apellido dni"
    "alias calle numero"
    "barrio email telefono";
  gap:16px;
}
/* ... (resto de estilos de cliente-grid si los necesitas) ... */

/* Mascota */
.mascota-section { margin-top:30px; }
.mascota-section h2 { color:#5e4365; margin-bottom:16px; }
.mascota-grid {
  display:grid;
  grid-template-columns:180px 1fr 1fr;
  grid-template-areas:
    "imagen nombre tipo"
    "imagen raza sexo"
    "imagen edadA edadM"
    "imagen tamano cuidador";
  gap:16px;
}
.item-imagen { grid-area:imagen; }
.item-nombre { grid-area:nombre; }
.item-tipo { grid-area:tipo; }
.item-raza { grid-area:raza; }
.item-sexo { grid-area:sexo; }
.item-edadA { grid-area:edadA; }
.item-edadM { grid-area:edadM; }
.item-tamano { grid-area:tamano; }
.item-cuidador { grid-area:cuidador; }
.mascota-grid label { display:block; margin-bottom:4px; color:#5e4365; font-weight:bold; }
.mascota-grid input,
.mascota-grid select {
  width:100%; padding:6px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; box-sizing:border-box;
}
.media-button.button { margin-bottom:10px; border-radius:6px; }
.preview-container {
  width:100%; min-height:200px; background:#f0f0f1; border:1px solid #ccc; border-radius:15px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.preview-container img { width:100%; height:auto; display:none; border-radius:15px; }

/* Sociabilidad / Sanidad / Seguridad */
.pethome-grid.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pethome-grid.grid-2 > div { display:flex; flex-direction:column; }
.pethome-grid.grid-2 label { display:block; margin-bottom:4px; color:#5e4365; font-weight:bold; }
.pethome-grid.grid-2 select { width:100%; padding:6px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; }

.pethome-grid.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pethome-grid.grid-3 > div { display:flex; flex-direction:column; }
.pethome-grid.grid-3 label { display:block; margin-bottom:4px; color:#5e4365; font-weight:bold; }
.pethome-grid.grid-3 select { width:100%; padding:6px; background:#f0f0f1; border:1px solid #ccc; border-radius:6px; }

/* Los estilos para el modal de teléfono han sido eliminados de aquí */

/* Widget de Últimos Cuidadores */
.pethome-latest-cuidadores-widget .pethome-widget-title {
  color: #5e4365; /* Color principal de PHH */
  font-size: 1.2em;
  margin-bottom: 15px;
  display: block;
}

.pethome-latest-cuidadores-list {
  list-style: none; /* Eliminar viñetas */
  margin: 0;
  padding: 0;
}

.pethome-cuidador-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.pethome-cuidador-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Header styling for PHH color */
body {
    background-color: #5E4365; /* PHH color */
    padding-top: 0 !important; /* Ensure no padding at the top */
}

/* Assuming there's a main header element, let's try to target it */
/* This is a generic selector, might need adjustment based on actual HTML */
.site-header, .main-header, #header, #masthead {
    background-color: #5E4365; /* PHH color */
    padding-top: 30px; /* Added padding-top */
}

/* Estilos para el Header del Plugin */
.PHH-header-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    background-color: #5E4365;
    border-bottom: 1px solid #eee;
    margin: -10px -20px 20px -20px;
}

/* Estilos para el Portal del Cliente */
#phh_panel_reservas,
#phh_panel_mascotas,
#phh_panel_comprobantes,
#phh_panel_chat,
.phh-welcome-panel,
.phh-portal-login {
    font-size: 16px;
    font-weight: 700;
}