/* ============================================================================
 * YUPY Dashboard (FRONT) — Unified Stylesheet
 * ============================================================================
 * Goal:
 * - One consistent stylesheet for everything rendered inside the shortcode dashboard.
 * - Clean, modern "app-like" UI (cards, tables, filters).
 * - Responsive first: looks good on desktop AND mobile.
 *
 * IMPORTANT WIDTH NOTE:
 * - The "sheet" width is controlled by .yupy-container and .yupy-topbar-inner.
 * - For this build, we use 100% width (fills the parent container).
 * ============================================================================ */

/* ============================================================================
 * 0) Layout defaults / container sizing
 * ============================================================================ */

.yupy-wrap{
  font-family: inherit;
  color: inherit;
}

.yupy-wrap * {
  box-sizing: border-box;
}

/* Main container for ALL pages inside the shortcode */
.yupy-container {
  width: 100%;
  max-width: none;

  margin: 0 auto;
  padding: 18px 14px 40px;
}

/* ============================================================================
 * 1) Topbar (sticky)
 * ============================================================================ */

.yupy-topbar {
  position: sticky;
  top: 0;
  z-index: 50;

  background: #0b1220;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Inner content of topbar: keep same width as main container */
.yupy-topbar-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;

  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Brand area (left side) */
.yupy-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
}

.yupy-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #22c55e;
  display: inline-block;
}

.yupy-brand-name {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.yupy-brand-sub {
  opacity: 0.75;
  font-size: 12px;
}

/* ============================================================================
 * 2) Navigation (topbar links)
 * ============================================================================ */

.yupy-nav-toggle {
  display: none;
  margin-left: auto;

  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;

  padding: 6px 10px;
  border-radius: 10px;
}

.yupy-nav-slot {
  margin-left: auto;
}

.yupy-nav {
  display: flex;
  gap: 8px;
}

.yupy-nav-item {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;

  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.yupy-nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.yupy-nav-item.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ============================================================================
 * 3) Page headers / typography helpers
 * ============================================================================ */

.yupy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.yupy-h2 {
  margin: 0;
  font-size: 22px;
}

.yupy-h3 {
  margin: 0;
  font-size: 16px;
}

.yupy-muted {
  color: rgba(0, 0, 0, 0.65);
  margin: 6px 0 12px;
}

/* Generic pill (used in headers, small labels) */
.yupy-pill {
  display: inline-flex;
  align-items: center;

  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;

  background: #fff;
}

/* ============================================================================
 * 4) Content / Cards
 * ============================================================================ */

.yupy-content {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

/* Card shell */
.yupy-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Card variant: error */
.yupy-card-error {
  border-color: rgba(220, 38, 38, 0.25);
}

.yupy-card-head {
  padding: 14px 14px 0;
}

.yupy-card-body {
  padding: 14px;
}

/* ============================================================================
 * 5) Buttons
 * ============================================================================ */

.yupy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 0;
  background: #111827;
  color: #fff;

  padding: 10px 14px;
  border-radius: 12px;

  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
}

.yupy-btn:hover {
  opacity: 0.92;
}

/* Ghost variant (used for secondary links/buttons) */
.yupy-btn-ghost {
  background: transparent;
  color: #111827;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ============================================================================
 * 6) Filter rows / form fields (daily report filters)
 * ============================================================================ */

.yupy-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Standard form field */
.yupy-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.yupy-field-btn {
  min-width: auto;
}

/* Label above inputs */
.yupy-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
}

/* Inputs */
.yupy-input {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  background: #fff;
}

/* Checkbox style used in daily filters */
.yupy-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  background: #fff;

  font-size: 13px;
}

.yupy-check input {
  width: 16px;
  height: 16px;
}

/* ============================================================================
 * 7) Tables
 * ============================================================================ */

.yupy-table-wrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Basic table */
.yupy-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px; /* scroll on narrow screens */
}

.yupy-table th,
.yupy-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
  font-size: 13px;
  vertical-align: top;
}

.yupy-table th {
  background: rgba(0, 0, 0, 0.03);
  font-weight: 600;
}

.yupy-table tr:last-child td {
  border-bottom: 0;
}

/* Small helper text inside cells */
.yupy-small {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 4px;
}

/* Thumbnail (voucher image) */
.yupy-thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  display: inline-block;
}

/* Transaction status pill */
.yupy-pill-state {
  display: inline-flex;
  align-items: center;

  padding: 4px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;

  border: 1px solid transparent;
}

