/*
 * Los colores de la casa, en todo el camino de compra.
 *
 * Son los mismos de todas las maquetas —el naranja, el papel crema, la tinta— para que la
 * web se vea de una pieza y no como tres sitios pegados.
 */

:root{
  --jr-papel:#fdfaf6; --jr-papel-2:#f2ebe2; --jr-tarjeta:#fff;
  --jr-tinta:#221812; --jr-tinta-2:#7d7066; --jr-linea:#e6dbcd;
  --jr-naranja:#f26a1b; --jr-naranja-osc:#c4470a; --jr-verde:#2e7d32; --jr-rojo:#c62828;
  --jr-rotulo:"Helvetica Neue Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  /* La misma letra con gracia de la portada: la del cartel del cocinero. */
  --jr-serif:"Cambria","Constantia","Georgia","Times New Roman",serif;
  --jr-sombra:0 1px 2px rgba(34,24,18,.05),0 6px 18px rgba(34,24,18,.06);
}

body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout{
  background:var(--jr-papel-2);
}

/* ---------- Entrar y registrarse ---------- */

.jr-entrada{ max-width:660px; margin:0 auto; padding:8px 14px 50px; color:var(--jr-tinta); }

/* ---------- LAS TRES PANTALLAS ----------
   Primero las dos puertas; cada una lleva a lo suyo. Antes estaban las dos cosas juntas en
   dos columnas y confundía —«¿esto es para entrar o para hacerme la cuenta?»—, y en el
   teléfono el registro caía tan abajo que quien no se desplazara no lo veía nunca.
   Se enseña una sola, la que diga `data-vista`, que la pone el PHP y la cambia el guion. */
.jr-entrada [data-pantalla]{ display:none; }
.jr-entrada[data-vista="entrar"]   [data-pantalla="entrar"],
.jr-entrada[data-vista="registro"] [data-pantalla="registro"]{ display:block !important; }
.jr-entrada[data-vista="puertas"]  [data-pantalla="puertas"]{ display:grid !important; }

.jr-puertas{ gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .jr-puertas{ grid-template-columns:1fr; } }

/* Las mismas puertas de la portada, en pequeño: tarjeta, rótulo, dos líneas y la flecha. */
.jr-puerta{
  display:flex; flex-direction:column; gap:5px; text-decoration:none; color:inherit;
  background:var(--jr-tarjeta); border:1px solid var(--jr-linea); border-radius:14px;
  padding:20px 20px 18px; box-shadow:var(--jr-sombra);
}
.jr-puerta b{
  font-family:var(--jr-rotulo); font-size:23px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--jr-tinta); line-height:1.1;
}
.jr-puerta span{ font-size:13.5px; color:var(--jr-tinta-2); }
.jr-puerta i{ font-style:normal; font-weight:700; color:var(--jr-naranja); margin-top:auto; padding-top:10px; }
.jr-puerta:hover{ border-color:var(--jr-naranja); }
.jr-puerta:hover b{ color:var(--jr-naranja-osc); }
.jr-puerta:focus-visible{ outline:2px solid var(--jr-naranja); outline-offset:2px; }

.jr-volver{
  display:inline-block; margin:0 0 10px; font-size:13px; font-weight:600;
  color:var(--jr-tinta-2); text-decoration:none;
}
.jr-volver:hover{ color:var(--jr-naranja-osc); }

/* EL TEMA METE SU PROPIO CARTEL «Iniciar sesión O Regístrate», enorme y en letra de palo,
   justo encima del nuestro. Dos títulos peleados en la misma pantalla. Se quita, y queda
   solo el saludo de la casa. Solo se quita cuando NO hay sesión abierta: cuando el cliente
   ya entró, esa lista es su menú de la cuenta y ahí sí hace falta. */
body.woocommerce-account:not(.logged-in) .owp-account-links{ display:none !important; }

/* El saludo va con la letra con gracia, la de la portada, y en minúsculas.
   Se escribe con `.jr-entrada` delante y con `!important` porque el tema le pone a TODOS
   los h1 su letra de palo y las mayúsculas; comprobado en la pantalla, sin esto gana él. */
.jr-cima{ text-align:center; margin:6px 0 24px; }
.jr-entrada .jr-cima h1{
  font-family:var(--jr-serif) !important; text-transform:none !important;
  font-weight:400; font-size:34px; letter-spacing:.02em; line-height:1.25;
  color:var(--jr-tinta); margin:0;
}
.jr-entrada .jr-cima h1 em{ font-style:normal; font-weight:700; color:var(--jr-naranja-osc); }
@media (max-width:560px){ .jr-entrada .jr-cima h1{ font-size:27px; } }


