/* =====================================================================
   PRECIO DÓLAR HOY .PE — CSS limpio y ordenado
   ===================================================================== */

/* --------------------------- Tokens / Paleta --------------------------- */
:root{
  /* Marca (logo) */
  --brand-blue-deep:#0B2C4A;
  --brand-blue:#2563EB;
  --brand-green:#16A34A;

  /* Neutros */
  --ink-800:#1F2937;
  --ink-700:#334155;
  --ink-600:#475569;
  --ink-500:#64748B;
  --ink-300:#CBD5E1;
  --ink-200:#E2E8F0;
  --ink-100:#F1F5F9;
  --white:#FFFFFF;

  /* UI */
  --panel-bg:#FFFFFF;
  --panel-border:#E2E8F0;
  --panel-shadow:0 8px 26px rgba(15,23,42,.06);
  --radius:12px;
  --container:1120px;
}

/* ------------------------------ Base ------------------------------ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:Inter,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  background:var(--ink-100);
  color:var(--ink-700);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }

/* ------------------------ Estructura general ---------------------- */
.page-wrapper{
  display:flex; gap:12px; align-items:flex-start; justify-content:center;
  padding:12px;
}
main{
  width:100%; max-width:var(--container);
  background:transparent; border-radius:0; box-shadow:none; overflow:visible;
}

/* ---------------------- Publicidad lateral ----------------------- */
.ads{ display:flex; flex-direction:column; gap:8px; padding:8px; }
.ads img{ width:140px; border-radius:10px; box-shadow:var(--panel-shadow); }

/* =================================================================
   HEADER (logo + fecha + 4 cards)
   ================================================================= */
.pdh-header{ margin:8px auto 12px; padding:2px 8px 0; max-width:var(--container); }
.pdh-header__top{ display:grid; place-items:center; margin-bottom:2px; }
.pdh-logo{ height:28px; width:auto; }

.pdh-updated{ text-align:center; font-size:12px; color:var(--ink-500); margin:2px 0 10px; }
.pdh-updated strong{ font-weight:800; color:var(--brand-blue-deep); }

.pdh-cards{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
.pdh-card{
  position:relative; background:#F8FAFC;
  border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:14px 12px; box-shadow:var(--panel-shadow);
}
.pdh-card h3{
  margin:0 0 8px; font-size:12px; font-weight:700; color:var(--ink-600);
  text-align:center; text-transform:uppercase; letter-spacing:.02em;
}
.pdh-value{
  font-variant-numeric:tabular-nums;
  font-size:24px; font-weight:900; line-height:1; color:var(--brand-blue-deep); text-align:center;
}
.pdh-card--sunat::before,
.pdh-card--best::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
}
.pdh-card--sunat::before{ background:linear-gradient(90deg,var(--brand-green),#34d399); }
.pdh-card--best::before { background:linear-gradient(90deg,var(--brand-blue),#60a5fa); }

/* =================================================================
   GRID principal: Conversor (izq) + Tabla (der)
   ================================================================= */
.contenedor-2-columnas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px; padding:10px 0 0;
  align-items:stretch;
  max-width:var(--container);
  margin:0 auto;
}
.columna{ min-width:0; display:flex; flex-direction:column; }

/* ---------------------- Panel base (coherencia) ------------------- */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:var(--panel-shadow);
  overflow:hidden;                  /* recorta thead sticky y bordes */
}

/* === Cabecera unificada para TODOS los paneles (idéntica) === */
.section-head{
  display:flex; align-items:center; gap:8px;
  height:48px;                     /* misma altura visual en todos */
  padding:0 16px;                  /* mismo padding lateral */
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--brand-blue),var(--brand-green)) 1;
}
.section-head::after{ content:none; } /* anulamos otras “rayitas” */
.section-title{
  margin:0; line-height:1.15; font-size:16px; font-weight:900; color:var(--brand-blue-deep);
}

/* Separación uniforme del contenido tras la cabecera */
.panel .section-head + *{ margin-top:12px; }

/* ====================== Conversor (izquierda) ==================== */
.conversor-wrapper-modern{ padding:10px 14px 12px; }
.titulo-conversor{ display:none; }

.modo-opciones{
  display:flex; gap:10px; flex-wrap:wrap; margin:10px 4px 12px; justify-content:center;
}
.radio-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#F8FAFC; border:1px solid var(--ink-200); border-radius:999px;
  padding:7px 12px; font-size:13px; color:var(--ink-700); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.radio-pill input{
  appearance:none; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--brand-blue); display:inline-block;
}
.radio-pill input:checked{ background:var(--brand-blue); }
.radio-pill:hover{ border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(37,99,235,.08); }