.yupy-pill-state.is-ok {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
  color: #166534;
}

.yupy-pill-state.is-warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.22);
  color: #92400e;
}

/* ============================================================================
 * 7.6) Daily Total (ONLY the number text, not a bar)
 * - In your HTML it's: <span class="yupy-daily-total">TOTAL: S/ 0.00</span>
 * ============================================================================ */

.yupy-daily-total {
  display: inline-block;

  font-size: 22px;
  font-weight: 900;
  color: #111827;

  padding: 6px 12px;
  border-radius: 999px;

  background: rgba(17, 24, 39, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.10);

  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================================
 * 8) Alerts
 * ============================================================================ */

.yupy-alert {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.yupy-alert-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.18);
}

/* ============================================================================
 * 9) Responsive rules (mobile / tablet)
 * ============================================================================ */

@media (max-width: 1024px) {
  .yupy-container {
    width: 100%;
    max-width: none;
    padding: 16px 12px 34px;
  }

  .yupy-topbar-inner {
    width: 100%;
    max-width: none;
    padding: 10px 12px;
  }
}

/* Navigation collapses into hamburger */
@media (max-width: 860px) {
  .yupy-nav-toggle {
    display: inline-flex;
  }

  .yupy-nav-slot {
    display: none;
    width: 100%;
  }

  .yupy-nav-slot.is-open {
    display: block;
  }

  .yupy-nav {
    flex-direction: column;
    padding-top: 10px;
  }

  /* Filters: stack nicely on mobile */
  .yupy-field {
    min-width: 100%;
  }

  .yupy-row {
    gap: 10px;
  }

  /* Total slightly smaller on mobile */
  .yupy-daily-total {
    font-size: 18px;
  }

  /* Table: allow more natural scrolling */
  .yupy-table {
    min-width: auto; /* daily transactions can have many columns */
  }
}

/* =========================================================
 * INLINE EDIT (monto) — UI pequeña + respeta [hidden]
 * ========================================================= */

