:root {
  --color-primary: #e84d67;
  --color-primary-strong: #c92f4d;
  --color-primary-soft: #fff0f3;
  --color-accent: #f6b73c;
  --color-bg: #f7f8fc;
  --color-surface: #ffffff;
  --color-text: #202433;
  --color-text-muted: #687083;
  --color-border: #e3e6ee;
  --color-success: #18875d;
  --color-danger: #c9344f;
  --button-red: #e84d67;
  --button-red-hover: #f05f78;
  --button-green: #24c185;
  --button-green-hover: #3dcc98;
  --button-grey: #8d8d92;
  --button-grey-hover: #a2a2a7;
  --shadow-sm: 0 2px 8px rgb(32 36 51 / 7%);
  --shadow-md: 0 18px 50px rgb(32 36 51 / 12%);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container-width: 1120px;
  --transition: 180ms ease;
  --app-header-background:
    radial-gradient(circle 72px at calc(100% - 26px) 74px, transparent 69px, rgb(255 255 255 / 12%) 70px, rgb(255 255 255 / 12%) 71px, transparent 72px),
    radial-gradient(circle at 92% 20%, rgb(232 77 103 / 16%), transparent 38%),
    linear-gradient(110deg, #303042 0%, #343240 58%, #49313f 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
a { color: var(--color-primary-strong); }
a:hover { color: var(--color-primary); }

/* Etiquetas de campos unificadas en toda la aplicación. */
form label:not(.switch):not(.toggle-switch):not(.file-upload-btn),
form .form-label,
.field-label {
  color: #38383e !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  line-height: 1.4;
}

.paginacion { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.paginacion .page-btn { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-primary); padding: 0; color: #fff; text-decoration: none; }
.paginacion .page-btn:hover,
.paginacion .page-btn:focus-visible { background: var(--color-primary-strong); color: #fff; }
.paginacion .page-info { color: var(--color-text); font-size: .85rem; font-weight: 700; }
.ajax-list-loading { pointer-events: none; opacity: .58; transition: opacity var(--transition); }

/*
 * Colores comunes de botones. Las páginas antiguas aún contienen colores
 * locales; estas reglas mantienen una única paleta sin alterar tamaños.
 */
:is(
  .btn-primary,
  .btn-buscar-roja,
  .btn-buscar,
  .promo-btn,
  .btn-register,
  .file-upload-btn,
  .num-btn.borrar,
  #btnCopiarTelefonoBizum,
  #btnCopiarConcepto,
  .cookies-banner button,
  .page-btn,
  .pager-btn,
  button.danger,
  .keypad-btn.danger,
  form:not([action$="logout.php"]) button[type="submit"]:not(.btn-principal):not(.bizum-sent-button):not(.btn-secondary):not(.btn-cancelar):not(.btn-restaurar)
) {
  border-color: var(--button-red) !important;
  background-color: var(--button-red) !important;
  color: #fff !important;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

:is(
  .btn-primary,
  .btn-buscar-roja,
  .btn-buscar,
  .promo-btn,
  .btn-register,
  .file-upload-btn,
  .num-btn.borrar,
  #btnCopiarTelefonoBizum,
  #btnCopiarConcepto,
  .cookies-banner button,
  .page-btn,
  .pager-btn,
  button.danger,
  .keypad-btn.danger,
  form:not([action$="logout.php"]) button[type="submit"]:not(.btn-principal):not(.bizum-sent-button):not(.btn-secondary):not(.btn-cancelar):not(.btn-restaurar)
):is(:hover, :focus-visible) {
  border-color: var(--button-red-hover) !important;
  background-color: var(--button-red-hover) !important;
  color: #fff !important;
  opacity: 1;
}

:is(
  .btn-principal,
  .bizum-sent-button,
  button[value="validar"],
  .new-article-button,
  #btnBuscarNumero,
  .copy-btn,
  .bizum-copy-btn,
  .prepared-info
) {
  border-color: var(--button-green) !important;
  background-color: var(--button-green) !important;
  color: #fff !important;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

:is(
  .btn-principal,
  .bizum-sent-button,
  button[value="validar"],
  .new-article-button,
  #btnBuscarNumero,
  .copy-btn,
  .bizum-copy-btn,
  .prepared-info
):is(:hover, :focus-visible) {
  border-color: var(--button-green-hover) !important;
  background-color: var(--button-green-hover) !important;
  color: #fff !important;
  opacity: 1;
}

:is(
  .btn-secondary,
  .btn-cancelar,
  .btn-restaurar,
  .btn-reiniciar-gris,
  #resetBuscar,
  .ajax-reset
) {
  border-color: var(--button-grey) !important;
  background-color: var(--button-grey) !important;
  color: #fff !important;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

:is(
  .btn-secondary,
  .btn-cancelar,
  .btn-restaurar,
  .btn-reiniciar-gris,
  #resetBuscar,
  .ajax-reset
):is(:hover, :focus-visible) {
  border-color: var(--button-grey-hover) !important;
  background-color: var(--button-grey-hover) !important;
  color: #fff !important;
  opacity: 1;
}

:is(button, .btn, .page-btn, .pager-btn):disabled,
:is(button, .btn, .page-btn, .pager-btn)[aria-disabled="true"] {
  border-color: #aaaeb8 !important;
  background-color: #aaaeb8 !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

:is(button, .btn, .page-btn, .pager-btn):disabled:hover,
:is(button, .btn, .page-btn, .pager-btn)[aria-disabled="true"]:hover {
  border-color: #aaaeb8 !important;
  background-color: #aaaeb8 !important;
}

:focus-visible {
  outline: 3px solid rgb(232 77 103 / 25%);
  outline-offset: 2px;
}

.app-container {
  width: min(100% - 32px, var(--container-width));
  margin-inline: auto;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgb(232 77 103 / 20%); }
.btn-primary:hover { background: var(--color-primary-strong); color: #fff; }
.btn-secondary { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.btn-secondary:hover { background: #ffe2e8; }

.field { display: grid; gap: 7px; }
.field + .field { margin-top: 18px; }
.field-label { font-size: .9rem; font-weight: 600; }
.field-control {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  padding: 11px 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgb(232 77 103 / 10%); outline: 0; }
.field-help { color: var(--color-text-muted); font-size: .78rem; line-height: 1.5; }
.field-password { position: relative; }
.field-password .field-control { padding-right: 48px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
}
.password-toggle:hover { background: var(--color-bg); color: var(--color-text); }

.toast {
  position: fixed !important;
  top: 44px !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 10000 !important;
  display: none;
  width: min(90vw, 560px);
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border-radius: var(--radius-sm);
  padding: 14px 46px 14px 18px;
  background: var(--color-danger);
  box-shadow: var(--shadow-md);
  color: #fff;
  text-align: center;
}
.toast.is-visible { display: block; }
.toast.is-success { background: var(--color-success); }
.toast-message { display: block; }
.toast-close {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  place-items: center !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgb(255 255 255 / 16%) !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 600 1.35rem/1 Arial, sans-serif !important;
  cursor: pointer !important;
}
.toast-close:hover { background: rgb(255 255 255 / 28%) !important; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: .84rem;
}
.alert-danger { background: #fff0f3; color: #a7233d; }

table thead a.thead-sort,
table thead a.sort-link {
  display: block;
  width: 100%;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
}

table thead a.thead-sort:hover,
table thead a.thead-sort:focus-visible,
table thead a.sort-link:hover,
table thead a.sort-link:focus-visible {
  color: #fff !important;
  text-decoration: none;
}

.cookies-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  max-width: 720px;
  align-items: center;
  gap: 16px;
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  font-size: .88rem;
}
.cookies-banner p { margin: 0; flex: 1; }

@media (max-width: 560px) {
  .app-container { width: min(100% - 24px, var(--container-width)); }
  body:has(> .cookies-banner) { overflow: hidden; }
  .cookies-banner {
    position: fixed;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(calc(100% - 32px), 390px);
    max-width: 390px;
    align-items: stretch;
    flex-direction: column;
    margin: 0;
    border-top: 4px solid var(--color-primary);
    padding: 20px;
    box-shadow: 0 0 0 100vmax rgb(24 24 30 / 62%), var(--shadow-md);
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .cookies-banner .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}