/* OxiraUI v1 — kit propio reutilizable: toasts, confirmación y visor de imágenes.
   Sin dependencias (Bootstrap opcional). Colores adaptables vía variables:
   --oxui-exito, --oxui-error, --oxui-info, --oxui-aviso, --oxui-acento, --oxui-texto */

:root {
  --oxui-exito: #2E7D32;
  --oxui-error: #C62828;
  --oxui-info: #15577E;
  --oxui-aviso: #B26A00;
  --oxui-acento: #BCD200;
  --oxui-texto: #1C2B36;
  --oxui-fondo: #ffffff;
  --oxui-z: 10800;
}

/* ---------- Toasts ---------- */
.oxui-toasts {
  position: fixed; top: 1rem; right: 1rem; z-index: var(--oxui-z);
  display: flex; flex-direction: column; gap: .55rem; max-width: min(380px, calc(100vw - 2rem));
}
.oxui-toast {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--oxui-fondo); color: var(--oxui-texto);
  border: 1px solid rgba(0,0,0,.08); border-left: 5px solid var(--oxui-info);
  border-radius: .6rem; padding: .7rem .9rem .8rem;
  box-shadow: 0 10px 30px rgba(13,34,51,.18);
  font: 600 .92rem/1.35 inherit; position: relative; overflow: hidden;
  animation: oxui-entrar .22s ease-out;
}
.oxui-toast.exito { border-left-color: var(--oxui-exito); }
.oxui-toast.error { border-left-color: var(--oxui-error); }
.oxui-toast.aviso { border-left-color: var(--oxui-aviso); }
.oxui-toast .oxui-ico { font-size: 1.1rem; line-height: 1.2; }
.oxui-toast.exito .oxui-ico { color: var(--oxui-exito); }
.oxui-toast.error .oxui-ico { color: var(--oxui-error); }
.oxui-toast.aviso .oxui-ico { color: var(--oxui-aviso); }
.oxui-toast.info .oxui-ico { color: var(--oxui-info); }
.oxui-toast .oxui-cerrar {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: inherit; opacity: .45; font-size: 1rem; padding: 0 .15rem;
}
.oxui-toast .oxui-cerrar:hover { opacity: 1; }
.oxui-toast .oxui-barra {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: currentColor; opacity: .25; transform-origin: left;
  animation: oxui-barra linear forwards;
}
.oxui-toast.saliendo { animation: oxui-salir .18s ease-in forwards; }
@keyframes oxui-entrar { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes oxui-salir { to { transform: translateX(24px); opacity: 0 } }
@keyframes oxui-barra { from { transform: scaleX(1) } to { transform: scaleX(0) } }

/* ---------- Confirmación / Modal propio ---------- */
.oxui-velo {
  position: fixed; inset: 0; z-index: calc(var(--oxui-z) - 1);
  background: rgba(13,34,51,.55); display: flex; align-items: center; justify-content: center;
  padding: 1rem; animation: oxui-fundido .15s ease-out;
}
.oxui-caja {
  background: var(--oxui-fondo); color: var(--oxui-texto); border-radius: .8rem;
  max-width: 420px; width: 100%; padding: 1.4rem; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: oxui-entrar-caja .18s ease-out;
}
.oxui-caja .oxui-titulo { font-weight: 800; font-size: 1.05rem; margin: 0 0 .35rem; }
.oxui-caja .oxui-mensaje { font-size: .95rem; margin: 0 0 1.1rem; color: rgba(28,43,54,.8); }
.oxui-caja .oxui-botones { display: flex; gap: .5rem; justify-content: flex-end; }
.oxui-btn {
  border: 0; border-radius: .5rem; padding: .5rem 1.1rem; font-weight: 700; cursor: pointer;
  font-size: .9rem;
}
.oxui-btn.principal { background: var(--oxui-acento); color: #0D2233; }
.oxui-btn.peligro { background: var(--oxui-error); color: #fff; }
.oxui-btn.neutro { background: #EDF1F4; color: var(--oxui-texto); }
.oxui-btn:hover { filter: brightness(.95); }
@keyframes oxui-fundido { from { opacity: 0 } }
@keyframes oxui-entrar-caja { from { transform: translateY(10px) scale(.98); opacity: 0 } }

/* ---------- Visor de imágenes (lightbox) ---------- */
.oxui-visor {
  position: fixed; inset: 0; z-index: var(--oxui-z);
  background: rgba(8,24,38,.92); display: flex; align-items: center; justify-content: center;
  padding: 2rem; cursor: zoom-out; animation: oxui-fundido .15s ease-out;
}
.oxui-visor img {
  max-width: 100%; max-height: 100%; border-radius: .5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default;
}
.oxui-visor .oxui-cerrar-visor {
  position: absolute; top: 1rem; right: 1.2rem; border: 0; background: transparent;
  color: #fff; font-size: 2rem; cursor: pointer; opacity: .8; line-height: 1;
}
.oxui-visor .oxui-cerrar-visor:hover { opacity: 1; }
.oxui-visor .oxui-pie { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #C9D6DF; font-size: .85rem; }
[data-visor] { cursor: zoom-in; }