/**
 * PEBBLE VIDA MODAL SYSTEM V1 — sistema visual integral opt-in.
 * Activar: class="modal … modal-pebble-vida modal-compact-actions"
 * Referencias: #m-evento, #m-ins, #m-vac (patrones existentes en styles.css).
 * Sin impacto en modales legacy sin la clase.
 */

.modal.modal-pebble-vida {
  --pev-radius-block: 12px;
  --pev-radius-btn: 12px;
  --pev-radius-card: 12px;
  --pev-radius-input: 10px;
  --pev-ink: #0f172a;
  --pev-muted: #64748b;
  --pev-border: #cbd5e1;
  --pev-border-strong: #94a3b8;
  --pev-panel-border: #d1d9e2;
}

/* ── Marco único (.mbox) ── */
.modal.modal-pebble-vida > .mbox.bitacora-mbox {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  gap: 0;
  background: #fff;
  border: 1px solid var(--pev-panel-border);
  border-radius: var(--pev-radius-block);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 12px 28px rgba(15, 23, 42, 0.14);
  max-width: min(560px, 96vw);
}

.modal.modal-pebble-vida > .mbox.bitacora-mbox::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Header — esquinas superiores 12px (mismo radio que .mbox) ── */
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .manto-header-serio-v1 {
  box-sizing: border-box;
  position: relative;
  min-height: var(--manto-header-serio-v1-h, 48px);
  height: var(--manto-header-serio-v1-h, 48px);
  max-height: var(--manto-header-serio-v1-h, 48px);
  align-items: center;
  background: var(--manto-newmodal-h-bg-light, var(--modal-header-bg));
  border: none !important;
  border-bottom: 1px solid var(--manto-newmodal-h-border-color-light, var(--pev-border-strong)) !important;
  border-radius: var(--pev-radius-block) var(--pev-radius-block) 0 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.modal.modal-pebble-vida .serio-v1-title {
  color: var(--pev-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.modal.modal-pebble-vida .serio-v1-btn-back.serio-v1-btn-back--ico-only {
  border-radius: var(--pev-radius-btn);
}

/* ── Body ── */
.modal.modal-pebble-vida .modal-serio-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--gris-50, #f8fafc) 0%, var(--gris-100, #f1f5f9) 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.modal.modal-pebble-vida .modal-serio-body > p:first-child,
.modal.modal-pebble-vida .mlab-lead,
.modal.modal-pebble-vida .org-lead,
.modal.modal-pebble-vida .dev-lead,
.modal.modal-pebble-vida .obs-lead,
.modal.modal-pebble-vida .erp-lead,
.modal.modal-pebble-vida .mp-lead {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--pev-muted);
  line-height: 1.45;
}

/* ── Cards internas ── */
.modal.modal-pebble-vida .ani-serio-v2-card,
.modal.modal-pebble-vida .bitacora-card.ani-serio-v2-card {
  margin: 0;
  position: relative;
  background: linear-gradient(168deg, #fff 0%, #f1f5f9 38%, #e2e8f0 100%);
  border: 1px solid var(--pev-border);
  border-radius: var(--pev-radius-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 2px rgba(15, 23, 42, 0.05);
  padding: 12px 14px;
  box-sizing: border-box;
}

.modal.modal-pebble-vida .ani-serio-v2-card::before,
.modal.modal-pebble-vida .bitacora-card.ani-serio-v2-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.modal.modal-pebble-vida .ani-serio-v2-subl {
  color: var(--pev-ink);
}

/* ── Inputs premium ── */
.modal.modal-pebble-vida .modal-serio-body .fi,
.modal.modal-pebble-vida .modal-serio-body select.fi,
.modal.modal-pebble-vida .modal-serio-body textarea.fi {
  border-radius: var(--pev-radius-input);
  border: 1px solid var(--gris-300, #cbd5e1);
  background: linear-gradient(180deg, #fff 0%, var(--gris-50, #f8fafc) 100%);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  color: var(--texto-base, #334155);
}

.modal.modal-pebble-vida .modal-serio-body .fi:focus {
  outline: none;
  border-color: var(--gris-400, #94a3b8);
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 2px rgba(148, 163, 184, 0.25);
}

.modal.modal-pebble-vida .modal-serio-body .flbl {
  color: var(--pev-muted);
  font-weight: 700;
}

/* ── Tabs ── */
.modal.modal-pebble-vida .modal-serio-body .mlab-tabs,
.modal.modal-pebble-vida .modal-serio-body .dev-tabs,
.modal.modal-pebble-vida .modal-serio-body .org-tabs,
.modal.modal-pebble-vida .modal-serio-body .obs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.modal.modal-pebble-vida .modal-serio-body .mlab-tab,
.modal.modal-pebble-vida .modal-serio-body .dev-tab,
.modal.modal-pebble-vida .modal-serio-body .org-tab,
.modal.modal-pebble-vida .modal-serio-body .obs-filter-btn,
.modal.modal-pebble-vida .modal-serio-body .mp-tab {
  padding: 0 12px;
  border-radius: var(--pev-radius-btn);
  border: var(--borde-fino, 1px solid #cbd5e1);
  background: var(--gris-50, #f8fafc);
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-base, #334155);
  cursor: pointer;
  box-sizing: border-box;
}

.modal.modal-pebble-vida .modal-serio-body .mlab-tab.active,
.modal.modal-pebble-vida .modal-serio-body .dev-tab.active,
.modal.modal-pebble-vida .modal-serio-body .org-tab.active,
.modal.modal-pebble-vida .modal-serio-body .obs-filter-btn.active,
.modal.modal-pebble-vida .modal-serio-body .mp-tab.active {
  background: var(--gris-100, #f1f5f9);
  border-color: var(--pev-border-strong);
  color: var(--pev-ink);
}

/* ── Botones (radius + jerarquía; alturas en modal-compact-actions) ── */
.modal.modal-pebble-vida .modal-serio-body .btn,
.modal.modal-pebble-vida .modal-serio-body button.btn,
.modal.modal-pebble-vida .modal-serio-body label.btn,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell .btn,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell button {
  border-radius: var(--pev-radius-btn);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  gap: 8px;
  box-sizing: border-box;
}

.modal.modal-pebble-vida .modal-serio-body .bitacora-btn--pri,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell .bitacora-btn--pri {
  background: var(--manto-btn-b2-bg);
  border: 1px solid var(--manto-btn-b2-border);
  color: var(--manto-btn-b2-color);
  box-shadow: var(--manto-btn-b2-shadow);
}

.modal.modal-pebble-vida .modal-serio-body .btn-gris-ok,
.modal.modal-pebble-vida .modal-serio-body .bitacora-btn.btn-gris-ok,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell .btn-gris-ok,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell .bit-bitacora-foot-cancel,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell .bit-bitacora-foot-save {
  background: var(--manto-btn-gris-ok-bg);
  border: 1px solid var(--manto-btn-gris-ok-border);
  color: var(--manto-btn-gris-ok-color);
  box-shadow: var(--manto-btn-gris-ok-shadow);
}

/* ── Footer — esquinas inferiores 12px (mismo radio que .mbox) ── */
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .ani-serio-v2-footer-shell {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 12px;
  background: var(--manto-newmodal-foot-bg-light, var(--modal-footer-bg));
  border: none;
  border-top: 1px solid var(--manto-newmodal-h-border-color-light, var(--pev-border-strong));
  border-radius: 0 0 var(--pev-radius-block) var(--pev-radius-block) !important;
  box-shadow: none;
  box-sizing: border-box;
}

.modal.modal-pebble-vida .ani-serio-v2-footer-shell__row.bit-bitacora-footer-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.modal.modal-pebble-vida .ani-serio-v2-footer-shell .bit-bitacora-foot-cancel,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell .bit-bitacora-foot-save {
  flex: 1 1 0;
  padding: 0 14px;
}

/* Pie — todos los botones con radio oficial 12px (gana a reglas globales sin !important) */
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .ani-serio-v2-footer-shell .btn,
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .ani-serio-v2-footer-shell button,
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .ani-serio-v2-footer-shell__row.bit-bitacora-footer-row > .btn,
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .ani-serio-v2-footer-shell .bit-bitacora-foot-cancel,
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .ani-serio-v2-footer-shell .bit-bitacora-foot-save,
.modal.modal-pebble-vida.bitacora-serio-v2.modal-nuevo .ani-serio-v2-footer-shell .bitacora-btn--pri {
  border-radius: var(--pev-radius-btn, 12px) !important;
}

.modal.modal-pebble-vida .ani-serio-v2-footer-shell .bit-bitacora-foot-cancel-ico,
.modal.modal-pebble-vida .ani-serio-v2-footer-shell .bit-bitacora-foot-save-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 !important;
}

/* Refuerzo: pie Cerrar/Cancelar (gana index-inline regresarModalDesde @ 5px) */
:is(
  #m-tools-milk-lab,
  #m-tools-developer-platform,
  #m-tools-integration-observability,
  #m-tools-integration-marketplace,
  #m-tools-erp-accounting,
  #m-tools-organizations,
  #m-tools-report-studio
).modal-pebble-vida.bitacora-serio-v2.modal-nuevo
  .ani-serio-v2-footer-shell
  .bit-bitacora-foot-cancel,
:is(
  #m-tools-milk-lab,
  #m-tools-developer-platform,
  #m-tools-integration-observability,
  #m-tools-integration-marketplace,
  #m-tools-erp-accounting,
  #m-tools-organizations,
  #m-tools-report-studio
).modal-pebble-vida.bitacora-serio-v2.modal-nuevo
  .ani-serio-v2-footer-shell
  button.bit-bitacora-foot-cancel {
  border-radius: 12px !important;
}