/* Chips rápidos */
.quick-row{ display:flex; gap:8px; flex-wrap:wrap; margin:0 4px 12px; justify-content:center; }
.quick-amt,.chip{
  border:1px solid var(--ink-200); background:#fff; border-radius:999px;
  padding:6px 10px; font-size:12px; color:var(--ink-700); cursor:pointer; transition:all .15s ease;
}
.quick-amt:hover,.chip:hover{ border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(37,99,235,.10); }

/* Campos del conversor */
.fila-triple{
  display:grid; gap:12px; margin:6px 0 4px;
  grid-template-columns:1fr 54px 1fr;
  grid-template-areas:
    "monto  monto  monto"
    "moneda swap   quiero";
  align-items:end;
}
.gc-monto  { grid-area:monto; }
.gc-moneda { grid-area:moneda; }
.gc-swap   { grid-area:swap;   }
.gc-quiero { grid-area:quiero; }

@media (max-width:720px){
  .fila-triple{
    grid-template-columns:1fr;
    grid-template-areas:
      "monto"
      "moneda"
      "swap"
      "quiero";
  }
}

.grupo-campo{ min-width:0; }
.grupo-campo label{
  display:block; margin:0 0 6px; font-size:12px; font-weight:800; color:var(--ink-700);
}
.grupo-campo input,.grupo-campo select{
  width:100%; height:44px; padding:10px 12px; font-size:14px;
  border:1px solid var(--ink-300); border-radius:10px; background:#fff; outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.grupo-campo input:focus,.grupo-campo select:focus{
  border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Input con icono */
.input-with-icon{ position:relative; }
.input-with-icon .icon-left{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#9aa4b2; font-size:12px;
}
.input-with-icon input{ padding-left:28px; }

/* Botón invertir */
#btn-swap,.swap-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--ink-300); background:#fff; color:var(--brand-blue-deep);
  display:grid; place-items:center; font-size:18px; line-height:1; cursor:pointer;
  transition:all .15s ease;
}
#btn-swap:hover,.swap-btn:hover{
  border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

/* Resultados */
.resultado-modern{ margin:4px 4px 6px; font-size:15px; font-weight:900; color:var(--brand-blue-deep); }
.tc-mini{ margin:0 4px 4px; font-size:12px; color:var(--ink-600); }
.tc-mini strong{ color:var(--brand-blue-deep); }

/* ======================== Tabla (derecha) ======================== */
.casas-cambio.panel{ display:flex; flex-direction:column; }

.tabla-casas-wrapper{
  margin:0; padding:0;
  flex:1 1 auto; min-height:0;
  max-height:330px;
  overflow-y:auto; overflow-x:hidden;
  border-top:0; border-radius:0 0 var(--radius) var(--radius);
}

.tabla-casas{
  width:100%; border-collapse:collapse; font-size:14px; text-align:center;
  table-layout:fixed;
}
.tabla-casas thead{
  position:sticky; top:0; z-index:1;
  background:#F8FAFC; box-shadow:inset 0 -1px 0 var(--panel-border);
}
.tabla-casas th,
.tabla-casas td{ padding:9px 10px; }
.tabla-casas th{ color:var(--ink-800); font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.tabla-casas td{ border-bottom:1px solid var(--panel-border); }
.tabla-casas tbody tr:nth-child(odd){ background:#FBFCFE; }
.tabla-casas tbody tr:hover{ background:#EEF5FF; }
td.mejor-compra{ background:#E9FFE9; font-weight:800; }
td.mejor-venta { background:#FFE9E9; font-weight:800; }
.tabla-casas a{ color:var(--brand-blue); text-decoration:none; font-weight:800; }
.tabla-casas a:hover{ text-decoration:underline; }
.tabla-casas th:first-child, .tabla-casas td:first-child{ text-align:left; }

/* ===================== Igualar proporciones ====================== */
.panel-eq{
  min-height:clamp(320px, 34vw, 380px);
  display:flex; flex-direction:column;
}
.panel-eq.casas-cambio .tabla-casas-wrapper{ flex:1 1 auto; min-height:0; }

/* =================================================================
   Gráfico
   ================================================================= */
.grafica{ max-width:var(--container); margin:14px auto 0; padding:0; }
.grafica .panel{ padding:0 0 12px; }
.chart-container{
  position:relative; height:260px; max-width:780px; margin:12px auto 0;
  border-radius:10px; background:var(--white); box-shadow:0 0 6px rgba(0,0,0,.08);
}
#graficoSunat{ width:100%!important; height:100%!important; display:block; }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width:980px){
  .ads{ display:none; }
  .pdh-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contenedor-2-columnas{ grid-template-columns:1fr; gap:16px; }
  .tabla-casas-wrapper{ max-height:360px; }
}
@media (max-width:560px){
  .pdh-cards{ grid-template-columns:1fr; }
  .pdh-logo{ height:26px; }
  .pdh-value{ font-size:22px; }
  .chart-container{ height:220px; }
}