/* Botones de las ventanas emergentes (SweetAlert2), compartidos por la web pública
   (0020_hojas_estilo.html, justo después de style.css) y el panel del cliente
   (panel_usuario/base.html). Salen de style.css en SRV-65c sin cambiar ninguna regla: el panel
   no carga style.css y sus ventanas sacaban el botón gris por defecto. Guía CSS, sección 11. */

/* ============================================================================
   Botones de ventanas emergentes UNIFICADOS  (2026-07-20, decision de Jaime, #19)
   Antes convivian 4 colores de "accion principal", 3 de "cancelar" y 3 aspas.
   Ahora: accion=naranja marca, secundario/cerrar=negro, destructivo=rojo, 1 aspa.
   Bloque al FINAL a proposito (regla de la casa: gana la ultima aparicion).
   ============================================================================ */
:root {
  --btn-accion-bg:        #ef5927;
  --btn-secundario-bg:    #033b77; /* azul corporativo (Jaime 2026-07-20: el negro resultaba agresivo); 11:1 con blanco */
  --btn-secundario-hover: #022a56;
  --btn-destructivo-bg:   #d33636;
  --btn-destructivo-hover:#b02a2a;
}
.popup-btn {
  display: inline-block;
  margin: .3em .4em;
  padding: 11px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
/* 2026-09-07 (Jaime): el marco de foco era un outline azul marino de 3px que, sobre un
   boton naranja y separado 2px, parecia un recuadro pegado encima. Pasa a ser un HALO del
   color del propio boton: sigue viendose —que es de lo que se trata, quien navega con
   teclado necesita saber donde esta— pero parece parte del diseño.
   Solo aparece con :focus-visible, o sea navegando con teclado; con raton no sale.
   El outline transparente NO sobra: en modo alto contraste el navegador ignora los
   box-shadow, y sin el ese usuario se quedaria sin ninguna marca de foco. */
.popup-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(239, 89, 39, .45);
}
.popup-btn--secundario:focus-visible { box-shadow: 0 0 0 4px rgba(3, 59, 119, .40); }
.popup-btn--destructivo:focus-visible { box-shadow: 0 0 0 4px rgba(211, 54, 54, .40); }
/* 2026-09-09 (WEB-69, captura de Rafael): el borde negro que seguia viendo NO era un popup de
   SweetAlert2 sino el «Confirmar» del modal de zonas, que es un .button normal: no tenia regla
   de foco y salia el anillo por defecto del navegador (negro en Chrome). Mismo halo que los
   popups para TODOS los .button del sitio, y para la X de los popups, que se habia quedado sin
   marca de foco (el box-shadow: none de mas abajo pisa la de SweetAlert2). */
.btn_wrap .button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(239, 89, 39, .45);
}
.swal2-close.popup-x:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 3px rgba(239, 89, 39, .45);
}
.popup-btn--accion        { background-color: var(--btn-accion-bg); }
.popup-btn--accion:hover  { background-color: var(--btn-accion-bg); filter: brightness(0.9); color: #fff; }
.popup-btn--secundario    { background-color: var(--btn-secundario-bg); }
.popup-btn--secundario:hover { background-color: var(--btn-secundario-hover); color: #fff; }
.popup-btn--destructivo   { background-color: var(--btn-destructivo-bg); }
.popup-btn--destructivo:hover { background-color: var(--btn-destructivo-hover); color: #fff; }
.popup-btn--alternativo { background-color: transparent; color: var(--btn-secundario-bg); box-shadow: inset 0 0 0 2px var(--btn-secundario-bg); }
.popup-btn--alternativo:hover { background-color: var(--btn-secundario-bg); color: #fff; box-shadow: inset 0 0 0 2px var(--btn-secundario-bg); }
.swal2-close.popup-x { color: #888; box-shadow: none; }
.swal2-close.popup-x:hover, .swal2-close.popup-x:focus { color: #2b2b2b; }
/* 2026-10-02 (WEB-511, Jaime): el mensaje de error dentro de una ventana (p. ej. «No hemos
   podido enviar el SMS») salia en el gris de SweetAlert2 con su icono rojo propio. Pasa a
   los colores de los botones: rojo de la casa para el error. Con las dos clases para ganar
   a la hoja que inyecta SweetAlert2, que se carga despues. */
.swal2-validation-message.popup-validacion {
  margin: 1em 1.6em 0;
  padding: 10px 14px;
  border-radius: 4px;
  border-left: 4px solid var(--btn-destructivo-bg);
  background: #fdeeee;
  color: var(--btn-destructivo-hover);
  font-size: 15px;
  font-weight: 600;
}
.swal2-validation-message.popup-validacion::before {
  background-color: var(--btn-destructivo-bg);
}