.jr-caja{
  background:var(--jr-tarjeta); border:1px solid var(--jr-linea); border-radius:14px;
  padding:20px; box-shadow:var(--jr-sombra);
}
.jr-caja h2{
  font-family:var(--jr-rotulo); font-size:16px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--jr-naranja); margin:0 0 14px;
}
.jr-sub{
  font-family:var(--jr-rotulo); font-size:14px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--jr-tinta-2); margin:20px 0 8px; padding-top:14px; border-top:1px solid var(--jr-linea);
}
.jr-apunte{ color:var(--jr-tinta-2); font-size:13px; margin:0 0 14px; }

.jr-rejilla{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.jr-rejilla-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:560px){ .jr-rejilla, .jr-rejilla-3{ grid-template-columns:1fr; } }

/* Lo que se deduce de la zona —a qué Alamar pertenece— dicho en la propia pantalla, para
   que el cliente lo vea y pueda corregirlo: es su casa, él sabe más que nosotros. */
.jr-aviso-zona{ color:var(--jr-naranja-osc) !important; font-weight:600; }

.jr-campo{ display:flex; flex-direction:column; gap:5px; margin:0 0 12px; }
.jr-campo label{ font-size:13px; font-weight:600; }
.jr-campo small{ font-size:12px; color:var(--jr-tinta-2); }
.jr-obliga{ color:var(--jr-naranja-osc); margin-left:2px; }
.jr-suelto{ font-weight:400; color:var(--jr-tinta-2); margin-left:4px; }

.jr-entrada input.input-text, .jr-entrada select,
.jr-direcciones input.input-text, .jr-direcciones select{
  font:inherit; font-size:15px; padding:10px 12px; width:100%; box-sizing:border-box;
  border:1px solid var(--jr-linea); border-radius:9px;
  background:var(--jr-papel); color:var(--jr-tinta);
}
.jr-entrada input.input-text:focus, .jr-entrada select:focus,
.jr-direcciones input.input-text:focus, .jr-direcciones select:focus{
  outline:2px solid var(--jr-naranja); outline-offset:1px; border-color:var(--jr-naranja);
}

/* El teléfono: el país a la izquierda y el número al lado, en la misma línea. En el
   teléfono la lista de países se queda un poco más estrecha para que quepan los dos. */
.jr-tel{ display:flex; gap:8px; align-items:center; }
.jr-tel select{ flex:0 1 46%; min-width:0; }
.jr-tel input.input-text{ flex:1 1 auto; min-width:0; }
@media (max-width:400px){ .jr-tel select{ flex-basis:42%; } }

/* Las casillas de «Otro…»: no existen hasta que hacen falta. */
.jr-oculto{ display:none !important; }

/* El ojito para ver la contraseña: en el móvil las teclas están pegaditas. */
.jr-con-ojo{ position:relative; display:block; }
.jr-con-ojo input{ padding-right:46px !important; }
.jr-ojo{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer; font-size:17px; line-height:1; padding:6px;
}

/* La pregunta secreta, con el mismo recuadro punteado de la maqueta. */
.jr-pregunta{
  border:1px dashed var(--jr-naranja); border-radius:11px; padding:14px;
  background:rgba(242,106,27,.06); margin:0 0 14px;
}
.jr-pregunta > p{ margin:0 0 10px; font-size:13px; color:var(--jr-tinta-2); }
.jr-pregunta strong{ color:var(--jr-tinta); }

.jr-boton{
  width:100%; background:var(--jr-naranja) !important; color:#fff !important; border:0 !important;
  border-radius:10px !important; font-size:15.5px !important; font-weight:700 !important;
  padding:13px 20px !important; cursor:pointer; margin-top:6px;
}
.jr-boton:hover{ background:var(--jr-naranja-osc) !important; }

.jr-recordar{ font-size:13.5px; color:var(--jr-tinta-2); margin:2px 0 12px; }
.jr-olvide{ text-align:center; margin:12px 0 0; font-size:13.5px; }
.jr-olvide a{ color:var(--jr-naranja-osc); font-weight:600; text-decoration:none; }
.jr-olvide a:hover{ text-decoration:underline; }

/* ---------- El carrito, el pago y mi cuenta ---------- */

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit{
  background:var(--jr-naranja) !important; color:#fff !important; border:0 !important;
  border-radius:10px !important; font-weight:700 !important; padding:11px 20px !important;
  text-transform:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--jr-naranja-osc) !important; }

