/**
 * @encoding UTF-8 - Guardar en UTF-8 (sin BOM).
 * Mare Design System – tokens TPC para uso en PHP (sin Vue/Tailwind).
 * Clases y variables alineadas con la documentación Mare.
 * Tema: The Palace Company. Referencia: https://marestorybookdocs.palaceresorts-dev.com
 */
:root {
  /* Familia tipográfica Mare (base) */
  --font-tpc-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Colores de fondo – Mare Theme "The Palace Company" / Palace (color-bg-accent, etc.) */
  --tpc-bg-default: #f5f5f5;
  --tpc-bg-raised: #ffffff;
  --tpc-bg-accent: #183456;
  --tpc-bg-accent-hover: #102137;
  --tpc-bg-accent-active: #102137;
  /* Texto */
  --tpc-fg-default: #1a1a1a;
  --tpc-fg-weak: #5c5c5c;
  --tpc-fg-disabled: #9ca3af;
  --tpc-fg-accent: #183456;
  --tpc-fg-on-accent: #ffffff;
  /* Bordes */
  --tpc-border-default: #e0e0e0;
  --tpc-border-strong: #b0b0b0;
  --tpc-border-input: #559adb;
  /* Radio Mare Button (alineado con Mare DS) */
  --radius-tpc-button: 6px;
  --radius-tpc-input: 6px;
  --radius-tpc-container-m: 8px;
  --tpc-radius-container-m: 8px;
  --tpc-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  /* Tipografía Mare – font-size */
  --text-tpc-title-l: 1.5rem;
  --text-tpc-title-m: 1.25rem;
  --text-tpc-body-s: 0.875rem;
  --text-tpc-body-m: 1rem;
  --text-tpc-label-m: 0.875rem;
  --text-tpc-label-s: 0.8125rem;
  /* Tipografía Mare – line-height (leading) */
  --leading-tpc-title-l: 1.3;
  --leading-tpc-title-m: 1.35;
  --leading-tpc-body-s: 1.5;
  --leading-tpc-body-m: 1.5;
  --leading-tpc-label-m: 1.4;
  --leading-tpc-label-s: 1.4;
  /* Tipografía Mare – font-weight */
  --font-weight-tpc-title-l: 600;
  --font-weight-tpc-title-m: 600;
  --font-weight-tpc-body-default: 400;
  --font-weight-tpc-label-m: 500;
  --font-weight-tpc-label-s: 500;
  /* Letter-spacing */
  --tracking-tpc-title-l: -0.02em;
}

/* Fondo según estándar Mare: sólido, sin imagen rayada (anula backHome.gif del tema) */
html.mare-login-html,
html.mare-login-html body.bg-tpc-bg-default,
body.bg-tpc-bg-default {
  background-image: none !important;
  background-color: var(--tpc-bg-default) !important;
}
.mare-login-page {
  background-color: var(--tpc-bg-default) !important;
  background-image: none !important;
}

/* Fuente Mare y tamaño base mayor para mejor legibilidad (index, recuperar contraseña, solicitud nueva) */
html.mare-login-html {
  font-size: 18px; /* 18px base. Si quieres más grande: 20px o 125% */
}
html.mare-login-html body {
  font-family: var(--font-tpc-family-base);
}

/* Utilidades de fondo */
.bg-tpc-bg-default { background-color: var(--tpc-bg-default); }
.bg-tpc-bg-raised { background-color: var(--tpc-bg-raised); }
.bg-tpc-bg-accent { background-color: var(--tpc-bg-accent); }

/* Utilidades de texto */
.text-tpc-fg-default { color: var(--tpc-fg-default); }
.text-tpc-fg-weak { color: var(--tpc-fg-weak); }
.text-tpc-fg-accent { color: var(--tpc-fg-accent); }
.text-tpc-fg-on-accent { color: var(--tpc-fg-on-accent); }

/* Bordes */
.border-tpc-border-default { border-color: var(--tpc-border-default); }
.border-tpc-border-strong { border-color: var(--tpc-border-strong); }

/* Tipografía Mare (tpc-typography-*) – según tokens Mare */
.tpc-typography-title-l {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-title-l);
  font-weight: var(--font-weight-tpc-title-l);
  line-height: var(--leading-tpc-title-l);
  letter-spacing: var(--tracking-tpc-title-l);
}
.tpc-typography-title-m {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-title-m);
  font-weight: var(--font-weight-tpc-title-m);
  line-height: var(--leading-tpc-title-m);
}
.tpc-typography-body-s {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-body-s);
  font-weight: var(--font-weight-tpc-body-default);
  line-height: var(--leading-tpc-body-s);
}
.tpc-typography-body-m {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-body-m);
  font-weight: var(--font-weight-tpc-body-default);
  line-height: var(--leading-tpc-body-m);
}
.tpc-typography-label-m {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-label-m);
  font-weight: var(--font-weight-tpc-label-m);
  line-height: var(--leading-tpc-label-m);
}
.tpc-typography-label-s {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-label-s);
  font-weight: var(--font-weight-tpc-label-s);
  line-height: var(--leading-tpc-label-s);
}

