/* =====================================================================
   Páginas de cliente · inec.com · ES y PT
   Inicio de sesión, alta de usuario y pedido (y los pasos del pedido,
   que comparten botones y campos).
   Se carga en comunes/paginas/head.php justo después de menu-superior.css.
   Para volver al diseño anterior basta con quitar esa línea.
   Solo cambia el aspecto: no toca nombres de campos, textos ni lo que
   devuelve Velneo. Las secciones de cada página usan :has(); en un
   navegador muy antiguo esas páginas se ven como hasta ahora.
   Colores de la guía de INEC: amarillo #FCCB28 · azul #1B2732
   ===================================================================== */

#content{
  --ui:"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --azul:#1B2732;
  --amarillo:#FCCB28;
  --suave:#5b6672;
  --borde:#cfd6dd;
  --linea:#e4e8ec;
  --fondo-suave:#f5f7f9;
  --rojo:#b42318;
}

/* =====================================================================
   1 · Campos y botones comunes (todas las páginas de cliente y del pedido)
   ===================================================================== */
#content .input-text,
#content .input-text-user,
#content .input-text-user-d,
#content .input-desplegable-user,
#content .nueva-cant,
#content input.input-text-busqueda[type="text"]{
  box-sizing:border-box;
  height:42px;
  margin:0;
  padding:0 12px;
  border:1px solid var(--borde);
  border-radius:10px;
  background:#ffffff;
  color:var(--azul);
  font:400 14px/1.2 var(--ui);
  transition:border-color 150ms ease, box-shadow 150ms ease;
}
#content .input-desplegable-user{padding-right:8px;cursor:pointer}
#content .input-text:hover,
#content .input-text-user:hover,
#content .input-text-user-d:hover,
#content .input-desplegable-user:hover,
#content .nueva-cant:hover,
#content input.input-text-busqueda[type="text"]:hover{border-color:#aab4be}
#content .input-text:focus,
#content .input-text-user:focus,
#content .input-text-user-d:focus,
#content .input-desplegable-user:focus,
#content .nueva-cant:focus,
#content input.input-text-busqueda[type="text"]:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(252,203,40,.6);
}
#content input[type="checkbox"]{
  width:16px;height:16px;margin:0 8px 0 0;accent-color:var(--azul);cursor:pointer;flex:none;
}

/* Botón principal: amarillo INEC */
#content .boton-text-login,
#content .boton-text-user,
#content .boton-text-user-button-aceptar{
  box-sizing:border-box;
  width:auto;
  min-width:160px;
  height:46px;
  margin:0;
  padding:0 26px;
  border:0;
  border-radius:10px;
  background:var(--amarillo) none;
  color:var(--azul);
  font:700 14px/1 var(--ui);
  letter-spacing:.01em;
  cursor:pointer;
  transition:filter 150ms ease, transform 120ms ease;
}
/* Botón secundario: blanco con borde */
#content .boton-text-user-button{
  box-sizing:border-box;
  width:auto;
  height:46px;
  margin:0;
  padding:0 22px;
  border:1px solid var(--borde);
  border-radius:10px;
  background:#ffffff none;
  color:var(--azul);
  font:600 13.5px/1 var(--ui);
  cursor:pointer;
  transition:border-color 150ms ease, background-color 150ms ease, transform 120ms ease;
}
#content .boton-text-user-button-desactivado{
  box-sizing:border-box;
  height:46px;
  margin:0;
  padding:0 22px;
  border:0;
  border-radius:10px;
  background:#eceff2 none;
  color:#8b949d;
  font:600 13.5px/1 var(--ui);
  cursor:not-allowed;
}
#content .boton-text-login:hover,
#content .boton-text-user:hover,
#content .boton-text-user-button-aceptar:hover{filter:brightness(1.05)}
#content .boton-text-user-button:hover{border-color:var(--azul);background:var(--fondo-suave)}
#content .boton-text-login:active,
#content .boton-text-user:active,
#content .boton-text-user-button-aceptar:active,
#content .boton-text-user-button:active{transform:scale(.98)}
#content .boton-text-login:focus-visible,
#content .boton-text-user:focus-visible,
#content .boton-text-user-button-aceptar:focus-visible,
#content .boton-text-user-button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* Botones pequeños del pedido: Cambiar, Añadir y Borrar */
#content .boton-anha,
#content .boton-borrar{
  box-sizing:border-box;
  width:auto;
  height:34px;
  margin:0;
  padding:0 12px;
  border:1px solid var(--borde);
  border-radius:8px;
  background:#ffffff none;
  color:var(--azul);
  font:600 12.5px/1 var(--ui);
  cursor:pointer;
  transition:border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
