/* ================================================================
   modales.css — Skin HOMOLOGADO global de modales (Zoolovyn)
   ----------------------------------------------------------------
   Un único look premium para TODOS los sistemas de modal del CRM
   (estándar, accordion, vet, grooming, chat, lealtad, tickets,
   ecommerce-azul), sin reescribir markup ni JavaScript.

   Header = degradado VERDE de marca + título blanco + cerrar blanco.

   Se carga DESPUÉS de dynamic_theme.php (ver includes/head.php) para
   ganar la cascada; por eso usa !important sobre los overrides
   por página existentes.
   ================================================================ */

:root {
  --z-modal-grad:       linear-gradient(135deg, #2C4A3E, #1A2E26);
  --z-modal-grad-hover: linear-gradient(135deg, #24402f, #14251c);
  --z-modal-accent:     #C4996C; /* dorado de marca para iconos de título */
}

/* ---------------------------------------------------------------
   1) HEADERS — fondo verde de marca, tipografía clara, sin borde
   --------------------------------------------------------------- */
.modal-header,            /* estándar · accordion · vet (#vetModalOverlay) · ecommerce-azul */
.gr-modal-head,           /* grooming_admin / grooming_carga */
.ca-modal__head,          /* chat_admin */
.lealtad-modal-header,    /* lealtad */
.tk-modal__header {       /* tickets */
  background: var(--z-modal-grad) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 16px 22px !important;
}

/* Títulos dentro del header → blanco */
.modal-header h2,
.modal-header h3,
.modal-header .modal-title,
.gr-modal-head,
#gr-modal-title,
.ca-modal__head h3,
.lealtad-modal-header h3,
.tk-modal__header,
.tk-modal__title {
  color: #fff !important;
}

/* Iconos de acento dentro de los títulos → dorado de marca */
.modal-header h2 i,
.modal-header h3 i,
.gr-modal-head i,
.ca-modal__head h3 i,
.lealtad-modal-header h3 i,
.tk-modal__title i {
  color: var(--z-modal-accent) !important;
}

/* ---------------------------------------------------------------
   2) BOTÓN CERRAR — blanco en todos los sistemas
   --------------------------------------------------------------- */
.modal-close,
.gr-modal-close,
.ca-modal__close,
.lealtad-modal-close,
.tk-modal__close {
  color: #fff !important;
  opacity: .85;
  transition: opacity .15s;
}
.modal-close:hover,
.gr-modal-close:hover,
.ca-modal__close:hover,
.lealtad-modal-close:hover,
.tk-modal__close:hover {
  color: #fff !important;
  background: transparent !important;
  opacity: 1;
}

/* ---------------------------------------------------------------
   3) ESQUINAS — que el header respete el radio del contenedor
   --------------------------------------------------------------- */
.modal-content, .modal,
.gr-modal, .ca-modal__box,
.lealtad-modal-content, .tk-modal__box {
  overflow: hidden;
}