.woocommerce table.shop_table, .woocommerce-checkout #order_review,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  background:var(--jr-tarjeta); border:1px solid var(--jr-linea) !important;
  border-radius:14px !important; box-shadow:var(--jr-sombra);
}
.woocommerce table.shop_table th{
  font-family:var(--jr-rotulo); letter-spacing:.06em; text-transform:uppercase;
  color:var(--jr-tinta-2); font-size:13px;
}
.woocommerce .woocommerce-Price-amount{ font-family:var(--jr-rotulo); color:var(--jr-naranja-osc); }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-selection{
  border:1px solid var(--jr-linea) !important; border-radius:9px !important;
  background:var(--jr-papel) !important; padding:10px 12px !important;
}

/* LOS AVISOS.
   Aquí estuvo un fallo feo del 30-ago: se les cambió el fondo a claro y NO se les cambió
   la letra, que el tema la trae blanca. Resultado: blanco sobre blanco. El cliente se
   quedaba mirando un recuadro vacío sin saber qué había hecho mal. Por eso el color de la
   letra va escrito, y con `!important`: el aviso que no se lee es peor que ninguno. */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--jr-tarjeta) !important; color:var(--jr-tinta) !important;
  border-radius:0 0 12px 12px; font-size:14.5px;
}
.woocommerce-message li, .woocommerce-info li, .woocommerce-error li,
.woocommerce-message strong, .woocommerce-info strong, .woocommerce-error strong{
  color:var(--jr-tinta) !important;
}
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a{ color:var(--jr-naranja-osc) !important; }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--jr-naranja) !important; }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--jr-naranja) !important; }
.woocommerce-error{ border-top-color:var(--jr-rojo) !important; }
.woocommerce-error::before{ color:var(--jr-rojo) !important; }

/* EL CAMPO QUE ESTÁ MAL SE MARCA, y el porqué va debajo de él.
   Un aviso arriba del todo no sirve: en el teléfono el cliente está a mitad del formulario
   y no lo ve nunca. Tiene que verlo pegado a la casilla que tiene que arreglar. */
.jr-entrada .jr-campo.jr-malo input.input-text,
.jr-entrada .jr-campo.jr-malo select,
.jr-direcciones .jr-campo.jr-malo input.input-text,
.jr-direcciones .jr-campo.jr-malo select{
  border-color:var(--jr-rojo) !important; background:#fdf3f2 !important;
}
.jr-entrada .jr-campo.jr-malo > label, .jr-direcciones .jr-campo.jr-malo > label{ color:var(--jr-rojo); }
.jr-error{
  display:block; font-size:12.5px; font-weight:600; color:var(--jr-rojo); margin-top:2px;
}
.jr-error::before{ content:"▲ "; }

/* ---------- MIS DIRECCIONES DE ENTREGA ----------
   Una pantalla aparte, dentro de la cuenta, y a propósito: al registrarse no se agobia al
   cliente. Aquí apunta con calma las que quiera —la suya, la de su mamá, la de un amigo—
   cada una con SU nombre y SU teléfono de quien recibe. */

.jr-lista-dir{ display:grid; gap:12px; margin:0 0 18px; }
.jr-tarjeta-dir{
  position:relative; background:var(--jr-tarjeta); border:1px solid var(--jr-linea);
  border-radius:14px; padding:16px 16px 12px; box-shadow:var(--jr-sombra);
}
.jr-tarjeta-dir.jr-es-principal{ border-color:var(--jr-naranja); }
.jr-tarjeta-dir b{ font-size:15.5px; }
.jr-tel-dir{ color:var(--jr-tinta-2); font-size:13.5px; margin-left:8px; }
.jr-tarjeta-dir p{ margin:6px 0 0; font-size:13.5px; color:var(--jr-tinta); }
.jr-tarjeta-dir .jr-ref{ color:var(--jr-tinta-2); font-size:12.5px; }
.jr-marca{
  position:absolute; top:-9px; right:14px; background:var(--jr-naranja); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:99px;
}
.jr-acciones-dir{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--jr-linea); }
.jr-acciones-dir a, .jr-acciones-dir button{
  background:none; border:0; padding:0; font:inherit; font-size:13px; font-weight:600;
  color:var(--jr-naranja-osc); cursor:pointer; text-decoration:none;
}
.jr-acciones-dir a:hover, .jr-acciones-dir button:hover{ text-decoration:underline; }
.jr-acciones-dir .jr-borrar{ color:var(--jr-rojo); }
.jr-enlinea{ display:inline; margin:0; }