#content .boton-anha:hover,
#content .boton-borrar:hover{border-color:var(--azul)}
#content .boton-anha:focus-visible,
#content .boton-borrar:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
/* "X Borrar": acción destructiva, en rojo y sin relleno */
#content input.boton-borrar[value^="X"]{border-color:transparent;background:transparent;color:var(--rojo)}
#content input.boton-borrar[value^="X"]:hover{background:#fdecea;border-color:transparent}
/* "Añadir" por referencia: botón azul */
#content input.boton-borrar[type="submit"]{
  height:42px;padding:0 18px;border:0;border-radius:10px;
  background:var(--azul);color:#ffffff;font-size:13.5px;
}
#content input.boton-borrar[type="submit"]:hover{background:#26364a}

/* Enlace "« Volver" de las páginas de cliente */
#content #volver-link{width:auto;margin:6px 0 10px}
#content #volver-link a{font:600 12.5px/1 var(--ui);color:var(--suave);text-decoration:none}
#content #volver-link a:hover{color:var(--azul);text-decoration:underline}
#content #volver-link .atras{color:var(--suave)}

/* =====================================================================
   2 · Inicio de sesión
   ===================================================================== */
#content:has(#login) #cabecera-familia h4{
  margin:8px 0 20px;
  padding:0;
  border:0;
  font:700 26px/1.2 var(--ui);
  color:var(--azul);
  text-transform:lowercase;
}
#content:has(#login) #cabecera-familia h4::first-letter{text-transform:uppercase}

/* solo el bloque de inicio de sesión: las páginas de familia también usan #login para el título */
#content #login:has(> form){
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-areas:"form alta1" "form alta2";
  grid-template-rows:auto 1fr;
  align-items:start;
  gap:16px 24px;
  max-width:760px;
  font:400 13px/1.5 var(--ui);
  color:var(--azul);
}
#content #login > br{display:none}

/* Tarjeta del formulario */
#content #login > form{
  grid-area:form;
  padding:28px 28px 24px;
  background:#ffffff;
  border:1px solid var(--linea);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(27,39,50,.05), 0 12px 32px -20px rgba(27,39,50,.25);
}
#content #login > form table,
#content #login > form tbody,
#content #login > form tr,
#content #login > form td{display:block;width:100%;padding:0}
#content #login > form tr{margin-bottom:14px}
#content #login > form td > div{
  margin:0 0 6px;
  text-align:left;
  font:600 13px/1.3 var(--ui);
  color:var(--azul);
}
#content #login .input-text{width:100%}

/* Fila de "¿Olvidó su contraseña?" y aceptación de condiciones */
#content #login > form td > div:has(.enlace-olvido-margen-izquierda){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin:4px 0 2px;
  font-size:0; /* oculta el separador "|" */
}
#content #login .enlace-olvido-margen-izquierda{
  display:block;
  font:400 12.5px/1.5 var(--ui);
  color:var(--suave);
}
#content #login > form td > div:has(.enlace-olvido-margen-izquierda) > span:first-child{order:2}
#content #login .enlace-olvido-margen-izquierda input[type="checkbox"]{vertical-align:-3px}
#content #login .enlace-olvido-margen-izquierda a{
  margin:0;
  font:600 12.5px/1.5 var(--ui);
  color:var(--azul);
  text-decoration:underline;
  text-decoration-color:rgba(27,39,50,.35);
  text-underline-offset:2px;
}
#content #login .enlace-olvido-margen-izquierda a:hover{text-decoration-color:var(--amarillo)}
#content #login .boton-text-login{width:100%;margin-top:4px}

