/* =========================================================================
   Campos del holding — capa común de formularios (2026-10-05)
   -------------------------------------------------------------------------
   Se inyecta en las 13 plataformas desde nginx (snippets/holding-app-*.conf,
   junto a /_app/app.js) y se sirve en /_holding/campos.css. Llega a todo:
   administración, área de cliente, portal de colaboradores, módulos
   compartidos (.fx, .cc, .cb, .tc…) y apps de escritorio/móvil.

   Qué arregla, sea cual sea el CSS de la casa:
   · texto recortado: altura fija + padding grande dejaban la línea cortada
     (se fuerza height:auto con alto mínimo y line-height sano);
   · campos diminutos: alto mínimo táctil de 44 px (48 px en móvil, 52 px en
     pantallas grandes / TV) y anchura que nunca se sale de su caja;
   · zoom de iOS al enfocar: 16 px mínimos en pantallas táctiles/pequeñas;
   · desplegables con el texto cortado bajo la flecha;
   · rejillas de 2–4 columnas que en móvil/tablet dejaban campos de 80 px.

   No toca casillas, radios, deslizadores, color, ficheros ni botones.
   Para excluir un campo o un bloque: data-campos="libre".
   ========================================================================= */

/* --- 1. Campos de texto, números, fechas y desplegables ---------------- */
:is(
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
            [type="hidden"], [type="file"], [type="submit"], [type="button"],
            [type="reset"], [type="image"], [type="search"]),
  select:not([multiple], [size]:not([size="1"]))
):not([data-campos="libre"], [data-campos="libre"] *, [role="search"] *, [cmdk-root] *, nav *, [aria-hidden="true"]) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 2.75rem !important;           /* 44 px */
  line-height: 1.4 !important;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* Que un campo pueda encoger dentro de flex/grid sin salirse (especificidad
   cero: cualquier min-width de la casa o de las tablas manda). */
:where(input, select, textarea) {
  min-width: 0;
}

/* Campos de búsqueda: sin forzar alto (suelen ir dentro de barras con alto
   propio), pero sin dejar el texto cortado. */
input[type="search"]:not([data-campos="libre"], [data-campos="libre"] *) {
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  min-width: 0;
  max-width: 100%;
}

/* Letra mínima de 14 px en PC: los campos con text-xs / 11–13 px de las
   plataformas y los módulos compartidos (.fx, .cc, .tc, .cb, .dc, .ce) se
   leían diminutos. No reduce nunca un campo que ya sea mayor. */
:is(
  :is([class~="text-xs"], [class*="text-[10px]"], [class*="text-[11px]"], [class*="text-[12px]"], [class*="text-[13px]"], [class*="text-[0.7"], [class*="text-[0.8"]),
  :is(.fx, .cc, .tc, .cb, .dc, .ce, .fx-huecos) :is(input, select, textarea)
):is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):not([data-campos="libre"], [data-campos="libre"] *) {
  font-size: max(14px, 0.875rem) !important;
}

/* Rejillas de 3+ columnas (líneas de factura, fecha día/mes/año…): relleno
   lateral compacto para que el texto quepa entero en campos estrechos.
   Nunca se fuerza relleno a la derecha del desplegable: la flecha nativa ya
   tiene su sitio y forzarlo cortaba «Día»/«Año» en Hawk. */
:is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .fecha-partes) > :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"], [data-campos="libre"], [class*="pl-"], [class*="ps-"]), select:not([data-campos="libre"], [class*="pl-"], [class*="ps-"])),
:is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .fecha-partes) > :is(div, label) > :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"], [data-campos="libre"], [class*="pl-"], [class*="ps-"]), select:not([data-campos="libre"], [class*="pl-"], [class*="ps-"])) {
  padding-inline-start: 0.75rem !important;
}
:is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .fecha-partes) > input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"], [data-campos="libre"], [type="password"], :has(~ button, ~ svg, ~ [class*="icon"], ~ [class*="eye"])),
:is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .fecha-partes) > :is(div, label) > input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"], [data-campos="libre"], [type="password"], :has(~ button, ~ svg, ~ [class*="icon"], ~ [class*="eye"])) {
  padding-inline-end: 0.75rem !important;
}

/* Campos numéricos estrechos (rejillas compactas y tablas): sin las flechas
   de subir/bajar, que se comían el sitio del texto («Precio…»). Las teclas
   de flecha siguen funcionando. */
:is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .fecha-partes, td) input[type="number"]:not([data-campos="libre"])::-webkit-inner-spin-button,
:is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .fecha-partes, td) input[type="number"]:not([data-campos="libre"])::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .fecha-partes, td) input[type="number"]:not([data-campos="libre"]) {
  -moz-appearance: textfield;
  appearance: textfield;
}

select option,
select optgroup {
  font-size: 1rem;
  line-height: 1.5;
  white-space: normal;
}

