/* ==========================================================
   PUBLIC TOAST — Estilos de los toasts (.cg-toast*) para las
   páginas públicas (layout guest).

   Por qué existe este archivo:
   El partial `layouts/flash.blade.php` emite el markup `.cg-toast`
   (éxito / error / validación) y es incluido también por el layout
   público `layouts/guest.blade.php`. Sin embargo las clases
   `.cg-toast*` solo estaban definidas en `copilot-ui.css`, que NO se
   carga en las páginas públicas (solo en `layouts/app.blade.php` para
   usuarios logueados). Resultado: en /demo y demás páginas públicas el
   bloque de errores de validación salía SIN estilos (caja cruda).

   Este archivo replica los estilos del toast de forma AUTOCONTENIDA
   (valores literales, sin depender de las variables --cg-* de
   design-tokens.css ni del keyframe de copilot-animations.css), para
   poder cargarlo barato en el layout guest sin arrastrar todo el
   design-system interno. Coherente con los design tokens de la demo
   (acento ámbar #e8a838, navy #0c1222, rojo #ef4444).

   No toca copilot-ui.css → las páginas internas donde el toast ya se
   veía bien quedan intactas.
   ========================================================== */

.cg-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.cg-toast {
  position: relative;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  min-width: 320px;
  max-width: 440px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #0c1222;
  animation: cg-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: auto;
  overflow: hidden;
}

@keyframes cg-toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.cg-toast.cg-toast-exit {
  animation: cg-toast-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cg-toast-out {
  to { opacity: 0; transform: translateX(40px); }
}

/* Acentos por tipo */
.cg-toast--success { border-left: 4px solid #10b981; }
.cg-toast--error   { border-left: 4px solid #ef4444; }
.cg-toast--warning { border-left: 4px solid #e8a838; }
.cg-toast--info    { border-left: 4px solid #3b82f6; }

.cg-toast-icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

.cg-toast--success .cg-toast-icon { color: #10b981; }
.cg-toast--error   .cg-toast-icon { color: #ef4444; }
.cg-toast--warning .cg-toast-icon { color: #e8a838; }
.cg-toast--info    .cg-toast-icon { color: #3b82f6; }

.cg-toast-message {
  flex: 1;
  line-height: 1.45;
  min-width: 0;
}

/* Lista de errores de validación dentro del toast.
   Sustituye a los `style` inline que llevaba el partial flash. */
.cg-toast-message strong {
  font-weight: 700;
}

.cg-toast-errors {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
}

.cg-toast-errors li { margin: 2px 0; }

/* Botón de acción opcional (p.ej. "Ver") */
.cg-toast-action {
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
  background: #ef4444;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: filter 0.15s ease;
}

.cg-toast-action:hover {
  filter: brightness(0.92);
  color: #fff;
  text-decoration: none;
}

.cg-toast-action .fa { margin-left: 4px; font-size: 11px; }

.cg-toast-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.cg-toast-close:hover { opacity: 1; }

/* Barra de progreso del auto-cierre (5s, ver script en flash.blade.php) */
.cg-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 12px 12px;
  animation: cg-toast-progress 5s linear both;
}

.cg-toast--success .cg-toast-progress { background: #10b981; }
.cg-toast--error   .cg-toast-progress { background: #ef4444; }
.cg-toast--warning .cg-toast-progress { background: #e8a838; }
.cg-toast--info    .cg-toast-progress { background: #3b82f6; }

@keyframes cg-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* Móvil: el toast ocupa el ancho disponible */
@media (max-width: 480px) {
  .cg-toast-container {
    left: 12px;
    right: 12px;
    top: 12px;
  }
  .cg-toast {
    min-width: 0;
    max-width: 100%;
  }
}