/* General styles */
body {
  /* Tipography*/
  font-family: sans-serif;
  /* Box Model*/
  margin: 0;

  /* Background */
  background-color: #30313D;

  /* Display and Position*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Header Styles */
header {
  /*Box Model*/
  padding: 20px;
  /* Tipography*/
  text-align: center;
}

#logo {
  /* Box Model*/
  width: 200px;
  margin-bottom: 20px;
}

/* Main Styles*/
main {
  /* Box Model*/
  padding: 20px;
  /* Display and Position*/
  text-align: center;

}

/* Container */
.container {
  /*Box Model*/
  max-width: 400px;
  margin: 0 auto;
  /* Display and Positioning */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.container-second {
  background-color: #30313D;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 90%;
  max-width: 400px;
}

/* Typography Styles */
h1,
h2,
h3 {
  /* Ensure these apply to general page titles, but can be overridden for specific elements */
  /* color: aliceblue; */
  /* Setting a default dark color for form titles to ensure contrast */
  color: aliceblue;
  text-align: center
}

table {
  color: aliceblue;
}

/* List Styles */
.pyme-list {
  /* Display and Positioning */
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Box Model */
  padding: 0;
}

.pyme-list li {
  /* Display and Positioning */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Box Model */
  width: 100%;
  gap: 10px;
  margin-bottom: 10px;
  padding: 5px;
  /* Typography*/
  text-align: center;
  color: #7eb810;
}

/*Form Styles */
.login-form {
  margin-top: 20px;
}

.input-group {
  margin-bottom: 10px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}


input {
  /* Box Model */
  display: block;
  margin-bottom: 5px;
  /*color: aliceblue;*/
  /*Box Model*/
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  max-width: 300px;
  /* Para evitar que se extienda demasiado */
  box-sizing: border-box;
  text-align: center;
}

label {
  flex-basis: 30%;
  color: #30313D;
  text-align: left;
}

/*Generic Button*/

button {
  /* Background */
  background-color: #007bff;
  /* Tipography*/
  color: aliceblue;
  /* Box Model*/
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  /* Added font-size */
  margin-right: 10px;
  padding: 5px;
  width: auto;
  /* Sombra suave 
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);*/
  /* Puedes ajustar el blur y el color 
  transition: box-shadow 0.2s;*/
}


button:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.22);
  /*background-color: #f9e200;*/
  border: 2px solid #f9e200;
}

.boton-usuario {
  background-color: #007bff;
  width: auto;
}

.boton-socio {
  background-color: #7eb810;
  /* Amarillo/Oro */
}


.boton-app {
  background-color: #007bff;
  /* Cian */
}

.boton-carrito {
  background-color: #8008b2;
  /* Cian */
}

.boton-superhumano {
  background-color: #0fc5ef;
  /* Cian */
}

.boton-seguir {
  background-color: #fc6e0d;
  /* Color de fondo para el botón activo */
}

.boton-gris {
  background-color: #B0C4DE;
  padding: 5px;
  border-radius: 5px;
  display:inline-block; line-height:1; text-align:center;
}

.boton-estado1 {
  background-color: #f74b7c;
  border-radius: 5px;
}

.boton-estado2 {
  background-color: #8008b2;
  border-radius: 5px;
}

/* Botón base (sin animación) */
.boton-info {
  background-color: #f9e200;
}

/* Aplica a cualquier elemento con class="late" */
.late {
  display: inline-block;              /* necesario para que scale se note */
  animation: latido 1.4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
  line-height: 1;                    /* evita saltos por baseline del emoji */
}

/* La animación */
@keyframes latido {
  0%, 100% { transform: scale(0.8); }
  50%      { transform: scale(1.0); }
}

/* Accesibilidad: respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
  .late { animation: none !important; }
}



/*.boton-estado:hover {
  background-color: #e6b800;
}*/

.boton-filtro-socio-activo {
  background-color: #fc6e0d;
  /* Color de fondo para el botón activo */
  font-size: 20px;
  /* Added font-size */
  color: aliceblue;
  /* Color del texto para el botón activo */
  border: 2px solid aliceblue;
}

.boton-filtro-emoji-activo {
  background-color: #fc6e0d;
  /* Color de fondo para el botón activo */
  font-size: 30px;
  /* Added font-size */
  color: aliceblue;
  /* Color del texto para el botón activo */
  border: 2px solid aliceblue;
}

