/* assets/portal.css
/* =========================
   AHDIPPE Portal CSS (Responsive + Fix botón "Descargar recibo")
   ========================= */

.ahd-inv-portal{max-width:980px;margin:0 auto;padding:10px;}

/* Header */
.ahd-inv-header{
  background:linear-gradient(120deg,#0ea5e9,#6366f1);
  border-radius:16px;
  padding:14px 16px;
  color:#fff;
  margin-bottom:12px;
  box-shadow:0 10px 30px rgba(2,6,23,.12);
}
.ahd-inv-title{font-size:18px;font-weight:900;letter-spacing:.2px;margin-bottom:4px;}
.ahd-inv-subtitle{opacity:.95;font-size:13px;margin-top:2px;display:flex;gap:8px;align-items:center;}
.ahd-inv-ico-mini{filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));}

/* KPI cards */
.ahd-inv-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.ahd-inv-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
}
.ahd-inv-card-title{font-size:14px;color:#475569;margin-bottom:6px;}
.ahd-inv-card-value{font-size:28px;font-weight:700;}

/* Top actions */
.ahd-inv-actions{margin-bottom:14px;}
.ahd-inv-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#2563eb;
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 10px 24px rgba(37,99,235,.22);
  max-width:100%;
  white-space:normal;
}
.ahd-inv-btn-ico{font-size:16px;}
.ahd-inv-btn-secondary{
  background:#6366f1;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}

/* Filters */
.ahd-inv-filter{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
}
.ahd-inv-filter-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
  align-items:end;
}
.ahd-inv-filter-grid input,
.ahd-inv-filter-grid select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  box-sizing:border-box;
}

.ahd-inv-date-field label{
  display:block;
  font-size:12px;
  color:#64748b;
  margin-bottom:6px;
  font-weight:700;
}
.ahd-inv-date-field input{margin-top:0;}

/* =========================
   Items list (FIX botón cortado / montado)
   ========================= */

.ahd-inv-list{display:flex;flex-direction:column;gap:12px;}

/*
  IMPORTANTE:
  - Usamos GRID con columna derecha acotada (min/max) para evitar que el botón “se salga”
  - Aun si el tema de WP mete estilos raros, forzamos posición/float
*/
.ahd-inv-item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(170px, 230px); /* derecha con ancho controlado */
  gap:14px;
  align-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
}

/* permite wrap real dentro de la columna izquierda (sin empujar al botón) */
.ahd-inv-item-left{min-width:0;}

/* columna derecha siempre visible */
.ahd-inv-item-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-width:170px;
  max-width:230px;
  justify-self:end;
}

/* Text */
.ahd-inv-item-date{font-weight:900;font-size:18px;margin-bottom:4px;}
.ahd-inv-item-num{color:#475569;margin-top:2px;}

/* Evitar overflow con nombres/conceptos largos */
.ahd-inv-item-desc,
.ahd-inv-item-concept,
.ahd-inv-item-meta{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ahd-inv-item-desc{margin-top:8px;color:#334155;font-weight:700;}
.ahd-inv-item-amount{margin-top:8px;font-size:20px;font-weight:900;}
.ahd-inv-item-status{margin-top:8px;font-weight:900;}
.ahd-inv-item-status.paid{color:#0b6b2a;}
.ahd-inv-item-status.pending{color:#b00020;}

/* Botón de recibo (pill) */
.ahd-inv-pill{
  background:#2563eb;
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(37,99,235,.18);

  display:flex;               /* mejor que inline-flex para que respete max-width */
  align-items:center;
  justify-content:center;
  gap:8px;

  /* CLAVE: permitir wrap si el espacio es justo (evita “corte” visual) */
  white-space:normal;
  line-height:1.15;

  /* que nunca se salga del contenedor derecho */
  width:100%;
  max-width:230px;
  box-sizing:border-box;

  /* defensivo contra estilos del tema */
  position:static !important;
  float:none !important;
  right:auto !important;
  left:auto !important;
  transform:none !important;
}

/* Boxes / footer */
.ahd-inv-box{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;}
.ahd-inv-footer-note{margin-top:12px;color:#64748b;}

/* Meta lines para Tipo de documento / Nombre / Concepto */
.ahd-inv-item-meta{margin-top:6px;color:#64748b;font-size:12px;font-weight:700;}
.ahd-inv-item-tag{
  display:inline-block;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:6px 10px;
}
.ahd-inv-item-concept{margin-top:8px;color:#475569;font-size:12px;font-weight:800;}

/* =========================
   Responsive
   ========================= */

/* Tablets */
@media(max-width:900px){
  .ahd-inv-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ahd-inv-cards{grid-template-columns:1fr;}

  /* botón abajo para evitar cualquier choque */
  .ahd-inv-item{
    grid-template-columns:1fr;
    align-items:start;
  }
  .ahd-inv-item-right{
    justify-content:flex-start;
    min-width:0;
    max-width:none;
    width:100%;
  }
  .ahd-inv-pill{
    max-width:none;
    width:100%;
  }
}

/* Phones */
@media(max-width:520px){
  .ahd-inv-portal{padding:8px;}
  .ahd-inv-card{padding:14px;}
  .ahd-inv-item{padding:12px;}
  .ahd-inv-item-date{font-size:16px;}
  .ahd-inv-item-amount{font-size:18px;}
}