/* Tarjetas de alta */
#content #login > div{
  position:relative;
  padding:20px 22px;
  background:var(--fondo-suave);
  border:1px solid var(--linea);
  border-radius:16px;
  transition:border-color 150ms ease, background-color 150ms ease;
}
#content #login > div:nth-of-type(1){grid-area:alta1}
#content #login > div:nth-of-type(2){grid-area:alta2}
#content #login > div:hover{border-color:var(--amarillo);background:#ffffff}
#content #login > div h5{
  margin:0 0 8px;
  text-indent:0;
  text-decoration:none;
  font:700 15px/1.3 var(--ui);
  color:var(--azul);
}
#content #login .enlace-normal-margen-derecha a{
  margin:0;
  font:600 13px/1.4 var(--ui);
  color:var(--azul);
  text-decoration:underline;
  text-decoration-color:var(--amarillo);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
#content #login .enlace-normal-margen-derecha a img{display:none}
#content #login .enlace-normal-margen-derecha a::after{content:"";position:absolute;inset:0;border-radius:16px}

/* =====================================================================
   3 · Alta de usuario (nuevo cliente y usuario de cliente existente)
   ===================================================================== */
#content form[name="usuario"]{
  max-width:760px;
  padding:28px 28px 24px;
  box-sizing:border-box;
  background:#ffffff;
  border:1px solid var(--linea);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(27,39,50,.05), 0 12px 32px -20px rgba(27,39,50,.25);
  font:400 13px/1.5 var(--ui);
  color:var(--azul);
}
#content form[name="usuario"] > h4{
  margin:0 0 4px;
  padding:0;
  border:0;
  font:700 26px/1.2 var(--ui);
  color:var(--azul);
}
#content form[name="usuario"] table.alta-nuevo-user,
#content form[name="usuario"] table.alta-nuevo-user tbody{display:block;width:100%}
/* Cada fila de la tabla pasa a ser una fila de dos campos, con la etiqueta encima */
#content form[name="usuario"] table.alta-nuevo-user tr{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  grid-auto-flow:column;
  column-gap:20px;
  row-gap:6px;
  margin:0 0 14px;
}
#content form[name="usuario"] table.alta-nuevo-user td{
  display:block;
  width:auto;
  padding:0;
  text-align:left;
}
/* La dirección ocupa todo el ancho */
#content form[name="usuario"] table.alta-nuevo-user tr:has(.input-text-user-d){grid-template-columns:minmax(0,1fr)}
#content form[name="usuario"] td.user,
#content form[name="usuario"] td.user-campo{
  align-self:end;
  font:600 13px/1.3 var(--ui);
  color:var(--azul);
}
#content form[name="usuario"] .input-text-user,
#content form[name="usuario"] .input-text-user-d,
#content form[name="usuario"] .input-desplegable-user{width:100%}
/* Títulos de sección: Datos de usuario, Datos de acceso web, Datos fiscales */
#content form[name="usuario"] table.alta-nuevo-user td:only-child{grid-column:1 / -1;grid-row:1 / -1}
#content form[name="usuario"] table.alta-nuevo-user h3{
  margin:18px 0 2px;
  padding:0 0 8px;
  border-bottom:1px solid var(--linea);
  font:700 16px/1.3 var(--ui);
  color:var(--azul);
}
#content form[name="usuario"] table.alta-nuevo-user tr:has(h3:empty){display:none}

/* Última fila: condiciones y botón Avanzar */
#content form[name="usuario"] table.alta-nuevo-user:last-of-type tr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--linea);
}
#content form[name="usuario"] table.alta-nuevo-user:last-of-type td:empty{display:none}
#content form[name="usuario"] .enlace-olvido-margen-izquierda{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  font:400 13px/1.5 var(--ui);
  color:var(--suave);
}
#content form[name="usuario"] .enlace-olvido-margen-izquierda input[type="checkbox"]{order:-1}
#content form[name="usuario"] .enlace-olvido-margen-izquierda a{
  margin:0;
  font:600 13px/1.5 var(--ui);
  color:var(--azul);
  text-decoration:underline;
  text-decoration-color:rgba(27,39,50,.35);
  text-underline-offset:2px;
}

/* =====================================================================
   4 · Pedido (la cesta)
   Solo se aplica donde está la tabla de líneas del pedido (cabeceras td.ped).
   La ficha de producto usa otras clases y no se ve afectada.
   ===================================================================== */