.boton-oferta-emoji.boton-filtro-emoji-activo {
  background-color: #fc6e0d;
  /* Color de fondo para el botón activo */
  font-size: 30px;
  /* Added font-size */
  color: aliceblue;
  /* Color del texto para el botón activo */
  border: 2px solid aliceblue;
}


.boton-oferta-emoji {
  background-color: #7eb810;
  /* Amarillo/Oro */
  font-size: 30px;
  /* Added font-size */
}

.boton-predeterminado {
  background-color: #007bff;
  /* Azul */
}


.buttons-container-form {
  display: flex;
  justify-content: center;
  /* Center horizontally */
}




#google-button-container {
  margin-bottom: 10px;
}

.emoji-marker {
  display: inline-block;
  width: 20px;
}

.footer {
  /* Display and Position */
  position: relative;
  /* Box Model */
  bottom: 0;
  padding: 10px;
  /* Background */
  background-color: #30313D;
  /* Tipography*/
  text-align: center;
}

.user-info-container {
  color: #30313D;
  padding: 10px;
  background-color: aliceblue;
  border-radius: 10px;

  display: inline-block;
  flex-direction: column;
  align-items: center;


  width: auto;
  max-width: 100%;

  text-align: center;
}

.user-info-container-shadow {
  color: #30313D;
  padding: 10px;
  background-color: aliceblue;
  border-radius: 10px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.22);

  display: inline-block;
  flex-direction: column;
  align-items: center;

  width: auto;
  /*max-width: 100%;*/

  text-align: center;
}


.texto-largo {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
}

.panel-control{
  /* tamaño */
  width: fit-content;           /* se adapta al contenido */
  max-width: 400px;             /* tope para envolver texto */
  box-sizing: border-box;       /* padding cuenta en el ancho */

  /* apariencia */
  padding: 20px;
  margin: 20px auto;            /* centra horizontalmente */
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  border: 1px solid #e0e0e0;
  transition: all .3s ease;

  /* opcional: solo el contenido dentro centrado */
  text-align: center;
}


.oculto {
  display: none !important;
}

.incompatible { display: none; }

