/* ============================================================
   SIADME — Componentes base
   Reset mínimo + tipografía + componentes reutilizables.
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-text);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-3); }

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-primary-hover); text-decoration: underline; }

small { font-size: var(--fs-sm); color: var(--c-text-muted); }

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-6) 0;
}

/* ---- El atributo hidden oculta. Siempre. ----
   Parece obvio pero no lo es: `hidden` funciona porque el navegador trae
   `[hidden] { display: none }` en SU hoja de estilos, y CUALQUIER regla
   nuestra con `display` le gana — las del autor pesan más que las del
   navegador. O sea que `<button class="btn" hidden>` se ve igual, porque
   `.btn` declara `display: inline-flex`.

   Ya nos había pasado dos veces y se parchó a mano en app-os.css y en
   app-turneras.css; la tercera fue el botón de "Instalar en mi celular",
   que aparecía en el login de ESCRITORIO sin hacer nada al tocarlo.
   Mejor una regla acá que acordarse cada vez. */
[hidden] { display: none !important; }

/* ---- Botones ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--c-primary); color: var(--c-text-on-primary); border-color: var(--c-primary); }
.btn--primary:hover:not(:disabled) { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }

.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--c-surface-hover); }

.btn--ghost { background: transparent; color: var(--c-text); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--c-surface-hover); }

.btn--danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn--danger:hover:not(:disabled) { filter: brightness(0.92); }

.btn--success { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.btn--success:hover:not(:disabled) { filter: brightness(0.92); }

.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: var(--sp-2); aspect-ratio: 1; }

/* ---- Inputs ---- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text); }
.field__hint { font-size: var(--fs-xs); color: var(--c-text-muted); }
.field__error { font-size: var(--fs-xs); color: var(--c-danger); }
/* Asterisco rojo para campos obligatorios. Se usa como
   <span class="field__req">*</span> dentro de .field__label. */
.field__req { color: var(--c-danger); font-weight: var(--fw-bold); margin-left: 2px; cursor: help; }

.input, .select, .textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  cursor: not-allowed;
}
.textarea { min-height: 88px; resize: vertical; }

.checkbox, .radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.checkbox input, .radio input { accent-color: var(--c-primary); }

/* ---- Toggle switch ---- */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle input {
  opacity: 0; width: 0; height: 0;
}
.toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--c-border-strong);
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.toggle__slider::before {
  content: '';
  position: absolute;
  height: 14px; width: 14px;
  left: 3px; top: 3px;
  background: var(--c-surface);
  border-radius: 50%;
  transition: transform var(--t-fast);
}
/* Usamos `~` (sibling general) en lugar de `+` (adyacente) porque
   Spring Form Tag inyecta un <input type="hidden" name="_<campo>"> justo
   después del checkbox al usar th:field, rompiendo el selector adyacente. */
.toggle input:checked ~ .toggle__slider { background: var(--c-primary); }
.toggle input:checked ~ .toggle__slider::before { transform: translateX(16px); }
.toggle-field {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* ---- Form grid: 2 o 3 columnas con field full opcional ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3);
}
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.form-grid .field { margin: 0; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
}

/* ---- Inputs numéricos: sin flechas de spinner (regla global SIADME).
       El usuario escribe el valor a mano; las flechas estorban en montos. ---- */
.input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* ---- Anchos acotados para campos cortos dentro de form-grid.
       El layout sigue siendo grid (alineación con otras columnas),
       pero el input no se estira hasta ocupar toda la celda. ---- */
.field--narrow  .input:not(select) { max-width: 12ch; }  /* ej: importes, cantidades */
.field--xnarrow .input:not(select) { max-width: 8ch; }   /* ej: nº cortos, porcentajes */

/* Los SELECT quedan afuera de los anchos cortos: el valor que muestran es una
   etiqueta y no un número. Con 8ch, el nivel del CIE-10 mostraba el select
   vacío y el texto ("2 - Categoría") recién se veía al desplegarlo — o sea que
   no se podía leer lo que estaba elegido. Pasaba en siete pantallas, así que la
   excepción va acá y no campo por campo.
   El ancho de un select corto se pide con .field--select-narrow (22ch). */
.field--narrow select.input,
.field--xnarrow select.input { min-width: 22ch; }
.field--date .input { max-width: 18ch; }     /* type=date con el ícono nativo del browser */
.field--cuit .input { max-width: 16ch; }     /* CUIT XX-XXXXXXXX-X (13 chars) + padding */
.field--select-narrow .input { max-width: 22ch; } /* selects cortos (Tipo doc, Sexo, etc.) */