/* El botón de «apuntar otra» va como enlace grande, no como botón de página entera. */
.jr-boton-linea{
  display:inline-block; width:auto !important; text-decoration:none; text-align:center;
  font-size:14px !important; padding:11px 20px !important;
}

.jr-form-dir{ margin-top:6px; }
.jr-form-dir h2{ margin-bottom:6px; }

/* ---------- Al pagar: la dirección se ESCOGE, no se vuelve a escribir ---------- */

.jr-escoger-dir{ display:grid; gap:10px; margin:0 0 12px; }
.jr-opcion-dir{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  background:var(--jr-tarjeta); border:1px solid var(--jr-linea); border-radius:12px; padding:13px;
}
.jr-opcion-dir:hover{ border-color:var(--jr-naranja); }
.jr-opcion-dir input{ margin-top:3px; flex:none; }
.jr-opcion-dir small{ color:var(--jr-tinta-2); font-size:12.5px; }
.jr-opcion-dir:has(input:checked){ border-color:var(--jr-naranja); background:rgba(242,106,27,.05); }
.jr-sin-dir{ border:1px dashed var(--jr-naranja); border-radius:11px; padding:14px;
  background:rgba(242,106,27,.06); font-size:13.5px; }
.jr-sin-dir a{ color:var(--jr-naranja-osc); font-weight:700; }

/* El tema le pone a TODOS los títulos su letra de palo y un tamaño de cartel. Dentro de
   nuestras pantallas mandan los nuestros: pasó igual con el saludo de la entrada. */
.jr-entrada .jr-caja h2, .jr-direcciones .jr-caja h2{
  font-family:var(--jr-rotulo) !important; font-size:16px !important; line-height:1.2 !important;
  letter-spacing:.09em !important; text-transform:uppercase !important;
  color:var(--jr-naranja) !important; margin:0 0 14px !important;
}
.jr-entrada .jr-sub, .jr-direcciones .jr-sub{
  font-family:var(--jr-rotulo) !important; font-size:14px !important; line-height:1.2 !important;
  letter-spacing:.09em !important; text-transform:uppercase !important;
  color:var(--jr-tinta-2) !important; margin:20px 0 8px !important;
}

/* El tema pinta CUALQUIER botón de formulario con su color; estos tres son enlaces de
   texto, no botones de acción. Van con `!important` porque si no gana él. */
.jr-acciones-dir button, .jr-acciones-dir button:hover{
  background:none !important; border:0 !important; padding:0 !important;
  color:var(--jr-naranja-osc) !important; font-size:13px !important; font-weight:600 !important;
  border-radius:0 !important; box-shadow:none !important; text-transform:none !important;
}
.jr-acciones-dir .jr-borrar, .jr-acciones-dir .jr-borrar:hover{ color:var(--jr-rojo) !important; }

/* ---------- La flecha de volver ----------
   Siempre a la vista, abajo a la izquierda (a la derecha está la de subir del tema). */