.opcion-boton {
  background-color: #f8fafc;
  border: 2px solid #fc6e0d;
  color: #30313d;
  border-radius: 18px;
  padding: 8px 18px;
  font-size: 16px;
  cursor: pointer;
  margin: 4px 7px 8px 0;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.opcion-boton.selected {
  background-color: #fc6e0d;
  color: white;
  border-color: #fc6e0d;
  font-weight: bold;
}

.categorias-limitadas {
  display: block;
  word-break: break-word;
  max-width: 100%;
  overflow-wrap: break-word;
}

.description-container {
  /*width: 100%;*/
  word-wrap: break-word;
  justify-content: center;

  flex-wrap: wrap;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.buttons-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  /*width: 100%;*/
  /*align-items: flex-end;*/
}

.carousel-container {
  display: flex;
  flex-direction: row;        /* <-- importante: horizontal */
  align-items: flex-start;    /* <-- Esto asegura alineación superior */
  width: 350px;                /* Enable horizontal scrolling */
  overflow-x: auto;           /* Prevent items from wrapping */
    
  margin-bottom: 20px;        /*border: 1px solid aliceblue;*/
  border-radius: 10px;
  padding: 10px 10px 10px 10px; /* top, right, bottom, left */
  gap: 10px;
}

.categorias-carousel-container {
  /* Add styles for the category carousel */
  /*width: 100%;*/
  overflow-x: auto;
  /*white-space: nowrap;*/
  margin-bottom: 20px;
  text-align: center;
}

.carousel-item {
  display: flex;
  flex-direction: column;       /* apila hijos verticalmente */
  justify-content: center;       /* centra hijos en el eje vertical (dentro de la card) */
  align-items: center;         /* centra hijos en el eje horizontal (dentro de la card) */
  width: 300px;
  padding: 10px 10px 10px 10px; /* top, right, bottom, left */
  margin-right: 10px;
  border-radius: 5px;
  /*border: 1px solid #7eb810;*/
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;

  /*background: #fff;*/
  box-shadow: 0 2px 8px #dedede;
  flex-shrink: 0;
}

.new-card-highlight { outline: 2px solid #f9e200; border-radius: 8px; }

/* Add styles for the category carousel items if they need to be different from service items,
 but keeping them similar for consistency. If they should be identical, they can inherit
   you can remove this and they will inherit from .carousel-item */





/* Styles for the close buttons in forms */
.close-button,
.close-categoria-form-button,
.close-edit-form-button {
  /* Inherit from .boton-app and then override */
  /* Background */
  background-color: #007bff;
  /* Tipography*/
  color: aliceblue;
  /* Box Model*/
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  /* Added font-size */
  margin-right: 10px;
  padding: 5px 5px;
}

.opcion-toggle {
  padding: 6px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.categoria-hijos {
  display: none;
  margin-left: 16px;
}

.categoria-hijos.activa {
  display: block;
}

/*arbol*/

ul.tree {
  list-style: none;
  padding-left: 0;
}

ul.tree ul {
  margin-left: 20px;
  padding-left: 0;
  display: none;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.tree-node .toggle {
  width: 30px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  user-select: none;
  /*color: aliceblue;*/
  font-size: 30px;
  font-weight: bold;


}



.tree-node .node-name {
  flex-grow: 1;
  color: #30313d;
  font-size: 16px;
}


/*ALERTAS*/

.mensaje-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  background-color: #e0f7fa;
  color: #00796b;
  border: 2px solid #4dd0e1;
  border-radius: 10px;
  padding: 14px 40px 14px 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  cursor: default;
  position: fixed;
}

.mensaje-cerrar {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  /* Mejora verticalmente */
}



/* Tipos de mensaje */
.mensaje-info {
  background-color: #e0f7fa;
  color: #00796b;
  border-color: #4dd0e1;
}

.cerrar-info {
  color: #00796b;
}

.mensaje-error {
  background-color: #ffebee;
  color: #c62828;
  border-color: #ef5350;
}

.cerrar-error {
  color: #c62828;
}

.mensaje-exito {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-color: #81c784;
}

.cerrar-exito {
  color: #2e7d32;
}

.mensaje-confirmar {
  background-color: #F5EDE0; /* arena suave */
  color: #5C3D2E;            /* café oscuro (texto) */
  border: 1px solid #C7A27A; /* tan/dorado suave */
}

.cerrar-confirmar {
  color: #5C3D2E;            /* mismo café del texto */
}

.mensaje-form {
  background-color: #EAF4FF; /* azul hielo, complementa aliceblue */
  color: #1B365D;            /* índigo suave, buen contraste */
  border: 1px solid #9EC9FF; /* cornflower claro para el borde */
}

.cerrar-form {
  color: #1B365D;            /* mismo tono del texto */
}

.form-overlay-container {
  position: fixed;  /* overlay flotante */
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;      /* CENTRA VERTICAL */
  justify-content: center;  /* CENTRA HORIZONTAL */
  background: rgba(30,30,30,0.24);
  /* Elimina cualquier padding grande o margin, y NO pongas align-items: flex-start */
}
.form-overlay-container > form {
background: white;
border-radius: 20px;
box-shadow: 0 6px 32px 0 rgba(60,60,60,.22);
padding: 32px 24px;
margin: 0 auto;
width: auto;
max-width: 380px; 
}

.texto-sombra {

  text-shadow:
    -1px -1px 0 silver,  
     1px -1px 0 silver,
    -1px  1px 0 silver,
     1px  1px 0 silver;
}



:root {
  --planet: 100px; /* ancho del planeta */
  --offset: 3%;  /* distancia que se mueve desde el centro */
}

@keyframes oscilarHorizontal {
  0%   { left: calc(50% - var(--planet) / 2 - var(--offset)); z-index: 2;} /* centro - offset */
  50%  { left: calc(50% - var(--planet) / 2 + var(--offset)); z-index: 2;} /* centro + offset */
  100% { left: calc(50% - var(--planet) / 2 - var(--offset)); z-index: 2;} /* centro - offset */

}

.tierra-animada {
  position: absolute;
  top: 50%;
  width: var(--planet);
  aspect-ratio: 1/1;
  background-image: url('tierra.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  transform: translateY(-50%);
  animation: oscilarHorizontal 2.5s ease-in-out infinite;
}



:root{
  --sat-size: 64px;      /* tamaño del satélite */
  --range: 30%;          /* cuánto se aleja desde el centro hacia cada lado */
  --spin: 6s;            /* duración de la órbita ida+vuelta */
}

/* capa para los satélites */
.sat-orbit{
  position:absolute; inset:0;
  pointer-events:none;
}

/* satélite base */
.sat{
  position:absolute; top:50%;
  width:var(--sat-size); height:var(--sat-size);
  transform: translateY(-50%);   /* siempre de frente al usuario */
  left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -1));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  font-weight:bold; color:aliceblue;
  border-radius:10px;
  
  /* Movimiento horizontal + profundidad */
  animation:
  orbitX var(--spin) linear  infinite,   /* antes: ease-in-out */
  depth  var(--spin) linear  infinite,   /* antes: ease-in-out */
  stack  var(--spin) linear  infinite; /* salto limpio en mitad del ciclo */
}

/* tres satélites equiespaciados: solo desfasamos el ciclo */
.sat:nth-child(1){ animation-delay: 0s, 0s, 0s; }
.sat:nth-child(2){ animation-delay: calc(-1 * var(--spin)/3), calc(-1 * var(--spin)/3), calc(-1 * var(--spin)/3); }
.sat:nth-child(3){ animation-delay: calc(-2 * var(--spin)/3), calc(-2 * var(--spin)/3), calc(-2 * var(--spin)/3); }

/* ida: izquierda→centro→derecha, vuelta: derecha→centro→izquierda */
/* X ~ cos(θ) con más puntos (cada 22.5°). Mantén animation: linear */
@keyframes orbitX{
  /* lateral izq → frente (curva suave) */
  90%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.6)); }
  95%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.8)); }
  0% { left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -1)); }
  5% { left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.8)); }
  10%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.6)); }

  /* frente → lateral der (curva suave) */
  15%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.4)); }
  20%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.2)); }
  25%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0.0)); }
  30%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0.2)); }
  35%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0.4)); }

  /* lateral der → fondo (curva suave) */
  40%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * 0.6)); }
  45%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0.8)); }
  50%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  1)); }
  55%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0.8)); }
  60%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * 0.6)); }

  /* “valle” redondeado en el FONDO */
  65%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0.4)); }
  70%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0.2)); }
  75%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) *  0)); }
  80%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.2)); }
  85%{ left: calc(50% - var(--sat-size)/2 + calc(var(--range) * -0.4)); }
}