/* Barra "Añadir por referencia" */
#content:has(td.ped) table[width="60%"]{
  display:block;
  width:auto;
  margin:6px 0 18px;
  padding:14px 18px;
  background:var(--fondo-suave);
  border:1px solid var(--linea);
  border-radius:14px;
  font:600 13px/1.3 var(--ui);
  color:var(--azul);
}
#content:has(td.ped) table[width="60%"] tbody,
#content:has(td.ped) table[width="60%"] tr{display:flex;align-items:center;gap:14px}
#content:has(td.ped) table[width="60%"] td{padding:0}
#content:has(td.ped) table[width="60%"] form{display:flex;align-items:center;gap:8px;margin:0}
#content:has(td.ped) table[width="60%"] input.input-text-busqueda[type="text"]{width:220px}

/* Tabla de líneas del pedido */
#content:has(td.ped) table:has(td.ped){
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#ffffff;
  border:1px solid var(--linea);
  border-radius:14px;
  overflow:hidden;
  font:400 13px/1.4 var(--ui);
  color:var(--azul);
}
#content:has(td.ped) td.ped{
  padding:11px 12px;
  background:var(--fondo-suave);
  border-bottom:1px solid var(--linea);
  color:var(--suave);
  font:600 12px/1.2 var(--ui);
  text-align:left;
  white-space:nowrap;
}
#content:has(td.ped) td.ped:nth-child(n+3):nth-child(-n+5),
#content:has(td.ped) td.ped:nth-child(7){text-align:right}
#content:has(td.ped) td.ped:nth-child(6){text-align:center}
#content:has(td.ped) table:has(td.ped) td{
  padding:12px;
  border-bottom:1px solid #eef1f4;
  vertical-align:middle;
}
#content:has(td.ped) table:has(td.ped) td.cod{
  font:600 12.5px/1.3 var(--ui);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#content:has(td.ped) table:has(td.ped) td.codfab{
  padding-top:0;
  font:italic 400 11.5px/1.3 var(--ui);
  color:var(--suave);
}
#content:has(td.ped) table:has(td.ped) img[src$="lupa.gif"]{display:none}
#content:has(td.ped) table:has(td.ped) td:has(> img[src$="lupa.gif"]){width:0;padding:0}
#content:has(td.ped) table:has(td.ped) td a{
  font:600 13px/1.35 var(--ui);
  color:var(--azul);
  text-decoration:none;
}
#content:has(td.ped) table:has(td.ped) td a:hover{text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px}
#content:has(td.ped) table:has(td.ped) td form{
  display:inline-flex;align-items:center;gap:6px;margin:0;
}
#content:has(td.ped) table:has(td.ped) .nueva-cant{width:54px;height:34px;padding:0 6px;text-align:center;font-size:13px}
#content:has(td.ped) table:has(td.ped) td.euro{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-align:right;
}
#content:has(td.ped) table:has(td.ped) td.right{
  text-align:right;
  color:var(--suave);
}
/* Filas de totales: sin líneas y con el total final destacado */
#content:has(td.ped) table:has(td.ped) tr:has(td.right) td{border-bottom:0;padding-top:8px;padding-bottom:8px}
#content:has(td.ped) table:has(td.ped) tr:last-child td.euro b{font-size:18px}
/* Sin sesión iniciada */
#content:has(td.ped) td.tabla-cantidad-dato{
  padding:36px 16px;
  border-bottom:0;
  background:#ffffff;
  text-align:center;
  font:500 14px/1.5 var(--ui);
  color:var(--suave);
}
/* Botones Realizar pedido / Eliminar pedido */
#content:has(td.ped) form[name="formulario"] table td{padding:16px 12px 0 0}
/* Aviso de gastos de gestión: aviso informativo, no error */
#content #texto-gestion{
  box-sizing:border-box;
  width:100%;
  margin:14px 0;
  padding:12px 16px;
  background:#fff8e0;
  border:1px solid #f1d27a;
  border-radius:12px;
  color:#4a3d06;
  font:400 13px/1.5 var(--ui);
}

/* Sin movimiento si el usuario lo tiene desactivado */
@media (prefers-reduced-motion:reduce){
  #content input,
  #content #login > div{transition:none}
  #content .boton-text-login:active,
  #content .boton-text-user:active,
  #content .boton-text-user-button-aceptar:active,
  #content .boton-text-user-button:active{transform:none}
}