/* =====================================================================
   SOMOS MASCOTEROS · Componentes compartidos (sitio y panel)
   Botones, campos, Select2, calendario, modales, alertas y toasts.
   Los colores reales llegan desde la base de datos (variables CSS).
   ===================================================================== */
:root {
  --c-bg: #F0F8FB; --c-primary: #1C3762; --c-secondary: #9ACCCD; --c-accent: #F5C15C;
  --rgb-bg: 240, 248, 251; --rgb-primary: 28, 55, 98; --rgb-secondary: 154, 204, 205; --rgb-accent: 245, 193, 92;
  --f-head: 'Montserrat', system-ui, sans-serif; --f-body: 'Raleway', system-ui, sans-serif;
  --c-text: var(--c-primary);
  --c-muted: rgba(var(--rgb-primary), .66);
  --c-line: rgba(var(--rgb-primary), .12);
  --c-surface: #ffffff;
  --c-danger: #E05D5D; --rgb-danger: 224, 93, 93;
  --c-success: #3BAA86; --rgb-success: 59, 170, 134;
  --c-warning: #E8A93A;
  --radius-sm: 10px; --radius: 16px; --radius-lg: 26px; --radius-xl: 36px;
  --shadow-sm: 0 4px 14px rgba(var(--rgb-primary), .08);
  --shadow: 0 18px 50px -12px rgba(var(--rgb-primary), .22);
  --shadow-lg: 0 40px 90px -20px rgba(var(--rgb-primary), .35);
  --ease: cubic-bezier(.22, .9, .32, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(var(--rgb-accent), .55); color: var(--c-primary); }

/* Barra de desplazamiento */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--rgb-primary), .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--rgb-primary), .28); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--rgb-primary), .5); }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--c-primary); --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .85em 1.5em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-head); font-weight: 700; font-size: .95rem; letter-spacing: .01em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  box-shadow: 0 10px 24px -10px rgba(var(--rgb-primary), .55);
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(var(--rgb-primary), .6); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 3px solid rgba(var(--rgb-accent), .8); outline-offset: 3px; }
.btn[disabled], .btn.is-loading { opacity: .65; pointer-events: none; }
.btn.is-loading > i:first-child { animation: spin 1s linear infinite; }
.btn--primary { --btn-bg: linear-gradient(135deg, var(--c-primary), rgba(var(--rgb-primary), .82)); }
.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-primary); box-shadow: 0 10px 26px -10px rgba(var(--rgb-accent), .9); }
.btn--secondary { --btn-bg: var(--c-secondary); --btn-fg: var(--c-primary); box-shadow: 0 10px 26px -10px rgba(var(--rgb-secondary), .9); }
.btn--danger { --btn-bg: var(--c-danger); box-shadow: 0 10px 26px -10px rgba(var(--rgb-danger), .8); }
.btn--ghost { --btn-bg: rgba(var(--rgb-primary), .06); --btn-fg: var(--c-primary); box-shadow: none; }
.btn--ghost:hover { --btn-bg: rgba(var(--rgb-primary), .12); box-shadow: none; }
.btn--ghost-light { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); backdrop-filter: blur(10px); }
.btn--ghost-light:hover { --btn-bg: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn--sm { padding: .6em 1.1em; font-size: .85rem; }
.btn--xs { padding: .45em .8em; font-size: .78rem; gap: .4em; }
.btn--block { width: 100%; }
.btn--icon { width: 40px; height: 40px; padding: 0; border-radius: 12px; flex: none; }

/* ---------- Campos de formulario ---------- */
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-family: var(--f-head); font-weight: 600; font-size: .82rem; color: var(--c-primary); letter-spacing: .02em; display: flex; align-items: center; gap: .45em; }
.field__label i { color: rgba(var(--rgb-primary), .55); }
.field__label .req { color: var(--c-danger); }
.field__help { font-size: .78rem; color: var(--c-muted); line-height: 1.4; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.input, .select2-container--sm .select2-selection--single {
  width: 100%; min-height: 50px; padding: .8rem 1rem;
  background: rgba(255,255,255,.92); border: 1.5px solid var(--c-line); border-radius: 14px;
  color: var(--c-primary); font-family: var(--f-body); font-size: .97rem; font-weight: 500;
  transition: border-color .25s, box-shadow .25s, background .25s;
  outline: none; appearance: none; -webkit-appearance: none;
}
textarea.input { min-height: 110px; resize: vertical; line-height: 1.55; }
.input::placeholder { color: rgba(var(--rgb-primary), .4); font-weight: 400; }
.input:hover { border-color: rgba(var(--rgb-primary), .28); }
.input:focus { border-color: var(--c-secondary); box-shadow: 0 0 0 4px rgba(var(--rgb-secondary), .3); background: #fff; }
.input.is-invalid, .field.is-invalid .input, .field.is-invalid .select2-selection { border-color: var(--c-danger) !important; box-shadow: 0 0 0 4px rgba(var(--rgb-danger), .14) !important; }
.input[readonly] { cursor: pointer; }
.input:disabled { opacity: .6; cursor: not-allowed; }
input[type=number].input::-webkit-inner-spin-button, input[type=number].input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].input { -moz-appearance: textfield; }
input[type=date].input, input[type=time].input { cursor: pointer; }
input[type=date].input::-webkit-calendar-picker-indicator, input[type=time].input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(var(--rgb-primary), .45); pointer-events: none; }
.input-icon > .input { padding-left: 2.7rem; }
.input-icon__action { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; color: rgba(var(--rgb-primary), .55); }
.input-icon__action:hover { background: rgba(var(--rgb-primary), .07); color: var(--c-primary); }