@keyframes depth{

  /* lateral izq → frente (curva suave) */
  95%  { transform: translateY(-50%) translateY(-40%) scale(0.95); }
  0%   { transform: translateY(-50%) translateY(-0%) scale(1); }
  5%   { transform: translateY(-50%) translateY(40%) scale(1.05); }

  /* frente → lateral der (curva suave) */
  15%  { transform: translateY(-50%) translateY(100%) scale(1.15); }
  20%  { transform: translateY(-50%) translateY(110%) scale(1.20); }   
  25%  { transform: translateY(-50%) translateY(120%) scale(1.25); }  /* máximo */
  30%  { transform: translateY(-50%) translateY(110%) scale(1.20); }
  35%  { transform: translateY(-50%) translateY(100%) scale(1.15); }

  /* lateral der → fondo (curva suave) */
  45%  { transform: translateY(-50%) translateY(40%) scale(1.05); }
  50%  { transform: translateY(-50%) translateY(0%) scale(1); }
  55%  { transform: translateY(-50%) translateY(-40%) scale(0.95); }

  /* “valle” redondeado en el FONDO */
  65%  { transform: translateY(-50%) translateY(-60%) scale(0.90); }
  70%  { transform: translateY(-50%) translateY(-70%) scale(0.85); }
  75%  { transform: translateY(-50%) translateY(-80%)  scale(0.80); }  /* mínimo */
  80%  { transform: translateY(-50%) translateY(-70%) scale(0.85); }
  85%  { transform: translateY(-50%) translateY(-60%) scale(0.90); }
}

/* apilado: detrás en la mitad izquierda, delante en la derecha */
@keyframes stack{
  0%,49.9%  { z-index: 3; }  /* yendo por la izquierda → detrás de la Tierra */
  50%,100%  { z-index: 1; }  /* yendo por la derecha → delante de la Tierra */
}


/*TABLA PANEL DE CONTROL*/
.icon      { font-size:30px; display:inline-block; padding:5px; line-height:1; text-align:center; }

.step      { font-size:12px; color:aliceblue; line-height:1; display:inline-block; text-align:center; }