[data-yupy-monto="1"]{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* CRÍTICO: respeta el atributo hidden */
.yupy-monto-edit[hidden]{
  display: none !important;
}
.yupy-monto-edit:not([hidden]){
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Lapicito: más pequeño y fino */
[data-yupy-monto-edit="1"]{
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

[data-yupy-monto-edit="1"]:hover{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.18);
}
[data-yupy-monto-edit="1"]:active{ transform: scale(0.98); }
[data-yupy-monto-edit="1"]:focus-visible{
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 2px;
}

/* Input más compacto */
.yupy-monto-input{
  width: 84px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.14);
  padding: 0 8px;
  font-size: 12px;
  background: rgba(255,255,255,0.95);
}
.yupy-monto-input:focus{
  outline: none;
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* Botones mini */
[data-yupy-monto-save="1"],
[data-yupy-monto-cancel="1"]{
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  font-size: 11px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
[data-yupy-monto-save="1"]:hover,
[data-yupy-monto-cancel="1"]:hover{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.18);
}
[data-yupy-monto-save="1"]:disabled,
[data-yupy-monto-cancel="1"]:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* Mensajes */
.yupy-monto-msg{
  font-size: 11px;
  opacity: 0.9;
  margin-left: 4px;
}

/* =========================================================
 * INLINE EDIT — FINAL OVERRIDES (sin repetición)
 * PÉGALO AL FINAL del CSS para que gane.
 * ========================================================= */

/* ---------- 1) Botón lapicito (edit) ---------- */
[data-yupy-monto-edit="1"]{
  /* tamaño real */
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;

  /* mata estilos globales tipo yupy-btn */
  padding: 0 !important;
  min-width: 0 !important;

  /* centra el ícono */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* evita desalineos */
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;

  /* look */
  border-radius: 9px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(255,255,255,0.75) !important;
  color: rgba(0,0,0,0.85) !important;

  /* por si hay reglas raras del theme */
  box-shadow: none !important;
}

/* si el botón contiene un <span> / svg / icon font */
[data-yupy-monto-edit="1"] > *{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- 2) Guardar / Cancelar ---------- */
.yupy-monto-edit [data-yupy-monto-save="1"],
.yupy-monto-edit [data-yupy-monto-cancel="1"]{
  /* tamaño real */
  height: 28px !important;
  padding: 0 12px !important;   /* <-- NO padding vertical */
  
  /* mata estilos globales */
  min-width: 0 !important;
  width: auto !important;

  /* centra texto */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* tipografía */
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;

  /* evita que el texto se pegue/rompa */
  white-space: nowrap !important;

  /* look */
  border-radius: 9px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(255,255,255,0.88) !important;
  color: rgba(0,0,0,0.86) !important;

  box-shadow: none !important;
  box-sizing: border-box !important;
  text-indent: 0 !important;
}

/* separación entre botones (si usas wrapper con gap) */
.yupy-monto-edit .yupy-monto-actions{
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
}

/* ---------- 3) Hover suave ---------- */
[data-yupy-monto-edit="1"]:hover,
.yupy-monto-edit [data-yupy-monto-save="1"]:hover,
.yupy-monto-edit [data-yupy-monto-cancel="1"]:hover{
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.18) !important;
}

/* ---------- 4) Disabled ---------- */
.yupy-monto-edit [data-yupy-monto-save="1"]:disabled,
.yupy-monto-edit [data-yupy-monto-cancel="1"]:disabled{
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* ---------- 5) (Opcional) Ajuste fino si el icono se ve chico/grande ---------- */
/* Si tu lapicito es un carácter tipo "✎", esto lo centra mejor visualmente */
[data-yupy-monto-edit="1"]{
  font-size: 14px !important;
}


/* Esto permite que deslices el dedo sobre la tabla si no cabe */
.yupy-tx-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   YUPY Daily - Transactions table responsive
   - Móvil: solo mostramos columnas clave
   - El resto se verá en el "detalle" (expand row) por JS
   ========================================================================== */

@media (max-width: 720px) {

  /* Opcional: que no se vea tan apretado */
  .yupy-tx-table table {
    width: 100%;
  }

  /* ----------------------------------------------------------
     Columnas (según tu orden actual):
     1  ID (idx)
     2  Fecha Registro
     3  Fecha Operación
     4  Banco
     5  Tipo APP
     6  Código Operación
     7  Cliente
     8  Teléfono del cliente
     9  Monto
     10 Ruta
     11 Agente
     12 Empresa
     13 Estado
     14 Imagen
     15 ID Sistema

     En móvil vamos a DEJAR visibles: 2, 9, 10, 13
     (y opcionalmente 11 si quieres)
     ---------------------------------------------------------- */

  /* Oculta: 1 (idx) */
  .yupy-tx-table table th:nth-child(1),
  .yupy-tx-table table td:nth-child(1) {
    display: none;
  }

  /* Oculta: 3..8 */
  .yupy-tx-table table th:nth-child(3),
  .yupy-tx-table table td:nth-child(3),
  .yupy-tx-table table th:nth-child(4),
  .yupy-tx-table table td:nth-child(4),
  .yupy-tx-table table th:nth-child(5),
  .yupy-tx-table table td:nth-child(5),
  .yupy-tx-table table th:nth-child(6),
  .yupy-tx-table table td:nth-child(6),
  .yupy-tx-table table th:nth-child(7),
  .yupy-tx-table table td:nth-child(7),
  .yupy-tx-table table th:nth-child(8),
  .yupy-tx-table table td:nth-child(8) {
    display: none;
  }

  /* Oculta: 11 (Agente) — si quieres que agente SI sea visible, borra este bloque */
  .yupy-tx-table table th:nth-child(11),
  .yupy-tx-table table td:nth-child(11) {
    display: none;
  }

  /* Oculta: 12, 14, 15 */
  .yupy-tx-table table th:nth-child(12),
  .yupy-tx-table table td:nth-child(12),
  .yupy-tx-table table th:nth-child(14),
  .yupy-tx-table table td:nth-child(14),
  .yupy-tx-table table th:nth-child(15),
  .yupy-tx-table table td:nth-child(15) {
    display: none;
  }

  /* Un poquito de aire */
  .yupy-tx-table table td {
    padding: 10px 8px;
    vertical-align: top;
  }

  /* Opcional: que la fila parezca clickeable */
  .yupy-tx-table table tbody tr {
    cursor: pointer;
  }

  /* Cuando está expandida */
  .yupy-tx-table table tbody tr.is-expanded {
    outline: 2px solid rgba(0,0,0,0.08);
  }

  /* Detalle debajo */
  .yupy-tx-details {
    padding: 10px 8px;
    background: rgba(0,0,0,0.03);
    border-radius: 10px;
  }

  .yupy-tx-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .yupy-tx-details-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    font-size: 13px;
  }

  .yupy-tx-details-item b {
    opacity: 0.7;
    font-weight: 600;
  }
}