/* Interruptor (checkbox) */
.switch { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; user-select: none; font-weight: 600; font-size: .92rem; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { position: relative; width: 50px; height: 28px; border-radius: 999px; background: rgba(var(--rgb-primary), .16); transition: background .3s; flex: none; }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .35s var(--ease-bounce); }
.switch input:checked + .switch__track { background: linear-gradient(135deg, var(--c-secondary), var(--c-primary)); }
.switch input:checked + .switch__track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 4px rgba(var(--rgb-secondary), .4); }

/* Selector de color */
.color-field { display: flex; align-items: center; gap: .6rem; }
.color-field input[type=color] { width: 50px; height: 50px; border: 1.5px solid var(--c-line); border-radius: 14px; padding: 4px; background: #fff; cursor: pointer; flex: none; }
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type=color]::-webkit-color-swatch { border: 0; border-radius: 10px; }
.color-field input[type=color]::-moz-color-swatch { border: 0; border-radius: 10px; }

/* Contador +/- */
.stepper { display: flex; align-items: stretch; border: 1.5px solid var(--c-line); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.92); min-height: 50px; }
.stepper .input { border: 0; border-radius: 0; text-align: center; min-width: 0; width: 56px; flex: 1; box-shadow: none !important; padding: 0 .3rem; font-weight: 700; }
.stepper button { border: 0; background: transparent; width: 44px; cursor: pointer; color: var(--c-primary); transition: background .2s; flex: none; }
.stepper button:hover { background: rgba(var(--rgb-secondary), .25); }