/* ---- Combobox (input con búsqueda incremental) ---- */
.combobox {
  position: relative;
  display: inline-block;
  min-width: 280px;
}
.combobox__input {
  position: relative;
  display: flex;
  align-items: center;
}
.combobox__search {
  width: 100%;
  padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-8);
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.combobox__search:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.combobox__icon {
  position: absolute;
  left: var(--sp-2);
  pointer-events: none;
  color: var(--c-text-muted);
}
.combobox__caret {
  position: absolute;
  right: var(--sp-2);
  pointer-events: none;
  color: var(--c-text-muted);
  transition: transform var(--t-fast);
}
.combobox[data-open="true"] .combobox__caret { transform: rotate(180deg); }

/* Variante del combobox para <select> nativo: oculta la flecha del browser
   y deja que el caret personalizado (expand_more) sea el único visible.
   Mantiene el mismo padding/border/radius que .combobox__search regular. */
.combobox__search--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: none;
}
.combobox__search--select::-ms-expand { display: none; }
/* Acotamos el ancho mínimo de la variante sector para que no se estire de más */
.combobox--sector { min-width: 220px; }

/* Botón X para limpiar el search (inyectado por JS). Se muestra solo cuando hay valor. */
.combobox__clear {
  position: absolute;
  right: calc(var(--sp-2) + 22px);  /* deja espacio para la flechita expand_more */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  color: var(--c-text-muted);
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.combobox__clear:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}
/* Solo visible cuando el search tiene contenido */
.combobox.has-value .combobox__clear { display: inline-flex; }
/* Agrandar el padding right del search para que el texto no se solape con la X */
.combobox.has-value .combobox__search { padding-right: calc(var(--sp-8) + 22px); }

.combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
}
.combobox[data-open="true"] .combobox__panel { display: block; }

.combobox__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-1);
}
.combobox__option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.combobox__option:hover,
.combobox__option--highlighted {
  background: var(--c-surface-hover);
}
.combobox__option--selected {
  background: var(--c-primary-soft);
}
.combobox__option--selected .combobox__option-name { color: var(--c-primary); }
.combobox__option-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}
.combobox__option-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
  gap: 2px;
}
.combobox__option-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combobox__option-meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combobox__option mark {
  background: var(--c-warning-soft);
  color: var(--c-text);
  padding: 0 1px;
  border-radius: 2px;
}
.combobox__empty {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ---- Card ---- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0;
  overflow: hidden;
}
.card__header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.card__body { padding: var(--sp-5); }
.card__footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-surface-alt); }

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  background: var(--c-surface-hover);
  color: var(--c-text-muted);
  line-height: 1.4;
}
.badge--primary { background: var(--c-primary-soft); color: var(--c-primary); }
.badge--success { background: var(--c-success-soft); color: var(--c-success); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge--info { background: var(--c-info-soft); color: var(--c-info); }
/* Primera vez del paciente con ese médico (agenda + ficha del turno). */
.badge--primeravez { background: var(--c-primeravez-soft); color: var(--c-primeravez); }
/* Slot libre que quedó vacío porque se canceló el turno que lo ocupaba.
   El slot SIGUE disponible: por eso acompaña al badge "Disponible" en vez de
   reemplazarlo, y va en tono neutro y no en rojo de alerta. */
.badge--cancelado-hueco {
  background: var(--c-surface-hover);
  color: var(--c-text-muted);
  border: 1px dashed var(--c-border);
}

/* Estados de turno (badges semánticos) */
.badge--st-reservado  { background: var(--c-surface-hover); color: var(--c-st-reservado); }
.badge--st-confirmado { background: var(--c-primary-soft); color: var(--c-st-confirmado); }
.badge--st-presente   { background: var(--c-warning-soft); color: var(--c-st-presente); }
.badge--st-atendido   { background: var(--c-success-soft); color: var(--c-st-atendido); }
.badge--st-cancelado  { background: var(--c-surface-hover); color: var(--c-st-cancelado); text-decoration: line-through; }
.badge--st-ausente    { background: var(--c-danger-soft); color: var(--c-st-ausente); }

/* ---- Alert ---- */
.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.alert--info    { background: var(--c-info-soft); border-color: var(--c-info); color: var(--c-info); }
.alert--success { background: var(--c-success-soft); border-color: var(--c-success); color: var(--c-success); }
.alert--warning { background: var(--c-warning-soft); border-color: var(--c-warning); color: var(--c-warning); }
.alert--danger  { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); }

/* ---- Table ---- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.table th, .table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.table th {
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  background: var(--c-surface-alt);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table tr:hover td { background: var(--c-surface-hover); }
.table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
}
.tab {
  padding: var(--sp-2) var(--sp-4);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--c-text); }
.tab--active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: var(--fw-medium); }

/* ---- Modal ---- */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: var(--z-modal-bg);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.modal {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  max-width: 560px; width: 100%;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  max-height: 90vh; overflow: auto;
}

