/* OxiraUI v1 — kit propio reutilizable: toasts, confirmación, visor de imágenes y subir archivos.
   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; }

/* ---------- Subir archivos: arrastrar y soltar (input[data-subir]) ----------
   Colores de Bootstrap cuando está (modo día/noche solo); valores propios si no. */
.oxui-subir {
  --oxui-subir-acento: var(--bs-primary, #0073FF);
  --oxui-subir-acento-rgb: var(--bs-primary-rgb, 0, 115, 255);
  --oxui-subir-borde: var(--bs-border-color, #D5DDE5);
  --oxui-subir-fondo: var(--bs-tertiary-bg, #F6F8FA);
  --oxui-subir-texto: var(--bs-body-color, #1C2B36);
  --oxui-subir-suave: var(--bs-secondary-color, #6B7B87);
  --oxui-subir-error: var(--bs-danger, #C62828);
  position: relative;
}
.oxui-subir-zona {
  position: relative; display: grid; cursor: pointer; outline: none; overflow: hidden;
  border: 2px dashed var(--oxui-subir-borde); border-radius: .9rem;
  background: var(--oxui-subir-fondo); color: var(--oxui-subir-texto);
  transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s;
}
.oxui-subir-zona:hover { border-color: var(--oxui-subir-acento); }
.oxui-subir-zona:focus-visible { border-color: var(--oxui-subir-acento); box-shadow: 0 0 0 .25rem rgba(var(--oxui-subir-acento-rgb), .25); }
.oxui-subir.con-vista .oxui-subir-zona { border-style: solid; }
.oxui-arrastrando .oxui-subir-zona { border-color: var(--oxui-subir-acento); animation: oxui-llamar 1.1s ease-in-out infinite; }
.oxui-subir.arrastrando .oxui-subir-zona {
  border-style: solid; border-color: var(--oxui-subir-acento); animation: none; transform: scale(1.01);
  background-color: rgba(var(--oxui-subir-acento-rgb), .08); box-shadow: 0 0 0 .3rem rgba(var(--oxui-subir-acento-rgb), .2);
}
.oxui-subir.con-error .oxui-subir-zona { border-color: var(--oxui-subir-error); animation: oxui-temblor .35s; }

/* Vista previa y textos comparten la misma celda: el texto va encima cuando no hay imagen */
.oxui-subir-vista, .oxui-subir-textos { grid-area: 1 / 1; }
.oxui-subir-vista { position: relative; min-height: 170px; }
.oxui-subir-vista > img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; display: none; }
.oxui-subir.con-vista .oxui-subir-vista > img { display: block; }
/* Logos: damero claro fijo (no depende del tema); si el logo es claro, damero oscuro */
.oxui-subir.contener.con-vista .oxui-subir-vista {
  background: #F1F3F5 repeating-conic-gradient(#DEE2E6 0 25%, transparent 0 50%) 0 0 / 18px 18px;
}
.oxui-subir.contener.con-vista.fondo-oscuro .oxui-subir-vista {
  background: #16202B repeating-conic-gradient(#222E3B 0 25%, transparent 0 50%) 0 0 / 18px 18px;
}
.oxui-subir.contener .oxui-subir-vista > img { object-fit: contain; padding: 1rem; }
.oxui-subir-textos {
  align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .15rem; padding: 1.25rem; position: relative; pointer-events: none;
}
.oxui-subir.con-vista .oxui-subir-textos { display: none; }
.oxui-subir-lineas { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.oxui-subir-icono {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; margin-bottom: .45rem;
  background: rgba(var(--oxui-subir-acento-rgb), .12); color: var(--oxui-subir-acento);
  transition: transform .2s;
}
.oxui-subir-zona:hover .oxui-subir-icono, .oxui-subir.arrastrando .oxui-subir-icono { transform: translateY(-3px); }
.oxui-subir svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oxui-subir-titulo { font-weight: 700; font-size: .98rem; overflow-wrap: anywhere; }
.oxui-subir-linea { font-size: .86rem; color: var(--oxui-subir-suave); }
.oxui-subir-ayuda { font-size: .76rem; color: var(--oxui-subir-suave); opacity: .85; }
.oxui-subir-linea:empty, .oxui-subir-ayuda:empty { display: none; }

.oxui-subir-marca {
  position: absolute; top: .6rem; left: .6rem; display: none; padding: .15rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: rgba(8, 20, 40, .7); color: #fff;
}
.oxui-subir.con-vista .oxui-subir-marca:not(:empty) { display: block; }
.oxui-subir[data-estado="nuevo"] .oxui-subir-marca { background: var(--bs-success, #1FA35B); }
.oxui-subir-cubierta {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: .45rem;
  background: rgba(8, 20, 40, .55); color: #fff; font-weight: 700; opacity: 0; transition: opacity .2s;
}
.oxui-subir.con-vista .oxui-subir-cubierta { display: flex; }
.oxui-subir-zona:hover .oxui-subir-cubierta, .oxui-subir-zona:focus-visible .oxui-subir-cubierta,
.oxui-subir.arrastrando .oxui-subir-cubierta { opacity: 1; }
.oxui-subir-soltar, .oxui-subir.arrastrando .oxui-subir-cambiar { display: none; }
.oxui-subir.arrastrando .oxui-subir-soltar { display: inline; }

.oxui-subir-pie { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .8rem; color: var(--oxui-subir-suave); }
.oxui-subir-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oxui-subir-accion {
  display: inline-flex; align-items: center; border: 0; border-radius: .4rem; padding: .2rem .55rem;
  background: transparent; color: var(--oxui-subir-acento); font: inherit; font-weight: 700; cursor: pointer;
}
.oxui-subir-accion:hover { background: rgba(var(--oxui-subir-acento-rgb), .1); }
.oxui-subir-accion.peligro { color: var(--oxui-subir-error); }
.oxui-subir-pie[hidden], .oxui-subir-accion[hidden] { display: none; }
.oxui-subir-error { margin-top: .3rem; font-size: .82rem; font-weight: 600; color: var(--oxui-subir-error); }
.oxui-subir-error:empty { display: none; }
/* El input real queda en el formulario (viaja al enviar y admite required), invisible */
.oxui-subir-input {
  position: absolute !important; left: 50%; bottom: 0; width: 1px !important; height: 1px !important;
  padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none;
}

/* Preparando (achicando la foto en el navegador) */
.oxui-subir.procesando .oxui-subir-zona { cursor: progress; }
.oxui-subir.procesando .oxui-subir-zona > * { opacity: .35; }
.oxui-subir.procesando .oxui-subir-zona::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem;
  border-radius: 50%; border: 3px solid rgba(var(--oxui-subir-acento-rgb), .25); border-top-color: var(--oxui-subir-acento);
  animation: oxui-giro .7s linear infinite;
}

/* Compacto: una línea (miniatura o ícono + textos) para formularios chicos */
.oxui-subir.compacto { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.oxui-subir.compacto .oxui-subir-zona { display: flex; align-items: center; gap: .75rem; flex: 1 1 14rem; padding: .55rem .8rem; border-radius: .7rem; }
.oxui-subir.compacto .oxui-subir-vista { display: none; min-height: 0; }
.oxui-subir.compacto.con-vista .oxui-subir-vista { display: block; flex: 0 0 2.9rem; width: 2.9rem; height: 2.9rem; border-radius: .5rem; overflow: hidden; }
.oxui-subir.compacto .oxui-subir-marca:not(:empty), .oxui-subir.compacto .oxui-subir-cubierta { display: none; }
.oxui-subir.compacto .oxui-subir-textos, .oxui-subir.compacto.con-vista .oxui-subir-textos {
  display: flex; flex-direction: row; align-items: center; text-align: left; gap: .75rem; padding: 0; min-width: 0;
}
.oxui-subir.compacto .oxui-subir-icono { flex: 0 0 2.9rem; width: 2.9rem; height: 2.9rem; margin: 0; border-radius: .6rem; }
.oxui-subir.compacto.con-vista .oxui-subir-icono { display: none; }
.oxui-subir.compacto .oxui-subir-titulo { font-size: .9rem; }
.oxui-subir.compacto .oxui-subir-pie { margin-top: 0; }
.oxui-subir.compacto .oxui-subir-info { display: none; }
.oxui-subir.compacto .oxui-subir-error { flex-basis: 100%; margin-top: 0; }

@keyframes oxui-giro { to { transform: rotate(360deg); } }
@keyframes oxui-temblor { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes oxui-llamar { 50% { box-shadow: 0 0 0 .3rem rgba(var(--oxui-subir-acento-rgb), .18); } }
@media (prefers-reduced-motion: reduce) {
  .oxui-subir-zona, .oxui-subir-icono { transition: none; animation: none !important; }
}