/* Archivo */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.6rem 1rem; border: 2px dashed rgba(var(--rgb-primary), .22); border-radius: var(--radius); background: rgba(var(--rgb-secondary), .08); cursor: pointer; transition: border-color .25s, background .25s; color: var(--c-muted); }
.dropzone i { font-size: 1.8rem; color: var(--c-secondary); }
.dropzone strong { color: var(--c-primary); font-family: var(--f-head); }
.dropzone:hover, .dropzone.is-drag { border-color: var(--c-secondary); background: rgba(var(--rgb-secondary), .18); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- Select2 tema personalizado ---------- */
.select2-container { width: 100% !important; font-family: var(--f-body); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 50px; height: auto; display: flex; align-items: center; padding: .35rem 2.6rem .35rem .9rem;
  background: rgba(255,255,255,.92); border: 1.5px solid var(--c-line); border-radius: 14px; transition: border-color .25s, box-shadow .25s;
}
.select2-container--default .select2-selection--single:hover { border-color: rgba(var(--rgb-primary), .28); }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection { border-color: var(--c-secondary); box-shadow: 0 0 0 4px rgba(var(--rgb-secondary), .3); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--c-primary); font-weight: 600; line-height: 1.3; padding: 0; display: flex; align-items: center; gap: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(var(--rgb-primary), .42); font-weight: 400; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: .7rem; width: 26px; display: grid; place-items: center; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .75rem; color: rgba(var(--rgb-primary), .5); transition: transform .3s var(--ease); }
.select2-container--open .select2-selection--single .select2-selection__arrow::after { transform: rotate(180deg); }
.select2-container--default .select2-selection--single .select2-selection__clear { margin-right: .3rem; color: rgba(var(--rgb-primary), .4); font-size: 1.2rem; height: auto; }
.select2-dropdown {
  border: 1px solid rgba(var(--rgb-primary), .08) !important; border-radius: 16px !important; overflow: hidden;
  background: rgba(255,255,255,.97); backdrop-filter: blur(18px); box-shadow: var(--shadow-lg); z-index: 10050;
  animation: dropIn .22s var(--ease);
}
.select2-container--open .select2-dropdown--below { margin-top: 6px; }
.select2-container--open .select2-dropdown--above { margin-top: -6px; }
.select2-search--dropdown { padding: .7rem; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--c-line); border-radius: 10px; padding: .6rem .8rem; outline: none; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--c-secondary); }
.select2-results__options { padding: .35rem; }
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; }
.select2-results__option { padding: .65rem .85rem; border-radius: 10px; margin: 2px 0; font-weight: 500; color: var(--c-primary); display: flex; align-items: center; gap: .65rem; transition: background .15s; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: rgba(var(--rgb-secondary), .32); color: var(--c-primary); }
.select2-container--default .select2-results__option--selected { background: rgba(var(--rgb-primary), .08); font-weight: 700; }
.select2-container--default .select2-results__option--selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: .8rem; color: var(--c-secondary); }
.select2-results__message { color: var(--c-muted); }
.s2-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; background: rgba(var(--rgb-secondary), .3); color: var(--c-primary); font-size: .9rem; }
.s2-swatch { width: 18px; height: 18px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.select2-selection__rendered .s2-ico { width: 26px; height: 26px; font-size: .8rem; }

/* ---------- Flatpickr (calendario) ---------- */
.flatpickr-calendar {
  border: 0 !important; border-radius: 20px !important; padding: .6rem; width: auto !important;
  background: rgba(255,255,255,.98) !important; box-shadow: var(--shadow-lg) !important; font-family: var(--f-body) !important;
}
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none !important; }
.flatpickr-calendar.open { animation: dropIn .25s var(--ease) !important; }
.flatpickr-months { padding: .2rem 0 .4rem; }
.flatpickr-months .flatpickr-month { color: var(--c-primary) !important; fill: var(--c-primary) !important; height: 40px; }
.flatpickr-current-month { font-family: var(--f-head); font-size: 1rem !important; font-weight: 700; padding-top: 8px !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; border-radius: 8px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: .55rem !important; border-radius: 10px; padding: 8px !important; height: 34px !important; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(var(--rgb-secondary), .3); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--c-primary) !important; }
span.flatpickr-weekday { color: rgba(var(--rgb-primary), .55) !important; font-weight: 700 !important; font-size: .75rem !important; }
.flatpickr-day { border-radius: 12px !important; color: var(--c-primary) !important; font-weight: 600; border: 0 !important; margin-top: 2px; }
.flatpickr-day:hover { background: rgba(var(--rgb-secondary), .3) !important; }
.flatpickr-day.today { box-shadow: inset 0 0 0 2px var(--c-accent) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--c-primary) !important; color: #fff !important; box-shadow: none !important; }
.flatpickr-day.inRange { background: rgba(var(--rgb-secondary), .4) !important; box-shadow: -5px 0 0 rgba(var(--rgb-secondary), .4), 5px 0 0 rgba(var(--rgb-secondary), .4) !important; border-radius: 0 !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(var(--rgb-primary), .22) !important; }
.flatpickr-day.flatpickr-disabled { text-decoration: line-through; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--c-primary) !important; font-weight: 700; }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: rgba(var(--rgb-secondary), .25) !important; border-radius: 8px; }
@media (max-width: 420px) {
  .flatpickr-calendar { max-width: calc(100vw - 24px); }
  .flatpickr-calendar .dayContainer, .flatpickr-calendar .flatpickr-days { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .flatpickr-calendar .flatpickr-innerContainer, .flatpickr-calendar .flatpickr-rContainer { width: 100%; }
  .flatpickr-calendar .flatpickr-weekdaycontainer, .flatpickr-calendar .flatpickr-weekdays { width: 100%; }
  .flatpickr-day { max-width: none !important; flex-basis: 14.2857% !important; height: 38px !important; line-height: 38px !important; }
}

/* ---------- Modales ---------- */
.modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; visibility: hidden; pointer-events: none; }
.modal.is-open { visibility: visible; pointer-events: auto; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(var(--rgb-primary), .38); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); opacity: 0; transition: opacity .35s var(--ease); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__dialog {
  position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #fff, rgba(var(--rgb-bg), 1)); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.7);
  opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .35s var(--ease), transform .45s var(--ease-bounce);
}
.modal--lg .modal__dialog { width: min(920px, 100%); }
.modal--xl .modal__dialog { width: min(1180px, 100%); }
.modal--sm .modal__dialog { width: min(440px, 100%); }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal.is-closing .modal__dialog { opacity: 0; transform: translateY(16px) scale(.97); transition-duration: .25s; }
.modal.is-closing .modal__backdrop { opacity: 0; }
.modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(var(--rgb-primary), .06); color: var(--c-primary); cursor: pointer; transition: background .2s, transform .3s var(--ease); z-index: 2; }
.modal__close:hover { background: rgba(var(--rgb-danger), .12); color: var(--c-danger); transform: rotate(90deg); }
.modal__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; padding-right: 48px; }
.modal__head h3 { margin: 0; font-family: var(--f-head); font-size: clamp(1.1rem, 2.4vw, 1.35rem); color: var(--c-primary); }
.modal__sub { margin: .25rem 0 0; color: var(--c-muted); font-size: .9rem; }
.modal__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; font-size: 1.25rem; color: var(--c-primary); background: linear-gradient(135deg, rgba(var(--rgb-secondary), .55), rgba(var(--rgb-accent), .45)); }
.modal__foot { display: flex; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); }
@media (max-width: 560px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal__dialog { width: 100% !important; border-radius: 26px 26px 0 0; max-height: 92dvh; transform: translateY(100%); padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  .modal.is-open .modal__dialog { transform: none; }
  .modal.is-closing .modal__dialog { transform: translateY(100%); }
  .modal__foot .btn { flex: 1; }
}
body.modal-open { overflow: hidden; }

/* ---------- Diálogo de confirmación / alerta ---------- */
.dialog .modal__dialog { text-align: center; width: min(420px, 100%); }
.dialog__icon { width: 76px; height: 76px; margin: .4rem auto 1rem; border-radius: 24px; display: grid; place-items: center; font-size: 1.9rem; animation: popIn .5s var(--ease-bounce); }
.dialog__icon--danger { background: rgba(var(--rgb-danger), .12); color: var(--c-danger); }
.dialog__icon--warning { background: rgba(var(--rgb-accent), .25); color: #B9861F; }
.dialog__icon--success { background: rgba(var(--rgb-success), .14); color: var(--c-success); }
.dialog__icon--info { background: rgba(var(--rgb-secondary), .3); color: var(--c-primary); }
.dialog h3 { margin: 0 0 .5rem; font-family: var(--f-head); color: var(--c-primary); font-size: 1.25rem; }
.dialog p { margin: 0; color: var(--c-muted); line-height: 1.55; }
.dialog .modal__foot { justify-content: center; border: 0; padding-top: .4rem; }
.dialog .modal__foot .btn { min-width: 130px; }

/* ---------- Toasts (alertas flotantes) ---------- */
.toast-stack { position: fixed; z-index: 10000; top: 18px; right: 18px; display: flex; flex-direction: column; gap: .7rem; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 560px) { .toast-stack { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }
.toast {
  pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 2.6rem 1rem 1rem; border-radius: 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.8); color: var(--c-primary);
  animation: toastIn .5s var(--ease-bounce) both;
}
.toast.is-leaving { animation: toastOut .35s var(--ease) forwards; }
.toast__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1rem; }
.toast__title { font-family: var(--f-head); font-weight: 700; font-size: .92rem; margin: 0 0 .15rem; }
.toast__msg { font-size: .87rem; line-height: 1.45; color: var(--c-muted); margin: 0; word-break: break-word; }
.toast__close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: rgba(var(--rgb-primary), .45); cursor: pointer; }
.toast__close:hover { background: rgba(var(--rgb-primary), .07); color: var(--c-primary); }
.toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: toastBar linear forwards; }
.toast--success .toast__icon { background: rgba(var(--rgb-success), .14); color: var(--c-success); } .toast--success .toast__bar { background: var(--c-success); }
.toast--error .toast__icon { background: rgba(var(--rgb-danger), .13); color: var(--c-danger); } .toast--error .toast__bar { background: var(--c-danger); }
.toast--warning .toast__icon { background: rgba(var(--rgb-accent), .28); color: #B9861F; } .toast--warning .toast__bar { background: var(--c-accent); }
.toast--info .toast__icon { background: rgba(var(--rgb-secondary), .32); color: var(--c-primary); } .toast--info .toast__bar { background: var(--c-secondary); }

/* Aviso en línea */
.alert { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; border: 1px solid transparent; }
.alert i { margin-top: .15rem; }
.alert--error { background: rgba(var(--rgb-danger), .08); border-color: rgba(var(--rgb-danger), .25); color: #A93E3E; }
.alert--info { background: rgba(var(--rgb-secondary), .18); border-color: rgba(var(--rgb-secondary), .5); color: var(--c-primary); }
.alert--success { background: rgba(var(--rgb-success), .1); border-color: rgba(var(--rgb-success), .3); color: #23775C; }
.alert--warning { background: rgba(var(--rgb-accent), .16); border-color: rgba(var(--rgb-accent), .45); color: #8A6414; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border-radius: 999px; font-size: .78rem; font-weight: 700; font-family: var(--f-head); background: rgba(var(--rgb-secondary), .28); color: var(--c-primary); white-space: nowrap; }
.chip--accent { background: rgba(var(--rgb-accent), .3); }
.chip--muted { background: rgba(var(--rgb-primary), .07); color: var(--c-muted); }
.chip--success { background: rgba(var(--rgb-success), .14); color: #23775C; }
.chip--danger { background: rgba(var(--rgb-danger), .12); color: #A93E3E; }

/* Animaciones */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(.92); height: 0; padding-top: 0; padding-bottom: 0; margin-top: -.7rem; } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton { background: linear-gradient(90deg, rgba(var(--rgb-primary), .05) 25%, rgba(var(--rgb-primary), .1) 37%, rgba(var(--rgb-primary), .05) 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 10px; }

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