/* ---- Avatar ---- */
.avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  object-fit: cover;
  overflow: hidden;
}
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.avatar--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }

/* ---- User menu (dropdown del avatar en el header) ---- */
.user-menu {
  position: relative;
  display: inline-block;
}
.user-menu__avatar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-full);
  color: var(--c-text-muted);
}
.user-menu__avatar:hover { background: var(--c-surface-hover); }
.user-menu__chevron {
  transition: transform 120ms ease;
}
.user-menu--open .user-menu__chevron {
  transform: rotate(180deg);
}
.user-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: var(--sp-3);
  z-index: 50;
}
.user-menu__head {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}
.user-menu__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--c-text);
}
.user-menu__line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}
.user-menu__user {
  font-family: var(--font-mono);
}
.user-menu__divider {
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-3) calc(var(--sp-3) * -1);
}
.user-menu__section-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-2);
}
.user-menu__msg {
  margin: var(--sp-2) 0;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
}
.user-menu__msg--info  { background: var(--c-surface-hover); color: var(--c-text-muted); }
.user-menu__msg--ok    { background: var(--c-success-soft); color: var(--c-success); }
.user-menu__msg--error { background: var(--c-danger-soft); color: var(--c-danger); }

/* ---- Utilities ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.grid { display: grid; }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--c-text-muted); }
.text-soft { color: var(--c-text-soft); }
.text-right { text-align: right; }
.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.w-full { width: 100%; }

/* ---- Spinner ---- */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Skip link (accesibilidad) ---- */
.skip-link {
  position: absolute; top: -100px; left: var(--sp-2);
  background: var(--c-primary); color: var(--c-text-on-primary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
}
.skip-link:focus { top: var(--sp-2); }

/* ============================================================
   Toast persistente — bottom-right, stackable, auto-dismiss
   ============================================================ */

.toast-stack {
    position: fixed;
    bottom: var(--sp-3, 12px);
    right: var(--sp-3, 12px);
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;     /* nuevos abajo, viejos arriba */
    gap: var(--sp-2, 8px);
    pointer-events: none;
    max-width: calc(100vw - 32px);
    width: 380px;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2, 8px);
    padding: 10px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-text-muted, #757575);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    font-size: var(--fs-sm, 13px);
    line-height: 1.35;
    animation: toastSlideIn 0.22s ease-out;
}

.toast--success { border-left-color: #16a34a; }
.toast--success .toast__icon { color: #16a34a; }
.toast--error   { border-left-color: #d32f2f; }
.toast--error   .toast__icon { color: #d32f2f; }
.toast--warning { border-left-color: #f59e0b; }
.toast--warning .toast__icon { color: #f59e0b; }
.toast--info    { border-left-color: #1976d2; }
.toast--info    .toast__icon { color: #1976d2; }

.toast.is-hiding { animation: toastSlideOut 0.18s ease-in forwards; }

.toast__icon {
    font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', sans-serif;
    font-size: 20px !important;
    line-height: 1;
    flex-shrink: 0;
}

.toast__body {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    color: var(--c-text);
}

.toast__close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted, #757575);
    border-radius: 3px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}
.toast__close:hover { background: var(--c-surface-3); color: var(--c-text); }

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

@media (max-width: 540px) {
    .toast-stack {
        left: var(--sp-2, 8px);
        right: var(--sp-2, 8px);
        bottom: var(--sp-2, 8px);
        width: auto;
    }
}

/* ---- Migas de pan ----------------------------------------------------
   Dónde estás en el árbol de la app. No compiten con el título de la
   pantalla: van arriba, chicas y en gris, y sólo el tramo actual queda en
   color de texto normal. */
.migas {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    font-size: 11px; margin-bottom: 4px; line-height: 1.4;
}
.migas__paso {
    color: var(--c-text-muted); text-decoration: none;
    border-radius: var(--radius-sm); padding: 1px 3px;
}
a.migas__paso:hover { color: var(--c-primary); background: var(--c-surface-hover); }
.migas__paso--aqui { color: var(--c-text); font-weight: var(--fw-semibold); }
/* El separador con color de borde quedaba invisible y las migas se leían
   como palabras sueltas. Con text-soft se ve la jerarquía sin competir. */
.migas__sep { color: var(--c-text-soft); }
/* En celular sobra el camino entero: queda el último salto, que es el útil */
@media (max-width: 768px) {
    .migas__paso:not(.migas__paso--aqui):not(:nth-last-child(3)) { display: none; }
    .migas__sep:not(:nth-last-child(2)) { display: none; }
}