/* memorial_ui_v3.css (v3)
   Tipografía + sistema UI (tokens + container + grid) + componentes básicos + helpers mínimos
   Breakpoint único: 1100px
*/

:root{
  /* ===== Colores / UI ===== */
  --color_texto: #fff;
  --color_texto_sec: rgba(255,255,255,0.70);
  --color_panel: #141414;
  --borde_panel: rgba(255,255,255,0.08);
  --sombra_panel: 0 4px 14px rgba(0,0,0,0.35);

  --azul: #0066CC;
  --azul_hover: #0055AA;

  --gris_btn: #3a3a3a;
  --gris_btn_hover: #2f2f2f;

  --radio_panel: 12px;
  --radio_btn: 8px;

  /* ===== Sistema (container + grid + spacing) ===== */
  --gutter_x: clamp(8px, 2.0vw, 18px);
  --gutter_y: clamp(8px, 2.0vw, 18px);

  --gap_1: clamp(8px, 1.8vw, 14px);
  --gap_2: clamp(10px, 2.2vw, 18px);

  --container_max: 100%;
}

*{ box-sizing: border-box; }

body{
  color: var(--color_texto);
  font-family: Arial, Helvetica, sans-serif;
}

/* =========================
   Helpers mínimos (contrato)
   ========================= */
.texto_centrado{ text-align:center; }
.ancho_total{ width:100%; }
.oculto{ display:none; }

/* =========================
   Container de sistema
   ========================= */
.container{
  width: 100%;
  max-width: var(--container_max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--gutter_y) var(--gutter_x);
}

/* =========================
   Grid de sistema
   ========================= */
.grid{
  display: grid;
  gap: var(--gap_1);
  min-width: 0;
}
.grid_gap_2{ gap: var(--gap_2); }

.grid_1{ grid-template-columns: minmax(0, 1fr); }

/* Mobile-first: por defecto 1 columna.
   En desktop (>=1100) habilitamos 2 columnas cuando se use esta clase. */
