/* =========================================================
   I2S Minimal Pro 2026 — Scoped UX layer
   Solo afecta lo que esté dentro de .i2s-shell
   ========================================================= */

/* Tokens (ajusta solo si quieres) */
.i2s-shell{
  --i2s-accent: var(--wp--preset--color--primary, #50b4a3);
  --i2s-bg: var(--wp--preset--color--base, #ffffff);
  --i2s-text: var(--wp--preset--color--contrast, #101114);

  --i2s-border: rgba(16,17,20,.14);
  --i2s-border-strong: rgba(16,17,20,.22);

  --i2s-radius: 18px;
  --i2s-radius-sm: 12px;

  --i2s-pad: 22px;
  --i2s-gap: 12px;

  --i2s-shadow: 0 10px 30px rgba(16,17,20,.08);
}

/* Contenedor “card” (minimal pero usable) */
.i2s-shell{
  max-width: 920px;
  margin: 0 auto;
  padding: var(--i2s-pad);
  background: var(--i2s-bg);
  border: 1px solid var(--i2s-border);
  border-radius: var(--i2s-radius);
  box-shadow: var(--i2s-shadow);
}

/* Tipografía/ritmo */
.i2s-shell :is(h1,h2,h3){
  color: var(--i2s-text);
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}
.i2s-shell :is(p,small,.i2s-help){
  color: color-mix(in srgb, var(--i2s-text) 82%, transparent);
}
@supports not (color: color-mix(in srgb, black 50%, white)){
  .i2s-shell :is(p,small,.i2s-help){ color: rgba(16,17,20,.78); }
}

/* ===============================
   Inputs: de “underline” a control usable
   =============================== */
.i2s-shell form{
  display: grid;
  gap: var(--i2s-gap);
}

.i2s-shell form label{
  display: block;
  font-weight: 650;
  color: var(--i2s-text);
  margin: 10px 0 6px 0;
}

.i2s-shell form :is(input, select, textarea){
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  min-height: 46px;
  border-radius: var(--i2s-radius-sm);
  border: 1px solid var(--i2s-border) !important;
  background: rgba(255,255,255,.02) !important;
  color: var(--i2s-text);
  font-size: 16px; /* evita zoom en iOS */
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
}

.i2s-shell form textarea{
  min-height: 140px;
  resize: vertical;
}

.i2s-shell form :is(input, select, textarea):focus{
  border-color: color-mix(in srgb, var(--i2s-accent) 55%, var(--i2s-border-strong)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--i2s-accent) 28%, transparent);
}
@supports not (color: color-mix(in srgb, black 50%, white)){
  .i2s-shell form :is(input, select, textarea):focus{
    box-shadow: 0 0 0 4px rgba(80,180,163,.22);
  }
}

/* Estados disabled */
.i2s-shell form :is(input, select, textarea):disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* ===============================
   Botones/CTA (1 principal + estilos para secundarios)
   =============================== */
.i2s-shell form :is(button, input[type="submit"]){
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 0;
  background: var(--i2s-accent);
  color: #fff;
  font-weight: 750;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .06s ease, filter .12s ease;
}

.i2s-shell form :is(button, input[type="submit"]):hover{
  filter: brightness(0.98);
}
.i2s-shell form :is(button, input[type="submit"]):active{
  transform: translateY(1px);
}

/* Botón secundario (si agregas un Button block debajo del form) */
.i2s-shell .i2s-btn--ghost,
.i2s-shell .wp-block-button__link.i2s-btn--ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 14px;
  background: transparent !important;
  color: var(--i2s-text) !important;
  border: 1px solid var(--i2s-border-strong) !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* ===============================
   Mensajes / errores (genérico para plugins)
   =============================== */
.i2s-shell :is(.error, .errors, .is-error, .field-error, .wpcf7-not-valid-tip, .wpforms-error){
  color: #b42318;
}
.i2s-shell :is(.wpcf7-response-output, .wpforms-confirmation-container, .forminator-response-message){
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--i2s-border);
}

/* =========================================================
   Quote form (tabla): usable en móvil + sticky headers
   Aplica solo si pusiste i2s-shell--quote
   ========================================================= */
.i2s-shell--quote .i2s-table-scroll{
  overflow: auto;
  border: 1px solid var(--i2s-border);
  border-radius: var(--i2s-radius);
  background: var(--i2s-bg);
}

/* Si no puedes envolver la tabla con .i2s-table-scroll, igual mejoramos tabla básica */
.i2s-shell--quote table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 820px; /* permite scroll horizontal en móvil */
}

.i2s-shell--quote th,
.i2s-shell--quote td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--i2s-border);
  vertical-align: middle;
}

.i2s-shell--quote thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--i2s-bg);
  border-bottom: 1px solid var(--i2s-border-strong);
}

.i2s-shell--quote tbody tr:hover td{
  background: color-mix(in srgb, var(--i2s-accent) 6%, transparent);
}
@supports not (color: color-mix(in srgb, black 50%, white)){
  .i2s-shell--quote tbody tr:hover td{ background: rgba(80,180,163,.06); }
}

/* Primera columna “Color” sticky para lectura rápida en scroll horizontal */
.i2s-shell--quote :is(th,td):first-child{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--i2s-bg);
  border-right: 1px solid var(--i2s-border);
  font-weight: 700;
}
.i2s-shell--quote thead th:first-child{ z-index: 4; }

/* Inputs numéricos compactos */
.i2s-shell--quote input[type="number"]{
  text-align: center;
  min-width: 74px;
}

/* Micro-fineprint */
.i2s-shell .i2s-fineprint{
  margin-top: 10px;
  font-size: 12.5px;
  opacity: .78;
}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  .i2s-shell *{ transition: none !important; }
}