/* =========================================================
 * YUPY Daily — Mobile Cards View (NEW)
 * ========================================================= */

/* Default (desktop): show table, hide cards */
.yupy-tx-cards { display: none; }
.yupy-tx-card  { display: block; }

/* Mobile: hide table, show cards */
@media (max-width: 720px){
  .yupy-tx-table { display: none; }
  .yupy-tx-cards { display: grid; gap: 10px; }

  .yupy-tx-card{
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  }

  .yupy-tx-card-top{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
  }

  .yupy-tx-card-mid{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 10px;
    align-items: start;
  }

  .yupy-tx-card-details{
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }

  .yupy-tx-card-details summary{
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    opacity: .9;
  }

  .yupy-tx-kv{
    margin-top: 10px;
    display: grid;
    gap: 6px;
    font-size: 13px;
  }

  .yupy-tx-kv b{
    opacity: .75;
    font-weight: 700;
  }
}

/* =========================================================
 * YUPY Login (inline dentro del dashboard)
 * - Centrado real (flex en .yupy-container.yupy-login-page)
 * - Desktop: ~50% del ancho
 * - Inputs: borde + fondo gris claro
 * ========================================================= */

.yupy-container.yupy-login-page{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Card */
.yupy-login-card{
  width: 50%;
  max-width: 620px;
  min-width: 320px;
}

/* Móvil */
@media (max-width: 860px){
  .yupy-container.yupy-login-page{ padding-top: 18px; padding-bottom: 18px; }
  .yupy-login-card{ width: 100%; max-width: none; min-width: 0; }
}

/* Form */
.yupy-loginform form { margin: 0; }
.yupy-loginform p { margin: 10px 0; }

.yupy-loginform label{
  display:block;
  font-size: 14px;     /* <-- más grande */
  opacity: .80;
  margin-bottom: 6px;
}

/* Inputs */
.yupy-loginform input[type="text"],
.yupy-loginform input[type="password"]{
  width: 100%;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;     /* <-- más grande */
  background: rgba(17, 24, 39, 0.04);
  box-shadow: none;
}

.yupy-loginform input[type="text"]:focus,
.yupy-loginform input[type="password"]:focus{
  outline: none;
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  background: rgba(17, 24, 39, 0.03);
}

/* Remember row */
.yupy-loginform .login-remember label{
  font-size: 14px;
  opacity: .85;
}

/* Submit */
.yupy-loginform input[type="submit"]{
  width: 100%;
  border: 0;
  background: #111827;
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;     /* <-- más grande */
}

.yupy-loginform input[type="submit"]:hover{ opacity:.92; }

/* =========================================================
 * YUPY — Fix typography tracking inside dashboard
 * (el theme mete letter-spacing negativo en h1..h6)
 * PÉGALO AL FINAL para que gane.
 * ========================================================= */

.yupy-wrap h1,
.yupy-wrap h2,
.yupy-wrap h3,
.yupy-wrap h4,
.yupy-wrap h5,
.yupy-wrap h6{
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* Si tu theme además aplica letter-spacing a clases tipo .yupy-h3/.yupy-h2 */
.yupy-wrap .yupy-h2,
.yupy-wrap .yupy-h3{
  letter-spacing: normal !important;
}

/* =============================================================================
 * YUPY — Reports (UI Mock)
 * Pegar al FINAL de: assets/dashboard/css/dashboard.css
 * ============================================================================= */

.yupy-reports-filters-top {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

.yupy-reports-range-label {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.yupy-reports-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.yupy-reports-filters-row {
  gap: 12px;
  align-items: end;
}

.yupy-reports-advanced {
  margin-top: 10px;
}

.yupy-reports-advanced summary {
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
}

.yupy-reports-advanced-grid {
  gap: 12px;
}

.yupy-reports-kpis {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

.yupy-reports-kpi-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.yupy-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.yupy-kpi {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.6);
}

.yupy-kpi-label {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
}

.yupy-kpi-value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* =============================================================================
 * Charts (Reportes) — robusto para Chart.js (evita “canvas infinito”)
 * Reemplaza TODO tu bloque actual de Charts por este.
 * Requiere que el <canvas> esté envuelto en:
 *   <div class="yupy-chart-wrap"><canvas class="yupy-chart-canvas" ...></canvas></div>
 * ============================================================================= */

/* Grid: 2 columnas en desktop, 1 en mobile */
.yupy-reports-charts-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  align-items: stretch;

  /* CRÍTICO: en grids/flex evita overflow horizontal que dispara tamaños raros */
  min-width: 0;
}

/* Card contenedora */
.yupy-chart-card{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.6);

  /* CRÍTICO: permite que el contenido interno no fuerce el ancho */
  min-width: 0;
  overflow: hidden;
}

/* Header del chart */
.yupy-chart-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Título */
.yupy-chart-title{
  font-weight: 800;
  line-height: 1.15;
}

/* Acciones: botones y toggles */
.yupy-chart-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Estado activo del toggle */
.yupy-btn-ghost.is-active{
  border: 1px solid rgba(0,0,0,0.18);
}

/* Wrapper con altura fija (CLAVE con Chart.js responsive) */
.yupy-chart-wrap{
  position: relative;
  width: 100%;

  /* Ajusta altura a gusto. Esto evita “canvas 5000px” */
  height: 320px;
  max-height: 420px;

  /* Defensivo: si algo intenta crecer, lo corta */
  overflow: hidden;

  /* Estética: borde/fondo viven aquí (no en el canvas) */
  border-radius: 10px;
  border: 1px dashed rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.4);
}

/* Canvas: debe llenar el wrapper, no decidir su propia altura */
.yupy-chart-canvas{
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile: 1 columna */
@media (max-width: 860px){
  .yupy-reports-charts-grid{
    grid-template-columns: 1fr;
  }
}

/* Tables layout */
.yupy-reports-tables-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.yupy-table-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.6);
}

