/* Espaciador reutilizable */
.hr-blank { border:0; height:20px; margin:0; background:transparent; }

/* Contenedor general (usa variables por severidad) */
.notice {
  --notice-color: #2a55a3;  /* se sobreescribe por variante */
  --notice-bg:    #eff5ff;  /* se sobreescribe por variante */
  --corner: 8px;

  display: grid;
  grid-template-columns: 48px 1fr auto; /* icono | mensaje | botón */
  align-items: center;
  gap: 16px;

  background: var(--notice-bg);
  border: 1px solid var(--notice-color);
  box-shadow: inset 0 2px 0 0 var(--notice-color); /* línea superior */
  border-radius: var(--corner);
  padding: 12px 14px;

  font-family: 'Montserrat', montserrat, sans-serif;
  color: #222;
}

/* Icono (bloque sólido al color) */
.notice__iconbox {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--notice-color);
  color: var(--notice-color);       /* currentColor para el ícono */
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Cuerpo */
.notice__body { min-width: 0; }
.notice__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--notice-color);
  margin: 0 0 2px 0;
}
.notice__message { margin: 0; line-height: 1.35; color: #453f3e; }

/* Acciones */
.notice__actions { display: flex; align-items: center; gap: 8px; }
.notice__cta-btn {
  background: var(--notice-color);
  color: #fff;
  padding: 8px 14px;
  border-radius: 9999px; /* pill */
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: background .2s ease;
}
.notice__cta-btn:hover,
.notice__cta-btn:focus-visible { background: color-mix(in srgb, var(--notice-color) 80%, #0000); outline:none; }

/* Cerrar (si lo habilitas) */
.notice__close { display: none; }

/* ===== Variantes: definen color y bg ===== */

/* INFO (azul) */
.notice--info {
  --notice-color: #2a55a3;
  --notice-bg:    #eff5ff;
}

/* SUCCESS (verde) */
.notice--success {
  --notice-color: #1e7a3b;
  --notice-bg:    #e9f8ef;
}

/* WARNING (amarillo/naranja) */
.notice--warning {
  --notice-color: #a14a00;
  --notice-bg:    #fff2e6;
}

/* ERROR (rojo) */
.notice--error {
  --notice-color: #9f1d2b;
  --notice-bg:    #ffe9ea;
}

/* Responsive */
@media (max-width: 720px) {
  .notice { grid-template-columns: 40px 1fr; gap: 12px; }
  .notice__actions { grid-column: 2 / -1; justify-self: start; margin-top: 6px; }
}