/* Radio Mare (utilidades) */
.rounded-tpc-container-m { border-radius: var(--tpc-radius-container-m); }
.rounded-tpc-button { border-radius: var(--radius-tpc-button); }
.rounded-tpc-input { border-radius: var(--radius-tpc-input); }

/* Layout Mare login – 2 columnas: avisos (izq) | login (der) */
.mare-login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 1rem 2rem;
  box-sizing: border-box;
}
.mare-login-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 0.75rem 0;
  flex-shrink: 0;
}
.mare-login-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}
.mare-login-column-avisos {
  flex: 1;
  min-width: 280px;
  max-width: 420px;
}
.mare-login-column-login {
  flex: 0 0 auto;
  width: 100%;
  max-width: 28rem;
}
.mare-login-card {
  width: 100%;
  padding: 2rem;
  border-radius: var(--tpc-radius-container-m);
  background-color: var(--tpc-bg-raised);
  box-shadow: var(--tpc-shadow-card);
  box-sizing: border-box;
}
.mare-login-card .space-y-6 > * + * { margin-top: 1.5rem; }
.mare-login-card .space-y-5 > * + * { margin-top: 1.25rem; }
.mare-login-card .space-y-4 > * + * { margin-top: 1rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
/* Logo TPC dentro del card de login */
.mare-login-logo {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  margin: 0 auto 1rem;
}
@media (max-width: 720px) {
  .mare-login-columns {
    flex-direction: column;
    align-items: stretch;
  }
  .mare-login-column-avisos { max-width: none; }
  .mare-login-column-login { max-width: none; order: -1; }
}

/* Botones Mare – alineados con https://marestorybookdocs.palaceresorts-dev.com/components/button/ */

/* Primary: severity="primary", size="medium" (tema Palace: color-bg-accent #183456) */
.mare-btn-primary {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-label-m);
  font-weight: var(--font-weight-tpc-label-m);
  line-height: var(--leading-tpc-label-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  color: var(--tpc-fg-on-accent);
  background-color: var(--tpc-bg-accent);
  border: 1px solid var(--tpc-bg-accent);
  border-radius: var(--radius-tpc-button);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mare-btn-primary:hover {
  background-color: var(--tpc-bg-accent-hover);
  border-color: var(--tpc-bg-accent-hover);
}
.mare-btn-primary:active {
  background-color: var(--tpc-bg-accent-active);
  border-color: var(--tpc-bg-accent-active);
}
.mare-btn-primary:focus,
.mare-btn-primary:focus-visible {
  outline: 2px solid var(--tpc-bg-accent);
  outline-offset: 2px;
}
.mare-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary: severity="secondary" (borde, fondo transparente) */
.mare-btn-secondary {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-label-m);
  font-weight: var(--font-weight-tpc-label-m);
  line-height: var(--leading-tpc-label-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  color: var(--tpc-fg-accent);
  background-color: transparent;
  border: 1px solid var(--tpc-border-strong);
  border-radius: var(--radius-tpc-button);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mare-btn-secondary:hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: var(--tpc-fg-accent);
}
.mare-btn-secondary:focus-visible {
  outline: 2px solid var(--tpc-fg-accent);
  outline-offset: 2px;
}

/* Ghost: severity="ghost" (sin borde, fondo transparente) */
.mare-btn-ghost {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-label-m);
  font-weight: var(--font-weight-tpc-label-m);
  color: var(--tpc-fg-default);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-tpc-button);
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mare-btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
.mare-btn-ghost:focus-visible {
  outline: 2px solid var(--tpc-fg-default);
  outline-offset: 2px;
}

/* Checkbox – Mare Checkbox + CheckboxLabel (https://marestorybookdocs.palaceresorts-dev.com/components/checkbox/) */

/* Contenedor label (equivalente a CheckboxLabel): gap 16px medium, tipografía body-m */
.mare-checkbox-label,
.mare-label-with-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-body-m);
  font-weight: var(--font-weight-tpc-body-default);
  line-height: var(--leading-tpc-body-m);
  color: var(--tpc-fg-default);
  cursor: pointer;
}
.mare-checkbox-label .mare-checkbox,
.mare-label-with-checkbox .mare-checkbox {
  margin: 0;
}