.yupy-table-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.yupy-table-title {
  font-weight: 800;
}

.yupy-table-wrap {
  overflow: auto;
}

.yupy-table {
  width: 100%;
  border-collapse: collapse;
}

.yupy-table th, .yupy-table td {
  padding: 8px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-align: left;
  font-size: 13px;
}

.yupy-alert-soft {
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.55);
}

/* Modal (drill-down placeholder) CORREGIDO */
.yupy-modal {
  /* CRÍTICO: Esto saca el modal del flujo y lo pega a la pantalla */
  position: fixed; 
  inset: 0; 
  z-index: 99999;

  /* Fondo oscuro para bloquear lo de atrás (backdrop) está en el hijo, 
     pero necesitamos que este contenedor ocupe toda la pantalla */
  width: 100%;
  height: 100%;
  
  /* Permite hacer scroll si el modal es muy alto para la pantalla */
  overflow-y: auto; 
}

.yupy-modal-backdrop {
  position: fixed; /* Cambiado de absolute a fixed por seguridad */
  inset: 0;
  background: rgba(0,0,0,0.35);
  /* Aseguramos que el backdrop se quede quieto */
}

.yupy-modal-panel {
  position: relative;
  max-width: 860px;
  
  /* Esto define la altura visual: 8% desde el techo de la pantalla */
  margin: 8vh auto 50px auto; 
  
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  width: calc(100% - 24px);
}

.yupy-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.yupy-modal-body {
  padding: 12px 14px;
}

.yupy-code {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.05);
  overflow: auto;
}

/* Responsive */
@media (max-width: 860px) {
  .yupy-reports-charts-grid {
    grid-template-columns: 1fr;
  }
  .yupy-reports-tables-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 860px) {
  .input-time-conciliation{
      min-width: 260px;
  }
}

/* ============================================================================
 * YUPY — Drill-down modal (Reports)
 * ============================================================================ */