.grid_2_desktop{ grid-template-columns: minmax(0, 1fr); }
.input_blanco{
  background:#fff;
  color:#000;
}
.input_blanco::placeholder{
  color:#666;
}
.marco_busqueda{
  border:1px solid rgba(255,255,255,0.32);
  border-radius:10px;
  padding:12px;
}
@media (min-width: 1100px){
  .grid_2_desktop{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Contenedor interno (existente)
   ========================= */
.contenedor_interno{
  padding: var(--gutter_y) var(--gutter_x);
}

/* =========================
   Panel reutilizable (existente)
   ========================= */
.panel_base{
  width: 100%;
  background: var(--color_panel);
  border: 1px solid var(--borde_panel);
  border-radius: var(--radio_panel);
  box-shadow: var(--sombra_panel);

  padding: clamp(16px, 2.2vw, 26px) clamp(14px, 2.0vw, 20px);
}

@media (min-width: 1100px){
  .panel_plano_desktop{
    border-radius: 0;
    box-shadow: none;
  }
}

/* =========================
   Tipografía (base)
   ========================= */
.titulo_marca{
  text-align: center;
  font-size: clamp(18px, 4vw, 18px);
  letter-spacing: 1.5px;
  color: #bbbbbb;
  margin-bottom: 4px;
}

.titulo_principal{
  text-align: center;
  font-size: clamp(34px, 8vw, 40px);
  font-weight: 700;
  margin: 0 0 6px 0;
}

.texto_base{
  font-size: clamp(19px, 5.2vw, 20px);
  line-height: 1.6;
  color: #e6e6e6;
}

.texto_ayuda{
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: clamp(15px, 4.2vw, 16px);
  color: rgba(255,255,255,0.65);
}

.texto_nota{
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: clamp(17px, 4.8vw, 18px);
  color: #cccccc;
  line-height: 1.5;
  padding: 8px 0;
}

/* =========================
   Botones (base)
   ========================= */
.btn{
  width: 100%;
  min-width: 0;
  font-size: clamp(19px, 5vw, 20px);
  line-height: 1.2;
  padding: clamp(16px, 3vw, 18px) clamp(14px, 2.5vw, 16px);
  border-radius: var(--radio_btn);
  border: none;
  cursor: pointer;
}

.btn_primario{
  background: var(--azul);
  color: #fff;
}
.btn_primario:hover{ background: var(--azul_hover); }

.btn_secundario{
  background: var(--gris_btn);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.btn_secundario:hover{ background: var(--gris_btn_hover); }

.btn_salida{
  background: var(--gris_btn);
  color: #fff;
}
.btn_salida:hover{ background: var(--gris_btn_hover); }

/* =========================
   Grupo de botones en fila
   ========================= */
.botones_en_fila{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;

  justify-items: center;
}

.botones_en_fila form{
  margin: 0;
  min-width: 0;

  width: 100%;
  display: grid;
  justify-items: center;
}

/* Botones dentro de la fila: ancho relativo a su celda
   - wrap “sano” (no cortes agresivos) */
.botones_en_fila .btn{
  width: 95%;
  max-width: 100%;
  text-align: center;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* =========================
   Mobile (general): compactación única
   ========================= */
@media (max-width: 1099px){

  /* Compactación del sistema (espacios) */
  :root{
    --gutter_x: clamp(6px, 1.6vw, 14px);
    --gutter_y: clamp(6px, 1.6vw, 14px);
    --gap_1: clamp(6px, 1.4vw, 12px);
    --gap_2: clamp(8px, 1.8vw, 14px);
  }

  /* Contenedor interno */
  .contenedor_interno{ padding: 6px; }

  /* Tipografía: ajuste general para que “entre” mejor */
  .titulo_principal{
    font-size: clamp(28px, 6.8vw, 36px);
    margin: 0 0 4px 0;
  }

  .texto_base{
    font-size: clamp(16px, 4.3vw, 18px);
    line-height: 1.5;
  }

  .texto_ayuda{
    font-size: clamp(13px, 3.7vw, 15px);
    margin-top: 4px;
    margin-bottom: 6px;
  }

  .texto_nota{
    font-size: clamp(14px, 3.9vw, 16px);
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 4px 0;
    line-height: 1.4;
  }

  /* Botones: un poco menos altos */
  .btn{
    font-size: clamp(16px, 4.2vw, 18px);
    padding: 12px 14px;
  }
}

/* =========================
   Mobile extra compacto (pantallas bajas)
   ========================= */
@media (max-width: 1099px) and (max-height: 740px){

  :root{
    --gutter_x: 6px;
    --gutter_y: 6px;
    --gap_1: 6px;
    --gap_2: 8px;
  }

  .titulo_marca{ margin-bottom: 2px; }

  .titulo_principal{
    font-size: clamp(26px, 6.2vw, 34px);
    margin: 0 0 2px 0;
  }

  .texto_base{
    font-size: clamp(15px, 4.0vw, 17px);
    line-height: 1.45;
  }

  .btn{
    font-size: clamp(15px, 3.9vw, 17px);
    padding: 10px 12px;
  }

  .texto_nota{
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 3px 0;
  }

  .texto_ayuda{
    margin-bottom: 5px;
  }
}
/* =========================
   Componentes básicos extra (reutilizables)
   ========================= */

/* Input base (genérico, no pisa nada anterior) */
.input_base{
  width:100%;
  min-width:0;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:inherit;
}
.input_base::placeholder{ color: rgba(255,255,255,0.60); }

/* Card base (genérico) */
.card_base{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  padding:12px;
}

.card_header{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items:center;
  min-width:0;
}
.card_header h2{ margin:0; }

.texto_meta{
  opacity:.85;
  margin: 6px 0 0 0;
  padding: 0;
}