/* Input checkbox: tamaño medium (1.25rem), color acento Palace al marcar */
input.mare-checkbox[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--tpc-bg-accent);
  border: 1px solid var(--tpc-border-strong);
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  background-color: var(--tpc-bg-raised);
}
input.mare-checkbox[type="checkbox"]:focus,
input.mare-checkbox[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--tpc-bg-accent) !important;
}
input.mare-checkbox[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Label con checkbox deshabilitado: texto atenuado (CheckboxLabel state) */
.mare-checkbox-label:has(input.mare-checkbox:disabled),
.mare-label-with-checkbox:has(input.mare-checkbox:disabled) {
  color: var(--tpc-fg-disabled);
  cursor: not-allowed;
}

/* Variante small: gap 12px, tipografía body-s */
.mare-checkbox-label.mare-checkbox-size-small,
.mare-label-with-checkbox.mare-checkbox-size-small {
  gap: 0.75rem;
  font-size: var(--text-tpc-body-s);
  line-height: var(--leading-tpc-body-s);
}
.mare-checkbox-label.mare-checkbox-size-small .mare-checkbox,
.mare-label-with-checkbox.mare-checkbox-size-small .mare-checkbox {
  width: 1rem;
  height: 1rem;
}

/* Inputs – Mare FormField / rounded-tpc-input */
.mare-input {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-body-s);
  line-height: var(--leading-tpc-body-s);
  width: 100%;
  padding: 0.5rem 0.75rem;
  color: var(--tpc-fg-default);
  background-color: var(--tpc-bg-raised);
  border: 1px solid var(--tpc-border-strong);
  border-radius: var(--radius-tpc-input);
  box-sizing: border-box;
}
.mare-input:focus {
  border-color: var(--tpc-border-input);
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 52, 86, 0.2);
}
.mare-input::placeholder {
  color: var(--tpc-fg-weak);
}

/* Label sobre input */
.mare-label {
  display: block;
  margin-bottom: 0.375rem;
}

/* Enlaces – Mare: tpc-typography-label-s + text-tpc-fg-accent + hover:underline */
.mare-link {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-label-s);
  font-weight: var(--font-weight-tpc-label-s);
  line-height: var(--leading-tpc-label-s);
  color: var(--tpc-fg-accent);
  text-decoration: none;
}
.mare-link:hover {
  text-decoration: underline;
}
.mare-link:focus-visible {
  outline: 2px solid var(--tpc-fg-accent);
  outline-offset: 2px;
}

/* Progress Spinner – Mare (sin Vue): circular, stroke 2, animación 2s */
.mare-progress-spinner {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 2px solid var(--tpc-border-default);
  border-top-color: var(--tpc-bg-accent);
  border-radius: 50%;
  background: transparent;
  animation: mare-spinner-rotate 2s linear infinite;
}
.mare-progress-spinner.mare-spinner-sm {
  width: 24px;
  height: 24px;
  border-width: 2px;
}
.mare-progress-spinner.mare-spinner-lg {
  width: 64px;
  height: 64px;
  border-width: 2px;
}
@keyframes mare-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* Contenedor de espera: spinner + texto (oculto por defecto, .visible lo muestra) */
.mare-wait {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.mare-wait.visible {
  display: flex;
}

/* Mensaje de error */
.mare-error {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #b91c1c;
  margin-top: 0.5rem;
}

/* Responsivo */
@media (max-width: 480px) {
  .mare-login-card { padding: 1.5rem; }
  .tpc-typography-title-l { font-size: var(--text-tpc-title-m); }
}

/* Modal (solicitud nueva: aviso privacidad) – solo Mare, compatible con Bootstrap JS */
.mare-login-html .modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.mare-login-html .modal.in,
.mare-login-html .modal.show {
  display: block;
}
.mare-login-html .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.5);
}
.mare-login-html .modal-backdrop.in,
.mare-login-html .modal-backdrop.fade.in {
  opacity: 1;
}
/* Large dialog: 1024px max width on desktop (Mare Dialog size="large") */
.mare-login-html .modal-dialog {
  position: relative;
  width: auto;
  max-width: 1024px;
  margin: 1.75rem auto;
}
.mare-login-html .modal-content {
  font-family: var(--font-tpc-family-base);
  background: var(--tpc-bg-raised);
  border: 1px solid var(--tpc-border-default);
  border-radius: var(--tpc-radius-container-m);
  box-shadow: var(--tpc-shadow-card);
}
.mare-login-html .modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--tpc-border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mare-login-html .modal-header .close {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--tpc-fg-weak);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
}
.mare-login-html .modal-header .close:hover {
  color: var(--tpc-fg-default);
  opacity: 1;
}
.mare-login-html .modal-body {
  padding: 1.25rem;
  font-size: var(--text-tpc-body-s);
  color: var(--tpc-fg-default);
}
.mare-login-html .modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--tpc-border-default);
}
.mare-login-html .modal-footer .btn {
  font-family: var(--font-tpc-family-base);
  font-size: var(--text-tpc-label-m);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-tpc-button);
  border: 1px solid var(--tpc-border-strong);
  background: var(--tpc-bg-default);
  color: var(--tpc-fg-default);
  cursor: pointer;
}
.mare-login-html .modal-footer .btn:hover {
  background: rgba(0, 0, 0, 0.06);
}