/* Fechas y horas: en iOS/Safari se encogen sin valor y se salen de la caja. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: auto;
}
input::-webkit-date-and-time-value {
  text-align: start;
  min-height: 1.4em;
}

/* Letra diminuta que el CSS no puede detectar (p. ej. 0.78rem = 12,5 px en el
   CRM de Barracuda): /_holding/campos.js marca esos campos y aquí suben a
   14 px. En móvil manda la regla de 16 px. */
[data-campos-letra]:not([data-campos="libre"]) {
  font-size: 14px !important;
}

/* --- 2. Áreas de texto -------------------------------------------------- */
textarea:not([data-campos="libre"], [data-campos="libre"] *) {
  box-sizing: border-box !important;
  min-height: 6.5rem !important;
  line-height: 1.5 !important;
  max-width: 100%;
  min-width: 0;
  resize: vertical;
  overflow-wrap: break-word;
}

/* --- 3. Tablas con campos (líneas de factura, anexos, huecos…) --------- */
td :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"]), select):not([data-campos="libre"], [data-campos="libre"] *) {
  min-width: 6.5rem;
}
td input:is([type="text"], [type="email"], [type="url"], :not([type])):not([data-campos="libre"]),
td select:not([data-campos="libre"]) {
  min-width: 9rem;
}

/* --- 4. Contenedores: que un campo pueda encoger sin salirse ------------ */
:where([class*="grid-cols-"], [style*="grid-template-columns"], [class~="grid"]) > :where(div, label, p, fieldset, section):where(:has(> input, > select, > textarea, > div > input, > div > select)) {
  min-width: 0;
}
:is(label, fieldset) {
  min-width: 0;
}
fieldset {
  max-width: 100%;
}

/* --- 5. Móvil y pantallas táctiles -------------------------------------- */
@media (max-width: 767.98px), (pointer: coarse) {
  :root:root body :is(
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
              [type="hidden"], [type="file"], [type="submit"], [type="button"],
              [type="reset"], [type="image"]),
    select,
    textarea
  ):not([data-campos="libre"], [data-campos="libre"] *) {
    font-size: max(16px, 1em) !important;   /* sin zoom de iOS al enfocar */
  }
}

@media (max-width: 767.98px) {
  :is(
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
              [type="hidden"], [type="file"], [type="submit"], [type="button"],
              [type="reset"], [type="image"], [type="search"]),
    select:not([multiple], [size]:not([size="1"]))
  ):not([data-campos="libre"], [data-campos="libre"] *, [role="search"] *, [cmdk-root] *, nav *, [aria-hidden="true"]) {
    min-height: 3rem !important;            /* 48 px */
  }

  /* Rejillas de formulario de 2+ columnas → una sola columna. Solo las que
     llevan campos de verdad dentro (no calendarios ni tarjetas de opciones). */
  :is([class*="grid-cols-"], [style*="grid-template-columns"], .form-row, .row-2, .fila, .grid-2, .grid-3, .grid-4, [class*="2col"], [class*="two-col"], [class*="grid-2"], [class*="form-grid"]):has(
      > :is(div, label, p, fieldset, section) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea),
      > :is(div, label, p, fieldset, section) > :is(div, span) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea)
    ):not(:has(> [class*="col-span-"]), [class*="grid-cols-["], [data-campos="libre"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* …y dentro de esa columna, cada campo ocupa todo el ancho. */
  :is([class*="grid-cols-"]:not([class*="grid-cols-["]), [style*="grid-template-columns"], .form-row, .row-2, .fila, .grid-2, .grid-3, .grid-4, [class*="2col"], [class*="two-col"], [class*="grid-2"], [class*="form-grid"])
    > :is(div, label, p, fieldset, section)
    > :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):not([data-campos="libre"], [aria-hidden="true"]) {
    width: 100%;
  }
}

/* Tablet: rejillas de 3+ columnas de campos → dos columnas. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :is([class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"], [class*="grid-cols-6"], .grid-3, .grid-4):has(
      > :is(div, label, p, fieldset, section) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea),
      > :is(div, label, p, fieldset, section) > :is(div, span) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea)
    ):not(:has(> [class*="col-span-"]), [class*="grid-cols-["], [data-campos="libre"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- 6. Pantallas grandes y TV ------------------------------------------ */
@media (min-width: 1920px) {
  :root:root body :is(
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"],
              [type="hidden"], [type="file"], [type="submit"], [type="button"],
              [type="reset"], [type="image"], [type="search"]),
    select:not([multiple], [size]:not([size="1"]))
  ):not([data-campos="libre"], [data-campos="libre"] *, [role="search"] *, [cmdk-root] *, nav *, [aria-hidden="true"]) {
    min-height: 3.25rem !important;         /* 52 px */
    font-size: max(16px, 1em) !important;
  }
  :root:root body textarea:not([data-campos="libre"], [data-campos="libre"] *) {
    font-size: max(16px, 1em) !important;
  }
}