/* — Estilos Generales (de tu HTML) — /
body {
font-family: ‘Inter’, sans-serif;
background-color: #f1f5f9; / Slate 100 / Light Background /
color: #1f2937;
}
.header-bg {
background-color: #0f172a; / Slate 900 equivalent /
}
.accent-color {
color: #f59e0b; / Amber 500 equivalent for accents */
.card-shadow {
box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}
/* — Estilos para tu Shortcode
Error: Debes especificar el tipo de punto. Ej:
Aún no hay nadie en el ranking.
— */ .custom-ranking-contenedor { font-family: ‘Inter’, sans-serif; background: #ffffff; color: #1f2937; border-radius: 12px; max-width: 56rem; /* 896px */ margin: 2em auto; padding: 1.5em 2em; box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04); overflow: hidden; } .custom-ranking-lista { list-style-type: decimal; padding-left: 2em; margin: 0; } .custom-ranking-item { display: flex; justify-content: space-between; align-items: center; padding: 1em 0; border-bottom: 1px solid #f1f5f9; /* slate 100 */ font-size: 1.1em; } .custom-ranking-item:last-child { border-bottom: none; } .custom-ranking-nombre { font-weight: 600; /* Semibold */ color: #1e293b; /* slate 800 */ } .custom-ranking-puntos { font-weight: 700; /* Bold */ color: #f59e0b; /* accent-color */ background-color: #fffbeb; /* Amber 50 */ padding: 6px 14px; border-radius: 20px; /* Píldora */ white-space: nowrap; font-size: 0.9em; } /* — INICIO: ESTILOS PARA PIE REGISTER (FORMULARIOS) — */ /* Contenedor principal del formulario */ .piereg_container, .pie_login_container { font-family: ‘Inter’, sans-serif; padding-top: 1rem; /* Espacio extra después del título */ } /* Etiquetas (ej: «Usuario», «Contraseña») */ .piereg_container label, .pie_login_container label { font-weight: 600; /* semibold */ font-size: 0.9em; color: #374151; /* gray-700 */ margin-bottom: 0.5rem; display: block; /* Asegura que esté sobre el input */ } /* Campos de texto, email, password, etc. */ .piereg_container input[type=»text»], .piereg_container input[type=»email»], .piereg_container input[type=»password»], .piereg_container textarea, .pie_login_container input[type=»text»], .pie_login_container input[type=»password»] { width: 100%; padding: 0.75rem 1rem; /* 12px 16px */ border: 1px solid #d1d5db; /* gray-300 */ border-radius: 8px; /* rounded-lg */ font-size: 1em; color: #1f2937; margin-bottom: 1.5rem; /* Más espacio entre campos */ transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; /* Importante para que el padding no rompa el ancho */ } /* Efecto al hacer clic (focus) – usa tu color de acento */ .piereg_container input[type=»text»]:focus, .piereg_container input[type=»email»]:focus, .piereg_container input[type=»password»]:focus, .piereg_container textarea:focus, .pie_login_container input[type=»text»]:focus, .pie_login_container input[type=»password»]:focus { border-color: #f59e0b; /* accent-color (Amber 500) */ box-shadow: 0 0 0 2px #fde68a; /* Sombra de focus (Amber 200) */ outline: none; } /* Botones de «Enviar», «Registrar», «Acceder» */ .piereg_container input[type=»submit»], .piereg_container button[type=»submit»], .pie_login_container input[type=»submit»] { width: 100%; background-color: #f59e0b; /* accent-color (Amber 500) */ color: #ffffff; /* Texto blanco */ font-weight: 700; /* bold */ font-size: 1em; padding: 0.85rem 1rem; border: none; border-radius: 8px; /* rounded-lg */ cursor: pointer; transition: background-color 0.3s; margin-top: 1rem; } /* Efecto al pasar el ratón por el botón */ .piereg_container input[type=»submit»]:hover, .piereg_container button[type=»submit»]:hover, .pie_login_container input[type=»submit»]:hover { background-color: #d97706; /* Amber 600 */ } /* — CORRECCIÓN Y RESALTADO DE CHECKBOX/RADIO — */ /* Contenedor de cada opción (ej. «Si», «No») */ .pie_register_radio_wrap, .pie_register_checkbox_wrap { display: flex; /* Alinea la caja y el texto */ align-items: center; /* Centra verticalmente */ margin-bottom: 0.75rem; /* Espacio entre opciones */ } .pie_register_radio_wrap:last-child, .pie_register_checkbox_wrap:last-child { margin-bottom: 0; /* Sin espacio extra al final */ } /* La etiqueta de la opción (ej. «Si») */ .pie_register_radio_wrap label, .pie_register_checkbox_wrap label { display: inline-block; /* Anula el ‘display: block’ general */ font-weight: 500; color: #374151; margin-bottom: 0; margin-left: 0.5rem; /* Espacio entre la caja y el texto */ line-height: 1.4; /* Mejora el interlineado si el texto es largo */ } /* El input (la caja o el círculo) */ .pie_register_radio_wrap input[type=»radio»], .pie_register_checkbox_wrap input[type=»checkbox»] { width: auto; /* Anula el ‘width: 100%’ general */ margin-bottom: 0; /* Anula el ‘margin-bottom’ general */ flex-shrink: 0; /* Evita que se encoja */ } /* Etiqueta principal del grupo (ej. «He leído y acepto…») */ .piereg_container .pr_radio_field > label, .piereg_container .pr_checkbox_field > label { display: block; /* Esta SÍ debe ser un bloque */ font-weight: 600; font-size: 1em; /* Aumentado de 0.9em */ color: #1e293b; /* Oscurecido de gray-700 */ margin-bottom: 1.25rem; /* Aumentado de 1rem */ } /* ¡AQUÍ ESTÁ TU RECUADRO! */ /* El contenedor de todo el campo (título + opciones) */ .piereg_container .pr_radio_field, .piereg_container .pr_checkbox_field { background-color: #f8fafc; /* Fondo Slate 50 */ border: 1px solid #e2e8f0; /* Borde Slate 200 */ border-radius: 8px; /* Esquinas redondeadas */ padding: 1.25rem; /* p-5 */ margin-bottom: 1.5rem; /* Espacio inferior */ } /* — FIN DE LA SECCIÓN — */ /* Estilos para el Perfil de Usuario */ #pie_register_profile_form { font-family: ‘Inter’, sans-serif; color: #1f2937; padding-top: 1rem; line-height: 1.6; } #pie_register_profile_form a { color: #f59e0b; /* accent-color */ text-decoration: underline; font-weight: 600; } #pie_register_profile_form a:hover { color: #d97706; } /* Ocultar títulos y descripciones por defecto del plugin (ya los pusimos en HTML) */ .piereg_container .pr_title, .piereg_container .pr_description, .pie_login_container .pr_title { display: none; } /* — FIN: ESTILOS PARA PIE REGISTER — */