/*V 1.0 Shared Header Actions - boton de telefono con icono y boton de agenda. Se carga DESPUES del CSS de pagina para anadir las piezas nuevas sin editar los 22 CSS.*/

/* === 1. Telefono: el CSS de pagina no lo tenia en flex, y sin eso el icono no se alinea === */
.phone-button {display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
.phone-button i {font-size:0.9em;}

/* === 2. Agenda desktop: hueco con borde blanco, para no competir con el verde del telefono === */
.schedule-button {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:2px solid var(--primary-white); color:var(--primary-white);
  padding:8px 16px; border-radius:20px;
  font-size:14px; font-weight:600; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; cursor:pointer; transition:all 0.3s ease;
}

.schedule-button:hover {background:var(--primary-white); color:var(--primary-black);}
.schedule-button i {font-size:0.9em;}

/* === 3. Telefono movil: mismo arreglo de flex para el icono === */
.mobile-phone-button {display:inline-flex; align-items:center; gap:6px; text-decoration:none;}
.mobile-phone-button i {font-size:0.9em;}

/* === 4. Agenda movil: solo el icono en un circulo, no cabe la palabra === */
.mobile-schedule-button {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:transparent; border:2px solid var(--primary-white); color:var(--primary-white);
  font-size:14px; text-decoration:none; cursor:pointer; flex-shrink:0;
  transition:all 0.3s ease;
}

.mobile-schedule-button:hover {background:var(--primary-white); color:var(--primary-black);}

.phone-button:focus-visible,
.schedule-button:focus-visible,
.mobile-phone-button:focus-visible,
.mobile-schedule-button:focus-visible {outline:3px solid var(--primary-green); outline-offset:3px;}

/* === 5. Con el boton de agenda el header movil son 3 piezas: apretarlo desde 480px === */
@media (max-width:480px) {
  .mobile-menu-phone-container {gap:6px; padding:0 8px;}
  .mobile-phone-button {font-size:11px; padding:5px 9px;}
  .mobile-schedule-button {width:30px; height:30px; font-size:12px;}
  .mobile-menu-btn {padding:8px;}
}

@media (max-width:360px) {
  .mobile-phone-button {font-size:9px; padding:3px 6px;}
  .mobile-schedule-button {width:26px; height:26px; font-size:11px;}
}

@media (max-width:300px) {
  .mobile-menu-phone-container {padding:0 2px; gap:5px;}
  .mobile-phone-button {font-size:9px; padding:4px 6px;}
  .mobile-schedule-button {width:24px; height:24px; font-size:10px;}
}