.yupy-dd-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; z-index: 99990;
}
.yupy-dd-modal {
  position: fixed; top: 50%; left: 50%; width: min(1100px, calc(100vw - 40px));
  max-height: min(80vh, 720px); transform: translate(-50%, -50%);
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: none; z-index: 99991; overflow: hidden; display: flex; flex-direction: column;
}
.yupy-dd-head {
  display: flex; gap: 12px; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.yupy-dd-title { font-weight: 800; font-size: 16px; margin: 0; }
.yupy-dd-sub { font-size: 12px; color: #666; margin-top: 2px; }
.yupy-dd-actions { display: flex; gap: 8px; align-items: center; }
.yupy-dd-body { padding: 0; flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; }
.yupy-dd-meta { font-size: 12px; color: #444; padding: 12px 16px 8px; flex-shrink: 0; }
.yupy-dd-tablewrap {
  border-top: 1px solid #eee; overflow: auto; flex-grow: 1;
}
.yupy-dd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.yupy-dd-table th, .yupy-dd-table td {
  padding: 10px 14px; border-bottom: 1px solid #f1f1f1; text-align: left; white-space: nowrap;
}
.yupy-dd-table th { position: sticky; top: 0; background: #fafafa; z-index: 1; font-weight: 600; color: #555; }
.yupy-dd-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.yupy-dd-foot {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px;
  border-top: 1px solid #eee; align-items: center; background: #fff; flex-shrink: 0;
}
.yupy-dd-muted { color:#666; font-size:12px; }
.yupy-dd-btn {
  border: 0; background: #111; color: #fff; padding: 8px 14px; border-radius: 6px;
  cursor: pointer; font-weight: 600; font-size: 13px;
}
.yupy-dd-btn.secondary { background: #f2f2f2; color: #333; }
.yupy-dd-btn:disabled { opacity: .5; cursor: not-allowed; }


/* ============================================================================
 * YUPY — Image Viewer (Lightbox Global)
 * ============================================================================ */
#yupyImageViewer {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.95); /* Fondo muy oscuro */
    z-index: 2147483647; /* Máximo valor posible en CSS */
    justify-content: center; 
    align-items: center; 
    cursor: zoom-out;
}

#yupyFullImage {
    max-width: 90%; 
    max-height: 90%; 
    border-radius: 4px; 
    box-shadow: 0 0 50px rgba(0,0,0,1); 
    object-fit: contain; /* Asegura que la imagen no se deforme */
    cursor: default;
}

.yupy-close-image-btn {
    position: absolute; 
    top: 30px; 
    right: 30px; 
    color: #fff; 
    font-size: 50px; 
    font-weight: 300; 
    cursor: pointer; 
    line-height: 1; 
    transition: transform 0.2s;
    z-index: 2147483648; /* Encima del overlay */
}

.yupy-close-image-btn:hover { transform: scale(1.1); color: #ffeb3b; }

/* Estilo del enlace/texto en la tabla */
.yupy-img-trigger {
    color: #0073aa;
    text-decoration: underline;
    cursor: zoom-in;
    font-weight: 700;
    pointer-events: auto; /* Asegura que reciba clics */
}


/* =========================================================
 * FIX: Bloquear expansión de fila en Desktop
 * Como en móvil usas Cards, la tabla no necesita expandirse.
 * ========================================================= */
@media (min-width: 721px) {
    
  /* 1. Aunque el JS genere la fila, la ocultamos visualmente */
  .yupy-tx-details-row {
    display: none !important;
  }

  /* 2. Quitamos el cursor de "mano" para que el usuario 
        sepa que no es clickeable */
  .yupy-tx-table table tbody tr {
    cursor: default !important;
    pointer-events: none; /* Desactiva clicks en la fila */
  }

  /* 3. Reactivamos los clicks SOLO para los elementos interactivos 
        (Botón de editar monto, links, inputs, imágenes) */
  .yupy-tx-table table tbody tr a,
  .yupy-tx-table table tbody tr button,
  .yupy-tx-table table tbody tr input,
  .yupy-tx-table table tbody tr .yupy-img-trigger,
  .yupy-tx-table table tbody tr [data-yupy-monto="1"] {
    pointer-events: auto;
    cursor: pointer;
  }
}

/* ==========================================================================
   MEJORA VISUAL MODAL DRILL-DOWN
   ========================================================================== */

/* 1. Encabezado más espacioso */
.yupy-dd-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;          /* Más aire alrededor */
    border-bottom: 1px solid #eee;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
}

/* 2. Título principal grande */
.yupy-dd-title {
    font-size: 1.5rem;           /* 24px aprox */
    font-weight: 700;
    color: #1d2327;
    margin-bottom: 8px;          /* Separación con el subtítulo */
    line-height: 1.2;
}

/* 3. Contenedor del subtítulo */
.yupy-dd-sub {
    font-size: 0.95rem;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;                    /* Espacio entre etiquetas */
}

/* 4. Etiqueta de FECHA (Gris/Azulado) */
.yupy-dd-date {
    background-color: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
}
/* Icono opcional antes de la fecha (truco CSS) */
.yupy-dd-date::before {
    content: "📅"; 
    margin-right: 6px;
    font-size: 0.8em;
    opacity: 0.7;
}

/* 5. Etiqueta de INFO/RUTA (Azul/Brand) */
.yupy-dd-tag {
    background-color: #eff6ff;   /* Azul muy suave */
    color: #2563eb;              /* Azul fuerte */
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid #dbeafe;
    text-transform: uppercase;   /* Opcional: para que se vea más como título */
    letter-spacing: 0.02em;
}