/* ==========================================================================
   MATERIAL · Piel Material Design 3 de Saborator
   --------------------------------------------------------------------------
   Se carga AL FINAL, encima del CSS propio. Aporta lo que distingue a MD3:
   botones en píldora con capa de estado y ondulación (ripple), elevaciones
   tonales, foco visible en amarillo y movimiento con curvas de énfasis.
   ========================================================================== */

:root {
  /* Elevaciones MD3 (nivel 1 a 4) con sombra cálida marrón */
  --md-elev-1: 0 1px 2px rgba(44, 27, 20, .10);
  --md-elev-2: 0 1px 3px rgba(44, 27, 20, .12);
  --md-elev-3: 0 2px 6px rgba(44, 27, 20, .12);
  --md-elev-4: 0 4px 12px rgba(44, 27, 20, .14);
  --md-emphasized: cubic-bezier(.2, 0, 0, 1);
  --shadow-sm: var(--md-elev-1);
  --shadow:    var(--md-elev-2);
  --shadow-md: var(--md-elev-3);
  --shadow-lg: var(--md-elev-4);
}

/* Foco visible: anillo amarillo en cualquier control interactivo */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(244, 201, 93, .75);
  outline-offset: 2px;
}

/* Botones: forma de píldora, tipografía de énfasis y capa de estado */
.btn-gold, .btn-ghost, .btn-entrar, .btn-kfc-cta, .btn-google-official, .btn, .dlg-btn {
  border-radius: 12px;
  letter-spacing: .01em;
  transition: background-color .2s ease, box-shadow .2s ease, filter .2s ease, transform .2s ease;
}
.btn-gold, .btn-entrar, .btn-kfc-cta, .btn-primary, .dlg-btn-pri { box-shadow: var(--md-elev-1); }
.btn-gold:hover, .btn-entrar:hover, .btn-kfc-cta:hover, .btn-primary:hover, .dlg-btn-pri:hover { box-shadow: var(--md-elev-2); }
.btn-gold:active, .btn-entrar:active, .btn-kfc-cta:active, .btn-primary:active { box-shadow: var(--md-elev-1); }
.btn-ghost:hover, .btn-google-official:hover { background-color: var(--brand-soft); }

/* Tarjetas y superficies: esquinas MD3 */
.cal-card, .modal-content { border-radius: 12px; }

/* Ondulación (ripple) que inyecta material.js */
.md-ripple-host { position: relative; overflow: hidden; }
.md-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: currentColor; opacity: .22; animation: md-ripple .6s var(--md-emphasized) forwards;
}
@keyframes md-ripple { to { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .md-ripple { display: none; }
  .modal.fade .modal-dialog { transition: none; }
}