/* ============================================================
 *  DIBAL UIX v1.0 – AlertifyJS Override
 *  File: public/css/dibal-uix/plugins/alertify.css
 * ============================================================ */

/* BACKDROP / DIMMER ---------------------------------------- */

.dibal-theme .alertify .ajs-dimmer {
    background-color: rgba(15, 23, 42, 0.80);
    opacity: 1;
}

/* DIÁLOGO BASE --------------------------------------------- */

.dibal-theme .alertify .ajs-dialog {
    position: relative;
    margin: 5% auto;
    max-width: 640px;
    min-height: 120px;
    padding: 0;
    outline: 0;
    background-color: #ffffff;
    border-radius: var(--dibal-radius-lg, 14px);
    border: 1px solid var(--dibal-gray-200, #e5e7eb);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

/* Maximizado mantiene look sin bordes ni sombra extra */
.dibal-theme .alertify.ajs-maximized .ajs-dialog {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0;
    box-shadow: none;
}

/* HEADER --------------------------------------------------- */

.dibal-theme .alertify .ajs-header {
    margin: 0;
    margin-bottom: 0;
    padding: 0.9rem 1.5rem;
    background-color: var(--dibal-primary, #2563eb);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 0;
}

/* BODY ----------------------------------------------------- */

.dibal-theme .alertify .ajs-body {
    min-height: 56px;
    color: var(--dibal-gray-800, #111827);
    font-size: 0.90rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dibal-theme .alertify .ajs-body .ajs-content {
    padding: 1rem 1.5rem 1.25rem;
}

/* Inputs dentro de diálogos (prompt, etc.) */
.dibal-theme .alertify .ajs-body .ajs-content .ajs-input {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    margin: .25rem 0;
    border-radius: var(--dibal-radius-md, 10px);
    border: 1px solid var(--dibal-gray-300, #d1d5db);
    font-size: 0.9rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    background-color: #ffffff;
    color: var(--dibal-gray-900, #0f172a);
}

.dibal-theme .alertify .ajs-body .ajs-content .ajs-input:focus {
    border-color: var(--dibal-primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* Texto simple */
.dibal-theme .alertify .ajs-body .ajs-content p {
    margin: 0;
}

/* FOOTER / BOTONES ----------------------------------------- */

.dibal-theme .alertify .ajs-footer {
    background-color: #ffffff;
    border-top: 1px solid var(--dibal-gray-200, #e5e7eb);
    border-radius: 0 0 var(--dibal-radius-lg, 14px) 14px;
    padding: .75rem 1.25rem;
    margin-left: -0;
    margin-right: -0;
    min-height: 43px;
}

/* Contenedores de botones */
.dibal-theme .alertify .ajs-footer .ajs-buttons.ajs-primary {
    text-align: right;
}

.dibal-theme .alertify .ajs-footer .ajs-buttons.ajs-auxiliary {
    float: left;
    clear: none;
    text-align: left;
}

/* Botón base */
.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button {
    min-width: 90px;
    min-height: 32px;
    margin: 0 .15rem;
    padding: .35rem 1rem;
    border-radius: var(--dibal-radius-pill, 999px);
    border: 1px solid transparent;
    background-color: #ffffff;
    color: var(--dibal-gray-700, #374151);
    font-size: .82rem;
    font-weight: 600;
    text-transform: none;
    outline: none;
    cursor: pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        color .2s ease,
        transform .1s ease;
}

/* Hover/active genérico */
.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button:hover {
    background-color: var(--dibal-gray-100, #f3f4f6);
}

.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button:active {
    transform: scale(0.98);
}

/* Focus ring accesible */
.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* Botón OK / acción principal */
.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
    background-color: var(--dibal-primary, #2563eb);
    border-color: var(--dibal-primary, #2563eb);
    color: #ffffff;
}

.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok:hover {
    background-color: var(--dibal-primary-dark, #1d4ed8);
    border-color: var(--dibal-primary-dark, #1d4ed8);
}

/* Secundarios típicos: cancel / reset */
.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel,
.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-reset {
    background-color: var(--dibal-gray-100, #f3f4f6);
    border-color: var(--dibal-gray-200, #e5e7eb);
    color: var(--dibal-gray-700, #374151);
}

.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel:hover,
.dibal-theme .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-reset:hover {
    background-color: var(--dibal-gray-200, #e5e7eb);
}

/* COMANDOS (cerrar / maximize / pin) ----------------------- */

.dibal-theme .alertify .ajs-commands {
    position: absolute;
    right: 4px;
    margin: 0.5rem 1.25rem 0 0;
    z-index: 2;
}

.dibal-theme .alertify .ajs-commands button {
    opacity: 0.75;
    border-radius: 999px;
}

.dibal-theme .alertify .ajs-commands button:hover {
    opacity: 1;
}

/* HANDLE (resize) */
.dibal-theme .alertify.ajs-resizable:not(.ajs-maximized) .ajs-handle {
    display: block;
    background-color: transparent;
}

/* ESTADOS ESPECIALES --------------------------------------- */

/* Diálogo básico sin header/footer */
.dibal-theme .alertify.ajs-basic .ajs-header {
    opacity: 0;
}

.dibal-theme .alertify.ajs-basic .ajs-footer {
    visibility: hidden;
}

/* Maximizable / resizable content spacing */
.dibal-theme .alertify.ajs-maximized .ajs-header,
.dibal-theme .alertify.ajs-resizable .ajs-header {
    padding: 16px 24px;
}

.dibal-theme .alertify.ajs-maximized .ajs-body,
.dibal-theme .alertify.ajs-resizable .ajs-body {
    min-height: 224px;
    display: inline-block;
}

.dibal-theme .alertify.ajs-maximized .ajs-body .ajs-content,
.dibal-theme .alertify.ajs-resizable .ajs-body .ajs-content {
    position: absolute;
    top: 58px;
    right: 24px;
    bottom: 68px;
    left: 24px;
    overflow: auto;
}

.dibal-theme .alertify.ajs-maximized .ajs-footer,
.dibal-theme .alertify.ajs-resizable .ajs-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

/* NOTIFICADOR (toast) -------------------------------------- */

/* NOTIFICADOR (toast) -------------------------------------- */
.dibal-theme .alertify-notifier{
  position: fixed;
  overflow: visible;
  z-index: 99999;         /* <- por si tu layout tiene z-index altos */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .85rem;
}

/* Caja base */
.dibal-theme .alertify-notifier .ajs-message{
  position: relative;
  width: 260px;
  overflow: hidden;       /* <- clave para animar alto */
  max-height: 0;
  padding: 0 1rem;
  opacity: 0;
  margin: 0;
  border-radius: var(--dibal-radius-lg, 14px);
  border: 1px solid var(--dibal-gray-700, #374151);
  background: rgba(15, 23, 42, 0.98);
  color: #f9fafb;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.35);

  transform: translateX(0);
  transition: opacity .25s linear, max-height .25s linear, transform .25s linear;
}

/* Visible */
.dibal-theme .alertify-notifier .ajs-message.ajs-visible{
  opacity: 1;
  max-height: 300px;      /* <- NO % */
  padding: .75rem 1rem;
  margin-top: 10px;
  transition: opacity .35s ease, max-height .35s ease, transform .35s ease;
}

/* Posiciones */
.dibal-theme .alertify-notifier.ajs-top{ top: 10px; }
.dibal-theme .alertify-notifier.ajs-bottom{ bottom: 10px; }
.dibal-theme .alertify-notifier.ajs-right{ right: 10px; }
.dibal-theme .alertify-notifier.ajs-left{ left: 10px; }
.dibal-theme .alertify-notifier.ajs-center{ left: 50%; transform: translateX(-50%); }

/* Animación lateral (con transform, no con right/left negativos) */
.dibal-theme .alertify-notifier.ajs-right .ajs-message{ transform: translateX(320px); }
.dibal-theme .alertify-notifier.ajs-right .ajs-message.ajs-visible{ transform: translateX(0); }

.dibal-theme .alertify-notifier.ajs-left .ajs-message{ transform: translateX(-320px); }
.dibal-theme .alertify-notifier.ajs-left .ajs-message.ajs-visible{ transform: translateX(0); }
.dibal-theme .alertify-notifier.ajs-center .ajs-message{ transform: translate(-50%, -20px); }
.dibal-theme .alertify-notifier.ajs-center .ajs-message.ajs-visible{ transform: translate(-50%, 0); }

/* Variantes por tipo (PASTEL PRO) --------------------------- */
/* Nota: NO uses el color sólido como fondo. Úsalo para borde y acento. */
/* === ALERTIFY: estilo tipo "default" + iconos por tipo ================== */

/* Base del toast (suave, legible) */
/* Base del toast */
.dibal-theme .alertify-notifier .ajs-message{
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-left-width: 6px;
  color: rgba(17, 24, 39, 0.92);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  text-shadow: none;

  /* layout */
  display: flex;
  align-items: flex-start;      /* <- clave */
  gap: 10px;

  /* padding normal (ya no necesitamos padding-left gigante) */
  padding: .75rem 1rem;
}

/* Icono como "columna" */
.dibal-theme .alertify-notifier .ajs-message::before{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;              /* ajusta finito para 1ra línea */
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: rgba(107, 114, 128, 0.9);
  content: "";                  /* se setea por tipo abajo */
}

/* Asegura que el texto ocupe su columna y no se meta al icono */
.dibal-theme .alertify-notifier .ajs-message{
  white-space: normal;
}
.dibal-theme .alertify-notifier .ajs-message *{
  white-space: normal;
}

/* SUCCESS */
.dibal-theme .alertify-notifier .ajs-message.ajs-success{ border-left-color: rgba(34,197,94,.9); }
.dibal-theme .alertify-notifier .ajs-message.ajs-success::before{ content:"✓"; background: rgba(34,197,94,.95); }

/* ERROR */
.dibal-theme .alertify-notifier .ajs-message.ajs-error{ border-left-color: rgba(239,68,68,.9); }
.dibal-theme .alertify-notifier .ajs-message.ajs-error::before{ content:"✕"; background: rgba(239,68,68,.95); }

/* WARNING */
.dibal-theme .alertify-notifier .ajs-message.ajs-warning{ border-left-color: rgba(245,158,11,.95); }
.dibal-theme .alertify-notifier .ajs-message.ajs-warning::before{ content:"!"; background: rgba(245,158,11,.98); }

/* INFO */
.dibal-theme .alertify-notifier .ajs-message.ajs-info{ border-left-color: rgba(59,130,246,.9); }
.dibal-theme .alertify-notifier .ajs-message.ajs-info::before{ content:"i"; background: rgba(59,130,246,.95); }


/* REDUCE MOTION (respetar preferencia usuario) ------------- */

@media (prefers-reduced-motion: reduce) {
    .dibal-theme .alertify .ajs-dialog,
    .dibal-theme .alertify .ajs-dimmer,
    .dibal-theme .alertify .ajs-modal {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }

    .dibal-theme .alertify-notifier .ajs-message {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
}