.jr-atras{
  position:fixed; left:14px; bottom:14px; z-index:99990;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--jr-tarjeta); color:var(--jr-naranja-osc);
  border:1px solid var(--jr-linea); border-radius:50%;
  box-shadow:0 2px 6px rgba(34,24,18,.12), 0 8px 20px rgba(34,24,18,.10);
  text-decoration:none;
}
.jr-atras:hover{ background:var(--jr-naranja); color:#fff; border-color:var(--jr-naranja); }
.jr-atras svg{ display:block; margin-right:2px; }   /* la flecha se ve centrada así */
@media (max-width:560px){ .jr-atras{ left:10px; bottom:10px; width:44px; height:44px; } }
@media print{ .jr-atras{ display:none; } }

/* ---------- El menú de las tres rayitas ----------
   El mismo panel de la portada, para las páginas que no lo tenían: en la tienda el botón
   de las rayitas era un dibujo y no hacía nada. */
.jr-velo{ position:fixed; inset:0; z-index:99991; background:rgba(34,24,18,.45); }
.jr-menu{
  position:fixed; top:0; bottom:0; left:0; z-index:99992;
  width:min(88vw, 360px); display:flex; flex-direction:column;
  background:var(--jr-tarjeta); box-shadow:0 0 40px rgba(34,24,18,.28);
  transform:translateX(-102%); transition:transform .22s ease;
}
.jr-menu[data-abierto]{ transform:none; }
@media (prefers-reduced-motion:reduce){ .jr-menu{ transition:none; } }

.jr-menu-cabeza{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; background:var(--jr-naranja); color:#fff;
}
.jr-menu-cabeza b{ font-family:var(--jr-rotulo); font-size:19px; letter-spacing:.08em; text-transform:uppercase; }
.jr-menu-cerrar{ border:0; background:none; color:#fff; font-size:26px; line-height:1; cursor:pointer; padding:0 4px; }
.jr-menu-cuerpo{ flex:1; overflow-y:auto; padding:6px 0 18px; }

.jr-menu .jr-fila{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:14px 16px; text-decoration:none; color:var(--jr-tinta);
  font-size:15px; border:0; background:none; text-align:left;
}
.jr-menu .jr-fila:hover{ background:var(--jr-papel-2); }
.jr-menu .jr-quien{ border-bottom:1px solid var(--jr-linea); margin-bottom:6px; padding:16px; }
.jr-menu .jr-avatar{
  width:42px; height:42px; border-radius:999px; flex:none; display:grid; place-items:center;
  background:var(--jr-naranja); color:#fff;
}
.jr-menu .jr-avatar svg{ width:23px; height:23px; }
.jr-menu .jr-quien b{ display:block; font-size:16px; }
.jr-menu .jr-dato{ font-size:12.5px; color:var(--jr-tinta-2); }
.jr-menu .jr-salir{ margin-top:8px; border-top:1px solid var(--jr-linea); color:var(--jr-rojo); font-weight:600; }

/* El botón de rayitas para las páginas que no traen ninguno. Va encima de la flecha. */
.jr-rayitas{
  position:fixed; left:14px; bottom:68px; z-index:99990;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--jr-tarjeta); color:var(--jr-naranja-osc);
  border:1px solid var(--jr-linea); border-radius:50%; cursor:pointer;
  box-shadow:0 2px 6px rgba(34,24,18,.12), 0 8px 20px rgba(34,24,18,.10);
}
.jr-rayitas:hover{ background:var(--jr-naranja); color:#fff; border-color:var(--jr-naranja); }
@media (max-width:560px){ .jr-rayitas{ left:10px; bottom:62px; width:44px; height:44px; } }
@media print{ .jr-rayitas, .jr-menu, .jr-velo{ display:none; } }

.jr-nota-correo{ margin-top:14px; padding-top:12px; border-top:1px solid var(--jr-linea); }

/* El simbolito de usuario en la cabecera de la tienda. El punto verde dice «estás dentro». */
.jr-icono-usuario{ position:relative; }
.jr-icono-usuario.jr-dentro::after{
  content:""; position:absolute; right:2px; top:2px; width:9px; height:9px;
  border-radius:50%; background:var(--jr-verde); border:2px solid #fff;
}

/* ---------- La barra del Bodegón, con un icono más ----------
   Al añadirle el muñequito de usuario, «Bodegón» ya no cabía y se partía en dos («BODE /
   GÓN»), y la barra crecía a lo alto. Se le achica la letra y se le prohíbe partirse; los
   iconos se juntan un poco. Se toca desde aquí y no en la maqueta, que tiene que seguir
   sirviendo para enseñarla. */
.cima .rotulo{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:620px){
  .cima .cima-fila{ gap:8px; }
  .cima .rotulo{ font-size:17px; letter-spacing:.03em; }
  .cima .icono{ width:26px; height:26px; }
}
@media (max-width:400px){
  .cima .cima-fila{ gap:6px; }
  .cima .rotulo{ font-size:15px; }
  .cima .icono{ width:24px; height:24px; }
}

/* La fila de salir dentro del menú de la portada, que es del diseño de él y no lleva
   nuestras clases: se le pone el rojo a mano para que se distinga de las demás. */
.menu .jr-salir-suelto{ color:#c62828 !important; font-weight:600; }

/* ---------- Las formas de pago ---------- */
.jr-via{ padding:2px 0 4px; }
.jr-via-pie{ font-size:12.5px; color:var(--jr-tinta-2); margin:0 0 6px; }
.jr-via-total{ font-size:15px; margin:0 0 6px; }
.jr-via-total strong{ color:var(--jr-naranja-osc); font-size:17px; }
.jr-via-cuenta{ font-size:13.5px; margin:0 0 8px; padding:8px 10px;
  background:rgba(242,106,27,.07); border:1px dashed var(--jr-naranja); border-radius:9px; }
.jr-via-cuenta strong{ letter-spacing:.02em; }