.water-portal-area,
.water-pay-area,
.water-return-area{
  background:linear-gradient(180deg,#f7f9fc 0%,#f2f4f7 100%);
  padding:72px 0;
}

.water-shell,
.water-pay-layout,
.water-result-layout{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.water-main-stack,
.water-side-stack,
.water-pay-main,
.water-pay-side{
  display:grid;
  gap:24px;
}

.water-panel,
.water-search-card,
.water-help-card,
.water-pay-card,
.water-result-card,
.water-contract-card,
.water-table-card,
.water-empty-card,
.water-summary-card{
  background:#fff;
  border:1px solid #e6ebf2;
  border-radius:22px;
  box-shadow:0 20px 40px rgba(15,23,42,.06);
}

.water-card-head{
  padding:26px 28px 18px;
  border-bottom:1px solid #eef2f7;
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.water-card-head h2,
.water-card-head h3,
.water-contract-title,
.water-pay-title,
.water-result-title{
  margin:0;
  color:#17212f;
  letter-spacing:-.02em;
}

.water-card-head p,
.water-search-hint,
.water-contract-subtitle,
.water-result-text,
.water-help-card p,
.water-mini-copy,
.water-empty{
  margin:0;
  color:#5b6778;
  line-height:1.72;
}

.water-search-card{
  overflow:hidden;
}

.water-search-hero{
  padding:30px 28px 26px;
  background:linear-gradient(135deg,#ff0000 0%,#424852 58%,#1d6d7b 100%);
  color:#fff;
}

.water-search-hero h2,
.water-search-hero p,
.water-search-hero .water-search-hint,
.water-search-hero .water-pill,
.water-pay-banner,
.water-result-banner{
  color:#fff;
}

.water-search-hero h2{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.12;
}

.water-search-hero p{
  margin:0 0 18px;
  opacity:.92;
  line-height:1.7;
}

.water-search-form,
.water-period-form,
.water-pay-form{
  display:grid;
  gap:14px;
}

.water-search-form .water-field-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
}

.water-field,
.water-period-form select,
.water-pay-form input,
.water-pay-form textarea{
  width:100%;
  min-height:54px;
  border-radius:14px;
  border:1px solid #d9e2ec;
  background:#fff;
  color:#17212f;
  padding:0 16px;
  font-size:15px;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.water-period-form select,
.water-pay-form textarea{
  padding-top:12px;
  padding-bottom:12px;
}

.water-pay-form textarea{
  min-height:112px;
  resize:vertical;
}

.water-field:focus,
.water-period-form select:focus,
.water-pay-form input:focus,
.water-pay-form textarea:focus{
  border-color:#9f7b35;
  box-shadow:0 0 0 4px rgba(159,123,53,.12);
  outline:none;
}

.water-search-form .thm-btn,
.water-pay-actions .thm-btn,
.water-row-actions .thm-btn,
.water-contract-actions .thm-btn,
.water-result-actions .thm-btn{
  min-height:52px;
  border-radius:14px;
  line-height:48px;
  font-weight:800;
  letter-spacing:.01em;
}

.water-ghost{
  background:#fff !important;
  color:#17212f !important;
  border:2px solid #17212f;
}

.water-search-body,
.water-help-body,
.water-pay-body,
.water-result-body,
.water-contract-body,
.water-summary-body{
  padding:26px 28px 28px;
}

.water-pill-row,
.water-chip-row,
.water-contract-meta,
.water-note-list,
.water-inline-metrics,
.water-result-chip-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.water-pill,
.water-chip,
.water-portal-chip,
.water-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.water-pill,
.water-portal-chip{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}

.water-chip{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#334155;
}

.water-chip strong{
  color:#17212f;
}

.water-badge.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.water-badge.warn{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.water-badge.danger{background:#fef3f2;color:#b42318;border:1px solid #fecdca}
.water-badge.muted{background:#f2f4f7;color:#667085;border:1px solid #e4e7ec}

.water-alert{
  padding:16px 20px;
  border-radius:16px;
  margin-bottom:24px;
  font-weight:700;
}
.water-alert.ok{background:#eef8f1;color:#166534;border:1px solid #cde9d5}
.water-alert.err{background:#fff5f6;color:#c73748;border:1px solid #f0c8ce}

.water-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.water-kpi{
  border:1px solid #e6ebf2;
  border-radius:18px;
  padding:20px 18px;
  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
}

.water-kpi--focus{
  background:linear-gradient(135deg,#ff0000 0%,#424852 100%);
  color:#fff;
  border-color:transparent;
}

.water-kpi-label{
  display:block;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.85;
}

.water-kpi-value{
  display:block;
  margin-top:10px;
  font-size:31px;
  line-height:1.08;
  font-weight:900;
  color:inherit;
}

.water-kpi small{
  display:block;
  margin-top:8px;
  font-size:12px;
  opacity:.88;
}

.water-contract-card{
  overflow:hidden;
}

.water-contract-header{
  padding:28px;
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.water-contract-title{
  font-size:30px;
  line-height:1.12;
}

.water-contract-subtitle{
  margin-top:8px;
  max-width:760px;
}

.water-contract-actions,
.water-row-actions,
.water-pay-actions,
.water-result-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.water-inline-metrics .water-chip{
  padding:12px 16px;
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
}

.water-admin-note,
.water-pay-note,
.water-result-note,
.water-support-note{
  border-radius:16px;
  padding:16px 18px;
  background:#f8fafc;
  border:1px solid #e5edf5;
  color:#475467;
  line-height:1.72;
}

.water-admin-note strong,
.water-pay-note strong,
.water-result-note strong{
  color:#17212f;
}

.water-order-strip{
  padding:0 28px 28px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.water-order-item{
  padding:12px 14px;
  border-radius:999px;
  background:#fff7e6;
  color:#8a6116;
  border:1px solid #f5d59a;
  font-weight:700;
  font-size:13px;
}

.water-table-card{
  overflow:hidden;
}

.water-table-wrap{
  padding:0 28px 28px;
  overflow:auto;
}

.water-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:880px;
}

.water-table th,
.water-table td{
  padding:16px 14px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
  text-align:left;
  background:#fff;
}

.water-table tbody tr:hover td{
  background:#fbfdff;
}

.water-table th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#667085;
  font-weight:900;
  position:sticky;
  top:0;
  z-index:1;
}

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

.water-empty-card .water-empty{
  padding:28px;
}

.water-match-grid,
.water-mini-grid,
.water-pay-security,
.water-step-list{
  display:grid;
  gap:14px;
}

.water-mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.water-mini-card{
  padding:18px;
  border:1px solid #e6ebf2;
  border-radius:18px;
  background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
}

.water-mini-card strong{
  display:block;
  color:#17212f;
  margin-bottom:6px;
}

.water-mini-card p{
  margin:0;
  color:#5b6778;
  line-height:1.72;
}

.water-help-card .water-card-head{
  border-bottom:none;
  padding-bottom:0;
}

.water-help-list,
.water-step-list{
  list-style:none;
  margin:0;
  padding:0;
}

.water-help-list li,
.water-step-list li{
  position:relative;
  padding-left:18px;
  color:#475467;
  line-height:1.72;
}

.water-help-list li::before,
.water-step-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff0000;
}

.water-summary-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(135deg,#ff0000 0%,#424852 100%);
  color:#fff;
}

.water-summary-total span{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  opacity:.85;
}

.water-summary-total strong{
  display:block;
  margin-top:6px;
  font-size:34px;
  line-height:1.05;
}

.water-pay-banner,
.water-result-banner{
  padding:28px;
  border-radius:22px;
  background:linear-gradient(135deg,#ff0000 0%,#424852 58%,#1d6d7b 100%);
  box-shadow:0 22px 46px rgba(15,23,42,.16);
}

.water-pay-banner h2,
.water-result-banner h2{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.12;
}

.water-pay-banner p,
.water-result-banner p{
  margin:0;
  line-height:1.72;
  opacity:.94;
}

.water-pay-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
}

.water-pay-title,
.water-result-title{
  font-size:30px;
}

.water-pay-subtitle{
  margin:8px 0 0;
  color:#5b6778;
  line-height:1.72;
}

.water-pay-summary-grid{
  display:grid;
  gap:16px;
}

.water-security-card{
  padding:18px;
  border:1px solid #e6ebf2;
  border-radius:18px;
  background:#fff;
}

.water-security-card strong{
  display:block;
  color:#17212f;
  margin-bottom:6px;
}

.water-security-card p{
  margin:0;
  color:#5b6778;
  line-height:1.72;
}

.water-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.water-form-grid .water-form-span{
  grid-column:1 / -1;
}

.water-form-label{
  display:block;
  margin-bottom:8px;
  font-weight:900;
  color:#344054;
}

.water-result-card{
  overflow:hidden;
}

.water-result-icon{
  width:88px;
  height:88px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  margin:0 auto 18px;
}

.water-result-icon--ok{background:#eef8f1;color:#2d7a47}
.water-result-icon--warn{background:#fff7e6;color:#8a6116}
.water-result-icon--danger{background:#fff5f6;color:#c73748}

.water-result-card .water-card-head{
  border-bottom:none;
  justify-content:center;
  text-align:center;
}

.water-result-body{
  text-align:center;
  display:grid;
  gap:18px;
}

.water-copy-link{
  background:none;
  border:none;
  color:#1d6d7b;
  font-weight:800;
  cursor:pointer;
  padding:0;
}

@media (max-width: 1199px){
  .water-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 991px){
  .water-portal-area,
  .water-pay-area,
  .water-return-area{padding:56px 0;}

  .water-shell,
  .water-pay-layout,
  .water-result-layout{grid-template-columns:1fr;gap:20px;}

  .water-side-stack{order:2;}
  .water-main-stack,
  .water-pay-main,
  .water-result-main{order:1;}

  .water-search-form .water-field-row,
  .water-form-grid,
  .water-mini-grid,
  .water-kpi-grid{grid-template-columns:1fr;}

  .water-contract-header,
  .water-card-head,
  .water-pay-top{padding-left:20px;padding-right:20px;}

  .water-search-body,
  .water-help-body,
  .water-pay-body,
  .water-result-body,
  .water-contract-body,
  .water-summary-body,
  .water-table-wrap{padding-left:20px;padding-right:20px;}

  .water-order-strip{padding:0 20px 20px;}

  .water-contract-header,
  .water-pay-top,
  .water-card-head{flex-direction:column;align-items:flex-start;}

  .water-contract-actions,
  .water-row-actions,
  .water-pay-actions,
  .water-result-actions{width:100%;}

  .water-contract-actions > *,
  .water-row-actions > *,
  .water-pay-actions > *,
  .water-result-actions > *{flex:1 1 100%;text-align:center;}

  .water-table{
    min-width:0;
    border-collapse:separate;
    border-spacing:0 12px;
  }

  .water-table[data-responsive-ready="1"] thead{display:none;}
  .water-table[data-responsive-ready="1"] tbody,
  .water-table[data-responsive-ready="1"] tr,
  .water-table[data-responsive-ready="1"] td{display:block;width:100%;}

  .water-table[data-responsive-ready="1"] tr{
    background:#fff;
    border:1px solid #e6ebf2;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(15,23,42,.05);
    margin-bottom:12px;
  }

  .water-table[data-responsive-ready="1"] td{
    border-bottom:1px solid #eef2f7;
    padding:13px 14px !important;
    text-align:left !important;
  }

  .water-table[data-responsive-ready="1"] td:last-child{border-bottom:0;}

  .water-table[data-responsive-ready="1"] td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:6px;
    color:#667085;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
  }
}

@media (max-width: 640px){
  .water-search-hero,
  .water-pay-banner,
  .water-result-banner{padding:22px 20px;}

  .water-search-hero h2,
  .water-pay-banner h2,
  .water-result-banner h2,
  .water-contract-title,
  .water-pay-title,
  .water-result-title{font-size:24px;}

  .water-kpi-value,
  .water-summary-total strong{font-size:28px;}
}


/* ===== Ajuste portal producción v22 ===== */
.water-portal-area,.water-pay-area,.water-return-area{background:#f3f5f8;padding:56px 0}
.water-shell,.water-pay-layout,.water-result-layout{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px}
.water-search-card,.water-help-card,.water-pay-card,.water-result-card,.water-contract-card,.water-table-card,.water-empty-card,.water-summary-card,.water-panel{
  border:1px solid #d8e0ea;
  border-radius:10px;
  box-shadow:none;
  background:#fff;
}
.water-card-head{padding:20px 22px 14px;border-bottom:1px solid #e7edf4}
.water-card-head h2,.water-card-head h3,.water-contract-title,.water-pay-title,.water-result-title{font-size:1.35rem;line-height:1.2}
.water-card-head p,.water-contract-subtitle,.water-result-text,.water-help-card p,.water-mini-copy,.water-empty,.water-search-hint{font-size:.95rem;line-height:1.55;color:#5b6778}
.water-search-hero{padding:24px 22px 20px;background:linear-gradient(135deg,#ff0000 0%,#374151 62%,#1f6d84 100%)}
.water-search-hero h2{font-size:1.6rem;margin:0 0 8px}
.water-search-hero p{font-size:.97rem;line-height:1.55;margin:0 0 14px}
.water-search-body,.water-help-body,.water-pay-body,.water-result-body,.water-contract-body,.water-summary-body{padding:20px 22px 22px}
.water-pill,.water-chip,.water-portal-chip,.water-badge{border-radius:7px;padding:8px 11px;font-size:.72rem;letter-spacing:.08em}
.water-chip{background:#f8fafc}
.water-field,.water-period-form select,.water-pay-form input,.water-pay-form textarea{min-height:46px;border-radius:8px;font-size:.96rem}
.water-search-form .thm-btn,.water-pay-actions .thm-btn,.water-row-actions .thm-btn,.water-contract-actions .thm-btn,.water-result-actions .thm-btn{
  min-height:38px;line-height:36px;padding:0 12px;border-radius:8px;font-weight:700;font-size:.88rem
}
.water-ghost{border-width:1px}
.water-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.water-kpi{border-radius:10px;padding:14px 14px;background:#fff;border:1px solid #d8e0ea}
.water-kpi-value{font-size:1.35rem}
.water-inline-metrics .water-chip{padding:8px 10px;font-size:.82rem}
.water-admin-note,.water-pay-note,.water-result-note,.water-support-note{border-radius:8px;padding:12px 14px;background:#f8fafc;border:1px solid #e5edf5;line-height:1.55}
.water-table-wrap{padding:0 22px 22px}
.water-table{border-collapse:collapse;min-width:860px}
.water-table th{font-size:.78rem;letter-spacing:.08em;color:#475569;padding:12px 10px;background:#f8fafc}
.water-table td{padding:12px 10px;font-size:.94rem;vertical-align:middle}
.water-row-actions{gap:8px}
.water-row-actions .thm-btn{min-width:auto!important;padding:0 10px!important}
.water-row-actions .thm-btn.bg-clr1,.water-row-actions .thm-btn.water-ghost{display:inline-flex;align-items:center;justify-content:center}
.water-row-actions .thm-btn + .thm-btn{margin-left:0}
.water-order-item{border-radius:8px}
.water-mini-grid{gap:12px}
.water-mini-card{border:1px solid #d8e0ea;border-radius:10px;padding:14px;background:#fff}
.water-step-list{padding-left:18px;margin:0;display:grid;gap:10px}
.water-step-list li{line-height:1.55;color:#475569}
@media (max-width: 1024px){.water-shell,.water-pay-layout,.water-result-layout{grid-template-columns:1fr}.water-kpi-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 720px){
  .water-portal-area,.water-pay-area,.water-return-area{padding:42px 0}
  .water-card-head,.water-search-body,.water-help-body,.water-pay-body,.water-result-body,.water-contract-body,.water-summary-body,.water-table-wrap{padding-left:16px;padding-right:16px}
  .water-contract-header,.water-card-head{gap:12px}
  .water-search-form .water-field-row{grid-template-columns:1fr}
  .water-search-form .thm-btn,.water-contract-actions .thm-btn,.water-row-actions .thm-btn,.water-pay-actions .thm-btn,.water-result-actions .thm-btn{width:auto;flex:0 0 auto;min-height:36px;line-height:34px}
  .water-row-actions{flex-wrap:wrap}
  .water-table{min-width:0;border-spacing:0}
  .water-table[data-responsive-ready="1"] tr{border-radius:10px;box-shadow:none}
  .water-table[data-responsive-ready="1"] td{padding:10px 12px!important}
  .water-kpi-grid{grid-template-columns:1fr}
}