/* ============================================================
JuguemosRol 2026 — Design System
jr-design.css v1.0
============================================================ */
/* === DESIGN TOKENS === */
:root {
--jr-p-50: #eef2ff;
--jr-p-100: #e0e7ff;
--jr-p-200: #c7d2fe;
--jr-p-300: #a5b4fc;
--jr-p-400: #818cf8;
--jr-p-500: #6366f1;
--jr-p-600: #4f46e5;
--jr-p-700: #4338ca;
--jr-p-800: #3730a3;
--jr-p-900: #312e81;
--jr-a-300: #fcd34d;
--jr-a-400: #fbbf24;
--jr-a-500: #f59e0b;
--jr-a-600: #d97706;
--jr-a-700: #b45309;
--jr-s-50: #f8fafc;
--jr-s-100: #f1f5f9;
--jr-s-200: #e2e8f0;
--jr-s-300: #cbd5e1;
--jr-s-400: #94a3b8;
--jr-s-500: #64748b;
--jr-s-600: #475569;
--jr-s-700: #334155;
--jr-s-800: #1e293b;
--jr-s-900: #0f172a;
--jr-success: #059669;
--jr-success-bg: #ecfdf5;
--jr-success-bd: #6ee7b7;
--jr-danger: #dc2626;
--jr-danger-bg: #fef2f2;
--jr-danger-bd: #fca5a5;
--jr-warning: #d97706;
--jr-warning-bg: #fffbeb;
--jr-warning-bd: #fde68a;
--jr-info: #0284c7;
--jr-info-bg: #f0f9ff;
--jr-info-bd: #7dd3fc;
--jr-font-head: "Plus Jakarta Sans", system-ui, sans-serif;
--jr-font-body: "Inter", system-ui, sans-serif;
--jr-r-xs: 0.25rem;
--jr-r-sm: 0.375rem;
--jr-r: 0.625rem;
--jr-r-lg: 0.875rem;
--jr-r-xl: 1.25rem;
--jr-r-2xl: 1.75rem;
--jr-r-f: 9999px;
--jr-sh-xs: 0 1px 2px 0 rgb(0 0 0/0.05);
--jr-sh-sm: 0 1px 3px 0 rgb(0 0 0/0.1), 0 1px 2px -1px rgb(0 0 0/0.1);
--jr-sh: 0 4px 6px -1px rgb(0 0 0/0.07), 0 2px 4px -2px rgb(0 0 0/0.07);
--jr-sh-md:
0 10px 15px -3px rgb(0 0 0/0.07), 0 4px 6px -4px rgb(0 0 0/0.07);
--jr-sh-lg:
0 20px 25px -5px rgb(0 0 0/0.07), 0 8px 10px -6px rgb(0 0 0/0.07);
}
/* === BASE === */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: var(--jr-font-body);
color: var(--jr-s-700);
background: var(--jr-s-100);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--jr-font-head);
color: var(--jr-s-900);
line-height: 1.25;
margin-top: 0;
}
a {
color: var(--jr-p-600);
}
img {
max-width: 100%;
}
p {
margin-top: 0;
}
/* === LAYOUT === */
.jr-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* Full-width container: only horizontal padding, no max-width */
.jr-container-fluid {
width: 100%;
padding: 0 1.5rem;
}
.jr-page {
padding: 2rem 0 4rem;
}
.jr-page-sm {
padding: 1.5rem 0 3rem;
}
.jr-section {
padding: 3.5rem 0;
}
.jr-section-head {
margin-bottom: 2rem;
}
/* El encabezado de sección lleva título + acción a la derecha. En pantallas
chicas el botón (white-space:nowrap) no puede encogerse, así que la fila
envuelve en vez de apretar el título. */
.jr-section-head.jr-flex-between {
flex-wrap: wrap;
gap: 0.75rem;
}
.jr-section-title {
font-family: var(--jr-font-head);
font-size: 1.5rem;
font-weight: 800;
color: var(--jr-s-900);
margin-bottom: 0.25rem;
}
.jr-section-desc {
font-size: 0.9375rem;
color: var(--jr-s-500);
margin-bottom: 0;
}
/* Grid — minmax(0, 1fr) y no 1fr: con 1fr la columna nunca baja del
min-content de su contenido y una tarjeta con texto largo desborda
el contenedor (y con él el ancho de la página en mobile). */
.jr-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.jr-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.jr-grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
/* Flex helpers */
.jr-flex {
display: flex;
}
.jr-flex-center {
display: flex;
align-items: center;
}
.jr-flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.jr-flex-wrap {
flex-wrap: wrap;
}
.jr-gap-xs {
gap: 0.375rem;
}
.jr-gap-sm {
gap: 0.5rem;
}
.jr-gap {
gap: 1rem;
}
.jr-gap-lg {
gap: 1.5rem;
}
/* === BUTTONS === */
.jr-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1.125rem;
font-family: var(--jr-font-body);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.5;
border-radius: var(--jr-r-sm);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition:
background 0.15s,
border-color 0.15s,
box-shadow 0.15s,
color 0.15s;
white-space: nowrap;
}
.jr-btn:focus {
outline: none;
}
.jr-btn-sm {
padding: 0.3rem 0.75rem;
font-size: 0.8125rem;
}
.jr-btn-lg {
padding: 0.6875rem 1.5rem;
font-size: 1rem;
}
.jr-btn-primary {
background: var(--jr-p-600);
border-color: var(--jr-p-600);
color: #fff;
}
.jr-btn-primary:hover {
background: var(--jr-p-700);
border-color: var(--jr-p-700);
color: #fff;
box-shadow: 0 0 0 3px var(--jr-p-200);
}
.jr-btn-secondary {
background: #fff;
border-color: var(--jr-s-300);
color: var(--jr-s-700);
}
.jr-btn-secondary:hover {
background: var(--jr-s-50);
border-color: var(--jr-s-400);
color: var(--jr-s-800);
}
.jr-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--jr-p-600);
}
.jr-btn-ghost:hover {
background: var(--jr-p-50);
color: var(--jr-p-700);
}
.jr-btn-accent {
background: var(--jr-a-500);
border-color: var(--jr-a-500);
color: #fff;
}
.jr-btn-accent:hover {
background: var(--jr-a-600);
border-color: var(--jr-a-600);
color: #fff;
}
.jr-btn-danger {
background: var(--jr-danger);
border-color: var(--jr-danger);
color: #fff;
}
.jr-btn-danger:hover {
background: #b91c1c;
border-color: #b91c1c;
color: #fff;
}
.jr-btn-success {
background: var(--jr-success);
border-color: var(--jr-success);
color: #fff;
}
.jr-btn-outline-primary {
background: transparent;
border-color: var(--jr-p-600);
color: var(--jr-p-600);
}
.jr-btn-outline-primary:hover {
background: var(--jr-p-50);
}
.jr-btn:disabled,
.jr-btn.disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* === INPUTS === */
.jr-input,
.jr-select,
.jr-textarea {
width: 100%;
padding: 0.5625rem 0.875rem;
font-family: var(--jr-font-body);
font-size: 0.9375rem;
color: var(--jr-s-800);
background: #fff;
border: 1.5px solid var(--jr-s-300);
border-radius: var(--jr-r);
line-height: 1.5;
transition:
border-color 0.15s,
box-shadow 0.15s;
appearance: none;
}
.jr-input::placeholder,
.jr-textarea::placeholder {
color: var(--jr-s-400);
}
.jr-input:focus,
.jr-select:focus,
.jr-textarea:focus {
outline: none;
border-color: var(--jr-p-600);
box-shadow: 0 0 0 3px var(--jr-p-100);
}
.jr-input.is-error {
border-color: var(--jr-danger);
}
.jr-input.is-error:focus {
box-shadow: 0 0 0 3px var(--jr-danger-bg);
}
.jr-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.875rem center;
background-size: 14px;
padding-right: 2.5rem;
cursor: pointer;
}
.jr-textarea {
resize: vertical;
min-height: 100px;
}
.jr-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--jr-s-700);
margin-bottom: 0.375rem;
}
.jr-label .req {
color: var(--jr-danger);
margin-left: 2px;
}
.jr-hint {
font-size: 0.8125rem;
color: var(--jr-s-500);
margin-top: 0.25rem;
}
/* Variante del hint para confirmar que un dato requerido ya está cargado */
.jr-hint-ok {
display: block;
color: var(--jr-success);
}
.jr-error {
display: block;
font-size: 0.8125rem;
color: var(--jr-danger);
margin-top: 0.25rem;
}
/* Contenedor de error reservado por el template y todavía sin mensaje:
no debe ocupar espacio ni margen. */
.jr-error:empty {
display: none;
}
/* Fila de casilla con su texto al lado. Existía solo como estilos sueltos
repetidos en cada formulario; acá queda en un lugar. */
.jr-check-label {
display: flex;
align-items: flex-start;
gap: 0.625rem;
cursor: pointer;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--jr-s-700);
}
.jr-check-label input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 0.15rem;
flex-shrink: 0;
cursor: pointer;
}
/* Variante chica, para acciones secundarias dentro de un campo (ej. quitar ubicación) */
.jr-check-label-sm {
font-size: 0.8125rem;
color: var(--jr-s-500);
margin-top: 0.375rem;
}
.jr-check-label-sm input[type="checkbox"] {
width: 15px;
height: 15px;
margin-top: 0.1rem;
}
/* Campo que falló la validación. Se usaba en 7 templates sin estar definida:
el borde rojo nunca llegó a verse. */
.jr-input-error,
.jr-input.jr-input-error,
.jr-select.jr-input-error,
.jr-textarea.jr-input-error {
border-color: var(--jr-danger);
background: var(--jr-danger-bg, #fef2f2);
}
.jr-input-error:focus,
.jr-input.jr-input-error:focus,
.jr-select.jr-input-error:focus,
.jr-textarea.jr-input-error:focus {
border-color: var(--jr-danger);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
/* Resumen de errores y leyenda al inicio de un formulario largo */
.jr-form-errores,
.jr-form-leyenda-imagen {
margin-bottom: 1.5rem;
}
.jr-form-errores-lista {
margin: 0.5rem 0 0;
padding-left: 1.125rem;
font-size: 0.875rem;
line-height: 1.6;
}
.jr-form-errores-lista a {
font-weight: 600;
color: inherit;
}
/* Bloque de herramientas de seguridad: es obligatorio elegir al menos una,
así que cuando falla se enmarca como un campo con error. */
.jr-bloque-herramientas {
margin-top: 1.5rem;
}
.jr-bloque-herramientas.jr-input-error {
border: 1px solid var(--jr-danger);
border-radius: var(--jr-r);
padding: 1rem;
background: var(--jr-danger-bg, #fef2f2);
}
.jr-bloque-herramientas .jr-error {
margin-bottom: 0.75rem;
}
.jr-input-wrap {
position: relative;
}
.jr-input-icon {
position: absolute;
left: 0.875rem;
top: 50%;
transform: translateY(-50%);
color: var(--jr-s-400);
pointer-events: none;
font-size: 1rem;
}
.jr-input-wrap .jr-input {
padding-left: 2.5rem;
}
.jr-form-group {
margin-bottom: 1.25rem;
}
/* === BADGES === */
.jr-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.625rem;
border-radius: var(--jr-r-f);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid transparent;
line-height: 1.4;
}
.jr-badge-primary {
background: var(--jr-p-100);
color: var(--jr-p-700);
border-color: var(--jr-p-200);
}
.jr-badge-accent {
background: var(--jr-warning-bg);
color: var(--jr-a-600);
border-color: var(--jr-warning-bd);
}
.jr-badge-success {
background: var(--jr-success-bg);
color: var(--jr-success);
border-color: var(--jr-success-bd);
}
.jr-badge-danger {
background: var(--jr-danger-bg);
color: var(--jr-danger);
border-color: var(--jr-danger-bd);
}
.jr-badge-warning {
background: var(--jr-warning-bg);
color: var(--jr-warning);
border-color: var(--jr-warning-bd);
}
.jr-badge-info {
background: var(--jr-info-bg);
color: var(--jr-info);
border-color: var(--jr-info-bd);
}
.jr-badge-neutral {
background: var(--jr-s-100);
color: var(--jr-s-600);
border-color: var(--jr-s-200);
}
.jr-badge-dark {
background: var(--jr-s-800);
color: #fff;
}
/* Game tags */
.jr-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
border-radius: var(--jr-r-sm);
font-size: 0.8125rem;
font-weight: 500;
border: 1px solid;
}
.jr-tag-dnd {
background: #fff1e0;
color: #92400e;
border-color: #fed7aa;
}
.jr-tag-pf {
background: #f0fdf4;
color: #166534;
border-color: #bbf7d0;
}
.jr-tag-coc {
background: #fdf4ff;
color: #6b21a8;
border-color: #e9d5ff;
}
.jr-tag-vampire {
background: #fff1f2;
color: #9f1239;
border-color: #fecdd3;
}
.jr-tag-generic {
background: var(--jr-s-100);
color: var(--jr-s-600);
border-color: var(--jr-s-200);
}
/* === AVATARS === */
.jr-avatar {
border-radius: var(--jr-r-f);
object-fit: cover;
background: var(--jr-p-100);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--jr-p-600);
font-weight: 700;
font-family: var(--jr-font-head);
flex-shrink: 0;
overflow: hidden;
}
.jr-avatar-xs {
width: 24px;
height: 24px;
font-size: 0.625rem;
}
.jr-avatar-sm {
width: 32px;
height: 32px;
font-size: 0.75rem;
}
.jr-avatar-md {
width: 40px;
height: 40px;
font-size: 0.875rem;
}
.jr-avatar-lg {
width: 56px;
height: 56px;
font-size: 1.125rem;
}
.jr-avatar-xl {
width: 80px;
height: 80px;
font-size: 1.5rem;
}
.jr-avatar-2xl {
width: 112px;
height: 112px;
font-size: 2rem;
}
/* Imagen dentro de un .jr-avatar (cuando el avatar es el contenedor
y la foto va anidada, no cuando .jr-avatar es el propio ![]()
). */
.jr-avatar > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jr-avatar-wrap {
position: relative;
display: inline-block;
}
.jr-avatar-verified {
position: absolute;
bottom: 1px;
right: 1px;
width: 16px;
height: 16px;
background: var(--jr-p-600);
border-radius: 50%;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.5rem;
color: #fff;
}
.jr-avatar-verified.is-gm {
background: var(--jr-a-500);
}
/* === STARS === */
.jr-stars {
display: inline-flex;
align-items: center;
gap: 2px;
}
.jr-star {
font-size: 0.875rem;
color: var(--jr-s-300);
}
.jr-star.on {
color: var(--jr-a-500);
}
/* === CONTENT WARNINGS === */
.jr-cw {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.875rem;
border-radius: var(--jr-r);
border: 1px solid;
font-size: 0.875rem;
font-weight: 500;
}
.jr-cw-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.jr-cw-low {
background: var(--jr-success-bg);
border-color: var(--jr-success-bd);
color: var(--jr-success);
}
.jr-cw-med {
background: var(--jr-warning-bg);
border-color: var(--jr-warning-bd);
color: var(--jr-warning);
}
.jr-cw-high {
background: var(--jr-danger-bg);
border-color: var(--jr-danger-bd);
color: var(--jr-danger);
}
.jr-cw-low .jr-cw-dot {
background: var(--jr-success);
}
.jr-cw-med .jr-cw-dot {
background: var(--jr-warning);
}
.jr-cw-high .jr-cw-dot {
background: var(--jr-danger);
}
/* === ALERTS === */
.jr-alert {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.125rem;
border-radius: var(--jr-r);
border: 1px solid;
font-size: 0.9375rem;
}
.jr-alert i {
font-size: 1.1rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.jr-alert-title {
font-weight: 600;
margin-bottom: 0.125rem;
}
.jr-alert-body {
font-size: 0.875rem;
opacity: 0.9;
}
.jr-alert-success {
background: var(--jr-success-bg);
border-color: var(--jr-success-bd);
color: var(--jr-success);
}
.jr-alert-danger {
background: var(--jr-danger-bg);
border-color: var(--jr-danger-bd);
color: var(--jr-danger);
}
.jr-alert-warning {
background: var(--jr-warning-bg);
border-color: var(--jr-warning-bd);
color: var(--jr-warning);
}
.jr-alert-info {
background: var(--jr-info-bg);
border-color: var(--jr-info-bd);
color: var(--jr-info);
}
/* Variante para avisos del circuito de Master. Es la única que faltaba:
warning / info / success / danger ya existían. */
.jr-alert-master {
background: var(--jr-p-50);
border-color: var(--jr-p-200);
color: var(--jr-p-700);
}
/* === CARDS === */
.jr-card {
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-lg);
overflow: hidden;
transition:
box-shadow 0.2s,
transform 0.2s;
}
.jr-card:hover {
box-shadow: var(--jr-sh-md);
transform: translateY(-2px);
}
.jr-card-cover {
position: relative;
height: 152px;
background: linear-gradient(135deg, var(--jr-p-800), var(--jr-p-600));
overflow: hidden;
}
.jr-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
}
.jr-card-cover-tl {
position: absolute;
top: 0.75rem;
left: 0.75rem;
}
.jr-card-cover-tr {
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
.jr-card-body {
padding: 1rem 1.125rem;
}
.jr-card-footer {
padding: 0.75rem 1.125rem;
border-top: 1px solid var(--jr-s-100);
}
.jr-card-title {
font-family: var(--jr-font-head);
font-size: 1rem;
font-weight: 700;
color: var(--jr-s-900);
margin-bottom: 0.5rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.jr-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--jr-s-500);
}
.jr-card-meta-item {
display: flex;
align-items: center;
gap: 0.25rem;
}
.jr-master-card-body {
padding: 1.5rem 1.25rem 1.25rem;
text-align: center;
}
/* === FORM SECTIONS === */
.jr-form-section {
margin-bottom: 2rem;
}
.jr-form-section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--jr-s-200);
}
.jr-form-section-icon {
width: 32px;
height: 32px;
background: var(--jr-p-100);
border-radius: var(--jr-r);
display: flex;
align-items: center;
justify-content: center;
color: var(--jr-p-600);
font-size: 0.875rem;
flex-shrink: 0;
}
.jr-form-section-title {
font-family: var(--jr-font-head);
font-size: 1rem;
font-weight: 700;
color: var(--jr-s-800);
}
.jr-form-section-desc {
font-size: 0.8125rem;
color: var(--jr-s-500);
margin-top: 0.125rem;
}
/* === NAVBAR === */
.jr-navbar {
background: #fff;
border-bottom: 1px solid var(--jr-s-200);
height: 64px;
padding: 0 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--jr-sh-xs);
position: sticky;
top: 0;
z-index: 200;
}
.jr-navbar-brand {
font-family: var(--jr-font-head);
font-weight: 800;
font-size: 1.125rem;
color: var(--jr-p-600);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.jr-navbar-brand-icon {
width: 28px;
height: 28px;
background: var(--jr-p-600);
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.875rem;
}
.jr-nav-links {
display: flex;
align-items: center;
gap: 0.125rem;
flex: 1;
}
.jr-nav-link {
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--jr-s-600);
text-decoration: none;
border-radius: var(--jr-r-sm);
transition:
color 0.15s,
background 0.15s;
}
.jr-nav-link:hover {
color: var(--jr-p-600);
background: var(--jr-p-50);
}
.jr-nav-link.active {
color: var(--jr-p-600);
font-weight: 600;
}
.jr-navbar-auth {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
/* Dropdown */
.jr-dropdown {
position: relative;
}
.jr-dropdown-trigger {
display: flex;
align-items: center;
gap: 0.375rem;
background: none;
border: none;
cursor: pointer;
padding: 0.375rem 0.5rem;
border-radius: var(--jr-r-sm);
color: var(--jr-s-700);
transition: background 0.15s;
font-family: var(--jr-font-body);
}
.jr-dropdown-trigger:hover {
background: var(--jr-s-100);
}
.jr-dropdown-menu {
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-lg);
padding: 0.375rem;
min-width: 200px;
box-shadow: var(--jr-sh-md);
z-index: 200;
display: none;
animation: dropIn 0.1s ease;
}
.jr-dropdown.open .jr-dropdown-menu {
display: block;
}
@keyframes dropIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: none;
}
}
.jr-dropdown-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.75rem;
border-radius: var(--jr-r-sm);
font-size: 0.875rem;
color: var(--jr-s-700);
text-decoration: none;
transition:
background 0.1s,
color 0.1s;
}
.jr-dropdown-item:hover {
background: var(--jr-s-100);
color: var(--jr-s-900);
}
.jr-dropdown-item-danger {
color: var(--jr-danger);
}
.jr-dropdown-item-danger:hover {
background: var(--jr-danger-bg);
color: var(--jr-danger);
}
.jr-dropdown-divider {
height: 1px;
background: var(--jr-s-200);
margin: 0.375rem 0;
}
/* Tabs */
.jr-tabs {
display: flex;
border-bottom: 2px solid var(--jr-s-200);
}
.jr-tab {
padding: 0.625rem 1.25rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--jr-s-500);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition:
color 0.15s,
border-color 0.15s;
}
.jr-tab:hover {
color: var(--jr-s-800);
}
.jr-tab.active {
color: var(--jr-p-600);
border-bottom-color: var(--jr-p-600);
font-weight: 600;
}
/* Tab Panels system (alternative tabs with panel show/hide) */
.jr-profile-tabs,
.jr-tabs-nav {
display: flex;
gap: 0.25rem;
border-bottom: 2px solid var(--jr-s-200);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.jr-tab-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 1.125rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--jr-s-500);
background: transparent;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
cursor: pointer;
border-radius: var(--jr-r) var(--jr-r) 0 0;
transition:
color 0.15s,
border-color 0.15s,
background 0.15s;
font-family: inherit;
text-decoration: none;
}
.jr-tab-btn:hover {
color: var(--jr-p-600);
background: var(--jr-s-50);
}
.jr-tab-btn.is-active,
.jr-tab-btn.jr-tab-active,
.jr-tab-btn.jr-tab-btn-active {
color: var(--jr-p-600);
border-bottom-color: var(--jr-p-500);
background: transparent;
font-weight: 600;
}
.jr-tab-panel {
display: none;
}
.jr-tab-panel.is-active {
display: block;
}
/* Breadcrumb */
.jr-breadcrumb {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
font-size: 0.875rem;
margin-bottom: 1.25rem;
}
.jr-breadcrumb a {
color: var(--jr-s-500);
text-decoration: none;
}
.jr-breadcrumb a:hover {
color: var(--jr-p-600);
}
.jr-breadcrumb-sep {
color: var(--jr-s-300);
font-size: 0.75rem;
}
.jr-breadcrumb-current {
color: var(--jr-s-800);
font-weight: 500;
}
/* Pagination */
.jr-pagination {
display: flex;
align-items: center;
gap: 0.25rem;
justify-content: center;
}
.jr-page-btn {
min-width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--jr-s-200);
border-radius: var(--jr-r-sm);
font-size: 0.875rem;
font-weight: 500;
color: var(--jr-s-600);
text-decoration: none;
transition: all 0.15s;
background: #fff;
cursor: pointer;
padding: 0 0.5rem;
}
.jr-page-btn:hover {
border-color: var(--jr-p-300);
color: var(--jr-p-600);
background: var(--jr-p-50);
}
.jr-page-btn.active {
background: var(--jr-p-600);
border-color: var(--jr-p-600);
color: #fff;
}
/* === HERO === */
.jr-hero {
padding: 5rem 0 4.5rem;
background: linear-gradient(
135deg,
var(--jr-p-900) 0%,
var(--jr-p-700) 60%,
var(--jr-p-500) 100%
);
position: relative;
overflow: hidden;
}
.jr-hero::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.jr-hero-title {
font-family: var(--jr-font-head);
font-size: 3rem;
font-weight: 800;
color: #fff;
line-height: 1.15;
margin-bottom: 1.25rem;
}
.jr-hero-title em {
font-style: normal;
color: var(--jr-a-400);
}
.jr-hero-lead {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.8);
max-width: 520px;
margin-bottom: 2rem;
line-height: 1.65;
}
.jr-stat-pill {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1.25rem;
border-radius: var(--jr-r-lg);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
}
.jr-stat-pill-val {
font-family: var(--jr-font-head);
font-size: 1.25rem;
font-weight: 800;
}
.jr-stat-pill-lbl {
font-size: 0.8125rem;
opacity: 0.75;
}
/* === DETAIL SIDEBAR === */
.jr-detail-sidebar {
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-xl);
overflow: hidden;
position: sticky;
top: 80px;
}
.jr-detail-sidebar-head {
padding: 1.25rem;
text-align: center;
background: linear-gradient(135deg, var(--jr-p-800), var(--jr-p-600));
color: #fff;
}
.jr-detail-sidebar-body {
padding: 1.25rem;
}
.jr-detail-row {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.625rem 0;
border-bottom: 1px solid var(--jr-s-100);
}
.jr-detail-row:last-child {
border-bottom: none;
}
.jr-detail-row-icon {
width: 32px;
height: 32px;
background: var(--jr-s-100);
border-radius: var(--jr-r);
display: flex;
align-items: center;
justify-content: center;
color: var(--jr-s-500);
font-size: 0.875rem;
flex-shrink: 0;
}
.jr-detail-row-label {
font-size: 0.75rem;
color: var(--jr-s-500);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.jr-detail-row-value {
font-size: 0.9375rem;
color: var(--jr-s-800);
font-weight: 500;
}
/* === PROFILE === */
.jr-profile-banner {
height: 140px;
background: linear-gradient(135deg, var(--jr-p-700), var(--jr-p-500));
}
.jr-profile-avatar-img {
width: 96px;
height: 96px;
border-radius: var(--jr-r-f);
border: 4px solid white;
box-shadow: var(--jr-sh-sm);
background: var(--jr-p-100);
object-fit: cover;
}
/* === EMPTY STATE === */
.jr-empty {
padding: 4rem 2rem;
text-align: center;
}
.jr-empty-icon {
width: 80px;
height: 80px;
background: var(--jr-p-50);
border-radius: var(--jr-r-xl);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--jr-p-300);
margin-bottom: 1.25rem;
}
.jr-empty-title {
font-family: var(--jr-font-head);
font-size: 1.125rem;
font-weight: 700;
color: var(--jr-s-800);
margin-bottom: 0.5rem;
}
.jr-empty-desc {
font-size: 0.9375rem;
color: var(--jr-s-500);
max-width: 360px;
margin: 0 auto 1.5rem;
}
/* === CUENTA (login/registro) === */
body.layout-cuenta {
background: var(--jr-s-50);
min-height: 100vh;
}
.jr-cuenta-wrap {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
}
.jr-cuenta-promo {
background: linear-gradient(160deg, var(--jr-p-900), var(--jr-p-700));
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.jr-cuenta-promo-title {
font-family: var(--jr-font-head);
font-size: 2rem;
font-weight: 800;
color: #fff;
margin-bottom: 1rem;
line-height: 1.2;
}
.jr-cuenta-promo-title em {
font-style: normal;
color: var(--jr-a-400);
}
.jr-cuenta-promo-desc {
font-size: 1rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.65;
margin-bottom: 2rem;
}
.jr-cuenta-promo-logo {
font-family: var(--jr-font-head);
font-size: 1.375rem;
font-weight: 800;
color: #fff;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 3rem;
}
.jr-cuenta-form {
padding: 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
overflow-y: auto;
}
.jr-cuenta-form-inner {
max-width: 400px;
width: 100%;
margin: 0 auto;
}
.jr-cuenta-form-title {
font-family: var(--jr-font-head);
font-size: 1.625rem;
font-weight: 800;
color: var(--jr-s-900);
margin-bottom: 0.375rem;
}
.jr-cuenta-form-sub {
font-size: 0.9375rem;
color: var(--jr-s-500);
margin-bottom: 2rem;
}
/* Master reveal */
.jr-master-fields {
display: none;
margin-top: 1rem;
padding: 1rem;
background: var(--jr-p-50);
border: 1px solid var(--jr-p-200);
border-radius: var(--jr-r);
}
.jr-master-fields.visible {
display: block;
}
/* Filter panel */
.jr-filter-panel {
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-lg);
padding: 1.25rem;
position: sticky;
top: 80px;
}
.jr-filter-title {
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--jr-s-500);
margin-bottom: 0.75rem;
}
.jr-filter-divider {
height: 1px;
background: var(--jr-s-200);
margin: 1rem 0;
}
/* Buscar layout */
.jr-search-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.5rem;
align-items: start;
}
/* === FOOTER === */
.jr-footer {
background: var(--jr-s-900);
padding: 3rem 0 1.5rem;
color: rgba(255, 255, 255, 0.7);
}
.jr-footer-brand {
font-family: var(--jr-font-head);
font-size: 1.125rem;
font-weight: 800;
color: #fff;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.jr-footer-desc {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
max-width: 280px;
margin-bottom: 1.25rem;
}
.jr-footer-heading {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 0.75rem;
}
.jr-footer-link {
display: block;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
margin-bottom: 0.4rem;
transition: color 0.15s;
}
.jr-footer-link:hover {
color: #fff;
}
.jr-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 2rem;
padding-top: 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
.jr-footer-copy {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.4);
}
.jr-footer-social {
display: flex;
gap: 0.625rem;
}
.jr-footer-social a {
width: 32px;
height: 32px;
border-radius: var(--jr-r-f);
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 0.875rem;
transition:
background 0.15s,
color 0.15s;
}
.jr-footer-social a:hover {
background: var(--jr-p-600);
color: #fff;
}
.jr-footer-divider {
list-style: none;
width: 70%;
height: 1px;
background-color: rgba(255, 255, 255, 0.2);
margin: 12px 0;
padding: 0;
}
/* === FLASH (CakePHP) === */
.message {
margin: 0;
}
/* === ADDITIONS v1.1 === */
/* Golden dot in brand */
.jr-dot {
color: var(--jr-a-500);
}
/* Navbar inner container (max-width centering) */
.jr-navbar-inner {
max-width: 1320px;
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
}
/* Dropdown extras */
.jr-dropdown-header {
padding: 0.375rem 0.75rem 0.25rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--jr-s-500);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.jr-dropdown-menu-right {
right: 0;
left: auto;
}
/* Hero layout */
.jr-hero-inner {
display: grid;
grid-template-columns: 1fr 280px;
gap: 3rem;
align-items: center;
}
.jr-hero-accent {
color: var(--jr-a-400);
}
.jr-hero-desc {
font-size: 1.0625rem;
color: rgba(255, 255, 255, 0.8);
max-width: 520px;
margin-bottom: 2rem;
line-height: 1.65;
}
.jr-hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1.75rem;
}
.jr-hero-pills {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.jr-pill {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.3125rem 0.75rem;
border-radius: var(--jr-r-f);
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
font-size: 0.8125rem;
font-weight: 500;
}
/* Stat cards (hero right column) */
.jr-hero-stats {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.jr-stat-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--jr-r-lg);
padding: 1rem 1.25rem;
}
.jr-stat-number {
display: block;
font-family: var(--jr-font-head);
font-size: 1.625rem;
font-weight: 800;
color: #fff;
line-height: 1;
margin-bottom: 0.25rem;
}
.jr-stat-label {
display: block;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.65);
}
/* Section footer */
.jr-section-foot {
margin-top: 2.5rem;
text-align: center;
}
/* Footer grid */
.jr-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 2rem;
}
.jr-footer-col-title {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 0.75rem;
}
/* Segundo título dentro de la misma columna (Ayudas, debajo de Legal) */
.jr-footer-col-title-2 {
margin-top: 1.5rem;
}
.jr-footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.jr-footer-logo {
font-family: var(--jr-font-head);
font-size: 1.125rem;
font-weight: 800;
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
display: inline-block;
}
.jr-footer-social-link {
width: 32px;
height: 32px;
border-radius: var(--jr-r-f);
background: rgba(255, 255, 255, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 0.875rem;
transition:
background 0.15s,
color 0.15s;
}
.jr-footer-social-link:hover {
background: var(--jr-p-600);
color: #fff;
}
/* Alert dismiss button */
.jr-alert-close {
background: none;
border: none;
cursor: pointer;
color: currentColor;
opacity: 0.55;
padding: 0 0 0 0.5rem;
margin-left: auto;
flex-shrink: 0;
font-size: 1.1rem;
display: flex;
align-items: center;
line-height: 1;
}
.jr-alert-close:hover {
opacity: 1;
}
/* Inline text link */
.jr-link {
color: var(--jr-p-600);
font-weight: 500;
text-decoration: underline;
}
.jr-link:hover {
color: var(--jr-p-700);
}
/* Button variants */
.jr-btn-full {
width: 100%;
justify-content: center;
}
.jr-btn-outline {
background: transparent;
border-color: var(--jr-s-300);
color: var(--jr-s-700);
}
.jr-btn-outline:hover {
background: var(--jr-s-50);
border-color: var(--jr-s-400);
}
/* Cuenta layout extras */
.jr-cuenta-logo {
font-family: var(--jr-font-head);
font-weight: 800;
font-size: 1.375rem;
color: #fff;
text-decoration: none;
display: inline-block;
margin-bottom: 2.5rem;
}
.jr-cuenta-promo-text {
margin-bottom: 2rem;
}
.jr-cuenta-promo-text h2 {
color: #fff;
font-size: 1.875rem;
font-weight: 800;
margin-bottom: 0.75rem;
line-height: 1.2;
}
.jr-cuenta-promo-text p {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
line-height: 1.65;
}
.jr-cuenta-promo-list {
list-style: none;
padding: 0;
margin: 0;
}
.jr-cuenta-promo-list li {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9375rem;
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.jr-cuenta-promo-list li i {
color: var(--jr-a-400);
font-size: 1.1rem;
}
.jr-cuenta-form-footer {
margin-top: 1.5rem;
text-align: center;
font-size: 0.9375rem;
color: var(--jr-s-500);
}
/* === PAGINACIÓN === */
.jr-paginator {
display: flex;
gap: 0.375rem;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.jr-paginator li a,
.jr-paginator li span {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 0.5rem;
border-radius: var(--jr-r);
border: 1px solid var(--jr-s-200);
background: #fff;
color: var(--jr-s-700);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition:
background 0.15s,
border-color 0.15s;
}
.jr-paginator li a:hover {
background: var(--jr-p-50);
border-color: var(--jr-p-300);
color: var(--jr-p-700);
}
.jr-paginator li.active a,
.jr-paginator li.active span {
background: var(--jr-p-600);
border-color: var(--jr-p-600);
color: #fff;
font-weight: 700;
}
.jr-paginator li.disabled span {
color: var(--jr-s-300);
cursor: default;
}
/* Sidebar detalle partida */
.jr-detail-sidebar {
position: sticky;
top: calc(var(--jr-nav-h, 64px) + 1rem);
}
/* === RESPONSIVE === */
@media (max-width: 900px) {
.jr-search-layout {
grid-template-columns: 1fr;
}
.jr-filter-panel {
position: static;
}
.jr-grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jr-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jr-hero-inner {
grid-template-columns: 1fr;
}
.jr-hero-stats {
flex-direction: row;
flex-wrap: wrap;
}
.jr-hero-stats .jr-stat-card {
flex: 1;
min-width: 130px;
}
.jr-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
@media (max-width: 768px) {
.jr-hero-title {
font-size: 2rem;
}
.jr-nav-links {
display: none;
}
.jr-cuenta-wrap {
grid-template-columns: 1fr;
}
.jr-cuenta-promo {
display: none;
}
.jr-cuenta-form {
padding: 2rem 1.5rem;
min-height: 100vh;
justify-content: flex-start;
padding-top: 3rem;
}
}
@media (max-width: 600px) {
.jr-footer-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 480px) {
.jr-grid-2,
.jr-grid-3 {
grid-template-columns: minmax(0, 1fr);
}
.jr-container,
.jr-container-fluid {
padding: 0 1rem;
}
}
/* ================================================================
TARJETA PARTIDA — diseño enriquecido (specimen-partidas 2026)
================================================================ */
/* ── Grid responsivo: 1 col mobile → auto-fill desktop ── */
.jr-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.25rem;
}
@media (max-width: 480px) {
.jr-cards-grid {
grid-template-columns: 1fr;
}
}
/* ── Card contenedor ── */
.jr-card-partida {
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition:
transform 0.25s,
box-shadow 0.25s,
border-color 0.25s;
}
.jr-card-partida:hover {
transform: translateY(-4px);
box-shadow: var(--jr-sh-lg);
border-color: var(--jr-p-300);
}
/* ── Imagen ── */
.jr-card-img {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: linear-gradient(135deg, var(--jr-p-900), var(--jr-p-600));
flex-shrink: 0;
}
.jr-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jr-card-img-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.15;
font-size: 5rem;
pointer-events: none;
}
/* ── Grupo de badges sobre la imagen ── */
.jr-card-badges {
position: absolute;
top: 0.625rem;
left: 0.625rem;
right: 0.625rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.375rem;
flex-wrap: wrap;
}
.jr-card-badges-left,
.jr-card-badges-right {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
/* ── Badge urgente (partidas HOY) ── */
.jr-badge-urgent {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem 0.625rem;
border-radius: var(--jr-r-sm);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.45);
animation: jr-urgente 2s ease-in-out infinite;
}
@keyframes jr-urgente {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.78;
}
}
/* ── Badge "pronto" (esta semana) ── */
.jr-badge-pronto {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem 0.625rem;
border-radius: var(--jr-r-sm);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: linear-gradient(135deg, var(--jr-p-600), var(--jr-p-700));
color: #fff;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}
/* ── Badge exclusiva suscriptores ── */
.jr-badge-suscriptores {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem 0.625rem;
border-radius: var(--jr-r-sm);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: linear-gradient(135deg, #d97706, #b45309);
color: #fff;
box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4);
}
/* ── Badge tipo de partida (blanco sobre imagen) ── */
.jr-badge-tipo {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem 0.625rem;
border-radius: var(--jr-r-sm);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.93);
color: var(--jr-s-800);
border: 1px solid rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6px);
}
/* Cuando el badge de juego enlaza a la ficha del juego (/juegos/{slug}). */
a.jr-badge-tipo-link {
text-decoration: none;
transition: background 0.15s ease;
}
a.jr-badge-tipo-link:hover,
a.jr-badge-tipo-link:focus-visible {
background: #fff;
color: var(--jr-p-700);
}
/* ── Contenido interno ── */
.jr-card-body-rich {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
/* ── Meta: fecha + precio ── */
.jr-card-head-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.jr-card-datetime {
font-size: 0.8125rem;
font-weight: 600;
color: var(--jr-s-700);
display: flex;
align-items: center;
gap: 0.3rem;
}
.jr-card-price {
font-size: 1rem;
font-weight: 700;
color: var(--jr-p-600);
}
.jr-card-price.is-free {
color: var(--jr-success);
}
/* ── Título ── */
.jr-card-titulo {
font-family: var(--jr-font-head);
font-size: 1rem;
font-weight: 700;
color: var(--jr-s-900);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Tag sistema de juego ── */
.jr-card-sistema {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.625rem;
background: var(--jr-s-100);
border-radius: var(--jr-r-sm);
font-size: 0.75rem;
font-weight: 500;
color: var(--jr-s-600);
align-self: flex-start;
}
/* ── Tags de experiencia / modalidad ── */
.jr-card-tags {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
.jr-card-tag {
padding: 0.2rem 0.5rem;
border-radius: var(--jr-r-sm);
font-size: 0.6875rem;
font-weight: 600;
border: 1.5px solid;
}
.jr-card-tag-exp {
background: var(--jr-p-50);
color: var(--jr-p-700);
border-color: var(--jr-p-200);
}
.jr-card-tag-gratis {
background: var(--jr-success-bg);
color: var(--jr-success);
border-color: var(--jr-success-bd);
}
.jr-card-tag-paga {
background: var(--jr-warning-bg);
color: var(--jr-warning);
border-color: var(--jr-warning-bd);
}
/* ── Barra de cupos ── */
.jr-slots-bar {
display: flex;
align-items: center;
gap: 0.5rem;
}
.jr-slots-track {
flex: 1;
height: 6px;
background: var(--jr-s-200);
border-radius: 3px;
overflow: hidden;
}
.jr-slots-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s;
}
.jr-slots-fill-open {
background: linear-gradient(90deg, var(--jr-success), #34d399);
}
.jr-slots-fill-limited {
background: linear-gradient(90deg, var(--jr-warning), #f59e0b);
}
.jr-slots-fill-full {
background: linear-gradient(90deg, var(--jr-danger), #ef4444);
}
.jr-slots-text {
font-size: 0.75rem;
font-weight: 700;
color: var(--jr-s-500);
white-space: nowrap;
min-width: 2.5rem;
text-align: right;
}
/* ── Master info + CTA ── */
.jr-card-footer-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--jr-s-100);
margin-top: auto;
}
.jr-card-master-wrap {
position: relative;
flex-shrink: 0;
}
.jr-card-master-badge-dot {
position: absolute;
bottom: -1px;
right: -1px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--jr-a-500);
border: 2px solid #fff;
}
.jr-card-master-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--jr-s-800);
line-height: 1.2;
}
.jr-card-master-label {
font-size: 0.75rem;
color: var(--jr-s-400);
}
/* ================================================================
BARRA DE FILTROS HORIZONTAL (buscar partidas / buscar masters)
================================================================ */
.jr-filter-bar {
background: #fff;
border-bottom: 1px solid var(--jr-s-200);
position: sticky;
top: var(--jr-nav-h, 64px);
z-index: 40;
padding: 0.625rem 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.jr-filter-bar-inner {
display: flex;
align-items: center;
gap: 0.625rem;
flex-wrap: wrap;
}
.jr-filter-bar-sep {
width: 1px;
height: 24px;
background: var(--jr-s-200);
flex-shrink: 0;
}
.jr-filter-bar-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--jr-s-400);
white-space: nowrap;
}
.jr-filter-select {
font-size: 0.8125rem;
padding: 0.375rem 0.625rem;
border: 1px solid var(--jr-s-300);
border-radius: var(--jr-r);
background: #fff;
color: var(--jr-s-800);
cursor: pointer;
transition: border-color 0.15s;
min-width: 140px;
}
.jr-filter-select:focus {
outline: none;
border-color: var(--jr-p-400);
box-shadow: 0 0 0 3px var(--jr-p-100);
}
.jr-filter-radio-inline {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
}
.jr-filter-radio-inline label {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8125rem;
cursor: pointer;
color: var(--jr-s-700);
white-space: nowrap;
}
.jr-filter-radio-inline input[type="radio"] {
accent-color: var(--jr-p-600);
}
.jr-filter-bar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.jr-filter-count {
font-size: 0.8125rem;
color: var(--jr-s-500);
white-space: nowrap;
}
@media (max-width: 768px) {
.jr-filter-bar-right {
margin-left: 0;
}
.jr-filter-bar-sep {
display: none;
}
}
/* ================================================================
MASTER CARD — layout horizontal (buscar masters, 3 columnas)
================================================================ */
.jr-masters-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 1100px) {
.jr-masters-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.jr-masters-grid {
grid-template-columns: 1fr;
}
}
.jr-master-card-h {
display: flex;
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-xl);
overflow: hidden;
transition:
transform 0.25s,
box-shadow 0.25s,
border-color 0.25s;
}
.jr-master-card-h:hover {
transform: translateY(-3px);
box-shadow: var(--jr-sh-lg);
border-color: var(--jr-p-300);
}
.jr-master-card-img {
width: 120px;
flex-shrink: 0;
align-self: stretch;
position: relative;
background: linear-gradient(135deg, var(--jr-p-200), var(--jr-p-500));
overflow: hidden;
}
.jr-master-card-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.jr-master-card-initials {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--jr-font-head);
font-size: 2rem;
font-weight: 800;
color: var(--jr-p-800);
}
.jr-master-card-gm-badge {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--jr-p-600);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
border: 2px solid #fff;
}
.jr-master-card-content {
flex: 1;
min-width: 0;
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.jr-master-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.375rem;
}
.jr-master-card-name {
font-family: var(--jr-font-head);
font-size: 0.9375rem;
font-weight: 700;
color: var(--jr-s-900);
line-height: 1.2;
}
.jr-master-card-cost {
font-size: 0.8125rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.jr-master-card-cost.is-free {
color: var(--jr-success);
}
.jr-master-card-cost.is-paid {
color: var(--jr-a-600);
}
.jr-master-card-sub {
font-size: 0.8125rem;
color: var(--jr-s-500);
}
.jr-master-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-top: 0.125rem;
}
.jr-master-card-footer {
margin-top: auto;
padding-top: 0.5rem;
}
/* --- Tarjeta de comunidad (grilla del home) ---
overflow:hidden es obligatorio: sin él el item de grid conserva su
tamaño mínimo automático (min-content) y un nombre largo con
white-space:nowrap desborda la columna y con ella toda la página. */
.jr-comunidad-card {
position: relative;
display: flex;
gap: 1rem;
align-items: flex-start;
min-width: 0;
padding: 1.25rem;
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r);
overflow: hidden;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.jr-comunidad-card:hover {
border-color: var(--jr-p-300);
box-shadow: var(--jr-sh-md);
}
.jr-comunidad-card-overlay {
position: absolute;
inset: 0;
}
.jr-comunidad-card-body {
flex: 1;
min-width: 0;
}
.jr-comunidad-card-nombre {
font-family: var(--jr-font-head);
font-weight: 700;
font-size: 0.9375rem;
color: var(--jr-s-900);
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jr-comunidad-card-desc {
font-size: 0.8125rem;
color: var(--jr-s-500);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.jr-comunidad-card-meta {
font-size: 0.75rem;
color: var(--jr-s-400);
margin-top: 0.35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Toggle Switch */
.jr-switch {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
.jr-switch input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.jr-switch-track {
display: inline-block;
width: 2.75rem;
height: 1.5rem;
background: var(--jr-s-300);
border-radius: 9999px;
position: relative;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.jr-switch input[type="checkbox"]:checked ~ .jr-switch-track {
background: var(--jr-p-600);
}
.jr-switch-thumb {
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
background: #fff;
border-radius: 9999px;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.jr-switch input[type="checkbox"]:checked ~ .jr-switch-track .jr-switch-thumb {
transform: translateX(1.25rem);
}
.jr-switch-label {
display: flex;
align-items: center;
cursor: pointer;
gap: 0.75rem;
}
/* Tag Search Widget */
.jr-tag-wrap {
position: relative;
}
.jr-tag-box {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
padding: 0.375rem 0.5rem;
min-height: 2.5rem;
border: 1.5px solid var(--jr-s-300);
border-radius: var(--jr-r);
background: #fff;
cursor: text;
transition: border-color 0.15s;
}
.jr-tag-box:focus-within {
border-color: var(--jr-p-500);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.jr-tag-input-real {
border: none;
outline: none;
background: transparent;
font-size: 0.9375rem;
color: var(--jr-s-900);
min-width: 8rem;
flex: 1;
padding: 0.125rem 0.25rem;
font-family: inherit;
}
.jr-tag-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: var(--jr-p-100);
color: var(--jr-p-700);
border-radius: 9999px;
padding: 0.125rem 0.5rem 0.125rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
}
.jr-tag-chip-x {
background: none;
border: none;
cursor: pointer;
color: var(--jr-p-500);
font-size: 1rem;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
transition: color 0.1s;
}
.jr-tag-chip-x:hover {
color: var(--jr-danger);
}
.jr-tag-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #fff;
border: 1.5px solid var(--jr-s-200);
border-radius: var(--jr-r);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
z-index: 100;
max-height: 14rem;
overflow-y: auto;
}
.jr-tag-dropdown.is-open {
display: block;
}
.jr-tag-option {
padding: 0.5rem 0.875rem;
font-size: 0.9375rem;
color: var(--jr-s-800);
cursor: pointer;
transition: background 0.1s;
}
.jr-tag-option:hover,
.jr-tag-option.is-focused {
background: var(--jr-p-50);
color: var(--jr-p-700);
}
.jr-tag-empty {
padding: 0.75rem 0.875rem;
font-size: 0.875rem;
color: var(--jr-s-400);
text-align: center;
}
/* Disponibilidad Horaria Grid */
.disp-table {
width: 100%;
border-collapse: collapse;
}
.disp-table th {
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--jr-s-600);
padding: 0.35rem 0.5rem;
white-space: nowrap;
border: 1px solid var(--jr-s-200);
background-color: var(--jr-s-50);
}
.disp-table th:first-child {
text-align: left;
width: 4.5rem;
}
.disp-table td {
padding: 0.25rem 0.5rem;
border: 1px solid var(--jr-s-200);
text-align: center;
}
.disp-table td:first-child {
font-size: 0.8125rem;
font-weight: 600;
color: var(--jr-s-600);
white-space: nowrap;
padding-right: 0.75rem;
vertical-align: middle;
text-align: left;
background-color: var(--jr-s-50);
}
.disp-check {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
min-width: 3rem;
height: 2.25rem;
background: var(--jr-s-100);
border: 2px solid var(--jr-s-200);
border-radius: 0.5rem;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s,
transform 0.1s;
}
.disp-check:hover {
background: var(--jr-p-100);
border-color: var(--jr-p-300);
}
.disp-check:checked {
background: var(--jr-p-600);
border-color: var(--jr-p-600);
}
.disp-check:checked:hover {
background: var(--jr-p-700);
border-color: var(--jr-p-700);
}
.disp-check:active {
transform: scale(0.93);
}
/* === DETAIL SECTION TITLE === */
.jr-detail-section-title {
font-family: var(--jr-font-head);
font-size: 1rem;
font-weight: 700;
color: var(--jr-s-700);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
/* === OFFCANVAS === */
.jr-offcanvas {
background: #fff;
box-shadow: var(--jr-sh-lg);
}
.jr-offcanvas-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--jr-s-200);
}
.jr-offcanvas-close {
background: none;
border: none;
cursor: pointer;
color: var(--jr-s-500);
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--jr-r-sm);
transition:
background 0.15s,
color 0.15s;
padding: 0;
}
.jr-offcanvas-close:hover {
background: var(--jr-s-100);
color: var(--jr-s-800);
}
/* === STICKY CTA (mobile bottom bar) === */
.jr-sticky-cta {
background: #fff;
border-top: 1px solid var(--jr-s-200);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
/* === HAMBURGER BUTTON === */
.jr-hamburger {
background: none;
border: none;
cursor: pointer;
color: var(--jr-s-600);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--jr-r-sm);
transition:
background 0.15s,
color 0.15s;
padding: 0;
}
.jr-hamburger:hover {
background: var(--jr-s-100);
color: var(--jr-s-900);
}
/* === MI PROGRESO === */
/* Bloque de completitud de perfil en tres niveles (Participar · Publicar · Dirigir).
Reemplaza al callout .jr-gate-alert, que mostraba un requisito por vez. */
.jr-progreso {
padding: 1.25rem 1.5rem 1rem;
margin-bottom: 2rem;
}
.jr-progreso__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.jr-progreso__titulo {
font-family: var(--jr-font-head);
font-size: 1rem;
font-weight: 700;
color: var(--jr-s-900);
margin: 0 0 0.15rem;
}
.jr-progreso__titulo i {
color: var(--jr-a-500);
}
.jr-progreso__sub {
font-size: 0.8125rem;
color: var(--jr-s-500);
margin: 0;
}
.jr-progreso__contador {
font-size: 0.75rem;
font-weight: 700;
color: var(--jr-a-600);
background: rgba(201, 168, 76, 0.14);
border-radius: 99px;
padding: 0.2rem 0.65rem;
white-space: nowrap;
}
.jr-progreso__nivel {
display: flex;
gap: 0.875rem;
padding: 0.875rem 0;
border-top: 1px solid var(--jr-s-100);
}
.jr-progreso__nivel:first-of-type {
border-top: none;
padding-top: 0;
}
.jr-progreso__nivel.is-bloqueado {
opacity: 0.55;
}
.jr-progreso__marca {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
background: var(--jr-s-100);
color: var(--jr-s-400);
}
.is-ok .jr-progreso__marca {
background: rgba(34, 160, 90, 0.14);
color: #22a05a;
}
.is-curso .jr-progreso__marca {
background: rgba(201, 168, 76, 0.16);
color: var(--jr-a-600);
}
.jr-progreso__cuerpo {
flex: 1;
min-width: 0;
}
.jr-progreso__fila {
display: flex;
align-items: center;
gap: 0.625rem;
flex-wrap: wrap;
margin-bottom: 0.15rem;
}
.jr-progreso__nombre {
font-size: 0.9375rem;
font-weight: 700;
color: var(--jr-s-900);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.jr-progreso__estado {
font-size: 0.7rem;
font-weight: 700;
padding: 0.1rem 0.5rem;
border-radius: 99px;
border: 1px solid currentColor;
}
.jr-progreso__estado.is-ok {
color: #22a05a;
}
.jr-progreso__estado.is-curso {
color: var(--jr-a-600);
}
.jr-progreso__estado.is-bloqueado {
color: var(--jr-s-400);
}
.jr-progreso__desc {
font-size: 0.8125rem;
color: var(--jr-s-500);
margin: 0 0 0.625rem;
line-height: 1.5;
}
.jr-progreso__lista {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
}
.jr-progreso__lista li {
font-size: 0.8125rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
.jr-progreso__lista li.is-pendiente {
color: var(--jr-s-700);
font-weight: 500;
}
.jr-progreso__lista li.is-pendiente i {
font-size: 0.5rem;
color: var(--jr-a-500);
}
.jr-progreso__lista li.is-hecho {
color: var(--jr-s-400);
text-decoration: line-through;
}
.jr-progreso__lista li.is-hecho i {
color: #22a05a;
text-decoration: none;
}
.jr-progreso__premio {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--jr-s-700);
background: var(--jr-s-50);
border: 1px solid var(--jr-s-200);
border-left: 3px solid var(--jr-a-500);
border-radius: var(--jr-r);
padding: 0.625rem 0.875rem;
margin-bottom: 0.75rem;
}
.jr-progreso__premio i {
color: var(--jr-a-600);
}
.jr-progreso__requisito {
font-size: 0.78rem;
color: var(--jr-s-500);
font-style: italic;
}
.jr-progreso__pie {
font-size: 0.8125rem;
color: var(--jr-s-500);
border-top: 1px solid var(--jr-s-100);
margin: 0.5rem 0 0;
padding-top: 0.875rem;
}
@media (max-width: 640px) {
.jr-progreso {
padding: 1rem 1.125rem 0.875rem;
}
.jr-progreso__lista {
flex-direction: column;
gap: 0.25rem;
}
}
/* === MENÚ PUBLICAR === */
/* Punto de entrada único de creación. Los ítems bloqueados se muestran con su
requisito en vez de ocultarse. */
.jr-publicar-trigger {
background: none;
border: 1px solid var(--jr-s-200);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.35rem;
border-radius: var(--jr-r);
padding: 0.4rem 0.75rem;
font-weight: 600;
}
.jr-publicar-trigger:hover {
background: var(--jr-s-50);
border-color: var(--jr-s-300);
}
.jr-publicar-menu {
min-width: 260px;
}
/* Ítem bloqueado: candado a la izquierda alineado con la primera línea, y el
requisito debajo del label — no debajo del candado. */
.jr-dropdown-item.is-bloqueado {
opacity: 0.6;
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
column-gap: 0.625rem;
row-gap: 0.1rem;
}
.jr-dropdown-item.is-bloqueado > .bi {
grid-row: 1 / span 2;
align-self: start;
line-height: 1.4;
}
.jr-publicar-txt {
grid-column: 2;
}
.jr-publicar-req {
grid-column: 2;
font-size: 0.7rem;
color: var(--jr-s-500);
line-height: 1.3;
}
.jr-publicar-pie {
font-size: 0.78rem;
color: var(--jr-s-500);
line-height: 1.5;
padding: 0.625rem 0.875rem 0.25rem;
}
/* === BANDEJA UNIFICADA === */
/* Reemplaza el botón "Solicitudes" de destino variable, la campanita y los
badges sueltos. Un solo lugar, con secciones estables. */
.jr-bandeja-trigger {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.35rem;
position: relative;
padding: 0.4rem 0.6rem;
border-radius: var(--jr-r);
}
.jr-bandeja-trigger:hover {
background: var(--jr-s-50);
}
.jr-bandeja-label {
font-size: 0.8125rem;
}
.jr-bandeja-menu {
min-width: 280px;
}
.jr-bandeja-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.jr-bandeja-item.is-nuevo {
font-weight: 600;
}
.jr-bandeja-badge {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--jr-p-500);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
border-radius: 99px;
line-height: 1;
}
.jr-bandeja-cero {
margin-left: auto;
font-size: 0.7rem;
color: var(--jr-s-400);
}
.jr-bandeja-vacia {
font-size: 0.8rem;
color: var(--jr-s-500);
padding: 0.625rem 0.875rem;
}
/* Aviso individual: a diferencia del resto de la bandeja, que son contadores,
acá cada línea es un hecho concreto y necesita dos renglones. */
.jr-bandeja-aviso {
display: block;
line-height: 1.35;
}
.jr-bandeja-aviso-titulo {
display: block;
font-weight: 600;
font-size: 0.8125rem;
}
.jr-bandeja-aviso-texto {
display: block;
font-size: 0.75rem;
color: var(--jr-s-500);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1100px) {
.jr-bandeja-label {
display: none;
}
}
/* === REPORTAR EN CONTEXTO === */
/* Quien necesita reportar está mirando el contenido, no el pie de página. */
.jr-reportar-pie {
padding-top: 1.5rem;
padding-bottom: 2rem;
text-align: right;
}
.jr-reportar-link {
font-size: 0.8125rem;
color: var(--jr-s-400);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: color 0.15s;
}
.jr-reportar-link:hover {
color: var(--jr-danger, #dc2626);
text-decoration: underline;
}
/* === CONMUTADOR DE VISTA === */
/* Espacios y Eventos son una sección con dos vistas (lista/mapa, lista/calendario),
no dos features hermanas. Los filtros y el CTA de alta se comparten. */
.jr-vista-switch {
display: inline-flex;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r);
overflow: hidden;
background: #fff;
}
.jr-vista-switch a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.85rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--jr-s-500);
text-decoration: none;
transition:
background 0.15s,
color 0.15s;
}
.jr-vista-switch a + a {
border-left: 1px solid var(--jr-s-200);
}
.jr-vista-switch a:hover {
background: var(--jr-s-50);
color: var(--jr-s-800);
}
.jr-vista-switch a.is-activa {
background: var(--jr-p-50);
color: var(--jr-p-700);
}
/* ============================================================
PIEZAS DE LA REVISIÓN UX
Solo lo que no existía ya en esta hoja. Todo lo demás
(jr-card, jr-alert, jr-empty, jr-btn, jr-badge, jr-section,
jr-grid-*, jr-flex-*, jr-hint…) se reutiliza tal cual.
============================================================ */
/* --- Encabezado de página con acciones a la derecha --- */
.jr-page-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.jr-page-head-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.jr-page-title {
font-family: var(--jr-font-head);
font-size: 1.5rem;
font-weight: 800;
color: var(--jr-s-900);
margin-bottom: 0.25rem;
}
.jr-page-sub {
color: var(--jr-s-500);
font-size: 0.9375rem;
margin: 0;
}
/* Píldora de contador dentro de un jr-btn (ej: Solicitudes 3).
No reutiliza .jr-bandeja-badge porque esa trae margin-left:auto,
pensado para la lista de la bandeja, que dentro de un botón rompe. */
.jr-btn-contador {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 99px;
background: var(--jr-p-500);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
vertical-align: middle;
}
.jr-subsection-title {
font-family: var(--jr-font-head);
font-size: 1.125rem;
font-weight: 700;
color: var(--jr-s-900);
margin-bottom: 0.25rem;
}
.jr-panel-title {
font-family: var(--jr-font-head);
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--jr-s-700);
margin-bottom: 1rem;
}
.jr-eyebrow-title {
font-family: var(--jr-font-head);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--jr-s-400);
margin: 0;
}
.jr-link-title {
font-family: var(--jr-font-head);
font-weight: 700;
font-size: 0.9375rem;
color: var(--jr-s-900);
text-decoration: none;
line-height: 1.3;
}
.jr-legal-section-title {
font-family: var(--jr-font-head);
font-size: 1.0625rem;
font-weight: 700;
color: var(--jr-s-900);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* --- Guía "Qué podés publicar" --- */
.jr-guia-llave {
border-left: 4px solid var(--jr-a-500);
padding: 1.75rem;
margin-bottom: 1.75rem;
}
.jr-guia-llave p {
line-height: 1.8;
color: var(--jr-s-700);
margin: 0 0 1rem;
}
.jr-guia-llave p:last-of-type {
font-size: 0.9375rem;
color: var(--jr-s-600);
margin-bottom: 0;
}
.jr-guia-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 1.25rem;
margin-bottom: 2rem;
}
.jr-guia-item {
padding: 1.5rem;
display: flex;
flex-direction: column;
}
.jr-guia-item h3 {
font-family: var(--jr-font-head);
font-size: 1.0625rem;
font-weight: 700;
color: var(--jr-s-900);
margin-bottom: 0.5rem;
}
.jr-guia-item h3 i {
color: var(--jr-p-500);
}
.jr-guia-que {
font-size: 0.9375rem;
color: var(--jr-s-700);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.jr-guia-req {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--jr-a-600);
margin-bottom: 0.5rem;
}
.jr-guia-extra {
font-size: 0.85rem;
color: var(--jr-s-500);
line-height: 1.6;
margin-bottom: 1rem;
flex: 1;
}
.jr-guia-roles {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.jr-guia-rol {
padding: 0.875rem 1rem;
border-radius: var(--jr-r);
background: var(--jr-s-50);
border-left: 3px solid var(--jr-s-200);
}
.jr-guia-rol.is-creador {
background: var(--jr-p-50);
border-left-color: var(--jr-p-500);
}
.jr-guia-rol.is-admin {
border-left-color: var(--jr-s-400);
}
.jr-guia-rol-nombre {
font-weight: 700;
color: var(--jr-s-900);
margin-bottom: 0.25rem;
}
.jr-guia-rol-desc {
font-size: 0.9rem;
color: var(--jr-s-600);
}
.jr-guia-cierre {
text-align: center;
padding: 2rem;
border-radius: var(--jr-r-lg);
background: linear-gradient(135deg, var(--jr-p-50), var(--jr-s-50));
border: 1px solid var(--jr-s-100);
}
.jr-guia-cierre h3 {
font-family: var(--jr-font-head);
font-size: 1.25rem;
font-weight: 800;
color: var(--jr-s-900);
margin-bottom: 0.75rem;
}
.jr-guia-cierre p {
color: var(--jr-s-600);
font-size: 0.9375rem;
margin-bottom: 1.25rem;
}
/* --- Pasos numerados (aterrizaje post-registro) --- */
.jr-pasos {
text-align: left;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-lg);
overflow: hidden;
margin-bottom: 1.5rem;
}
.jr-pasos-head {
padding: 0.75rem 1.125rem;
background: var(--jr-s-50);
border-bottom: 1px solid var(--jr-s-200);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--jr-s-500);
}
.jr-paso {
display: flex;
gap: 0.875rem;
padding: 0.95rem 1.125rem;
border-top: 1px solid var(--jr-s-100);
opacity: 0.75;
}
.jr-paso:first-of-type {
border-top: none;
}
.jr-paso.is-ahora {
opacity: 1;
}
.jr-paso-marca {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
background: var(--jr-s-100);
color: var(--jr-s-400);
}
.jr-paso.is-ahora .jr-paso-marca {
background: var(--jr-p-50);
color: var(--jr-a-600);
}
.jr-paso-titulo {
font-weight: 700;
font-size: 0.9rem;
color: var(--jr-s-900);
margin-bottom: 0.1rem;
}
.jr-paso-texto {
font-size: 0.8125rem;
color: var(--jr-s-500);
line-height: 1.5;
}
.jr-paso-ahora {
font-size: 0.68rem;
font-weight: 700;
color: var(--jr-a-600);
border: 1px solid currentColor;
border-radius: 99px;
padding: 0.05rem 0.45rem;
margin-left: 0.35rem;
}
/* --- Tarjeta de éxito centrada (registro exitoso) --- */
.jr-exito {
text-align: center;
padding: 2.5rem 2rem 2rem;
background: #fff;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-xl);
box-shadow: var(--jr-sh);
}
.jr-exito-icono {
width: 72px;
height: 72px;
background: var(--jr-success-bg);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--jr-success);
margin-bottom: 1.25rem;
}
.jr-exito h1 {
font-family: var(--jr-font-head);
font-size: 1.625rem;
font-weight: 800;
color: var(--jr-s-900);
margin-bottom: 0.75rem;
}
.jr-exito-lead {
color: var(--jr-s-600);
line-height: 1.65;
margin-bottom: 1.75rem;
}
/* --- Fila de entidad con acciones (Mis espacios, Siguiendo, Organizo) --- */
.jr-fila {
display: flex;
align-items: center;
gap: 0.875rem;
flex-wrap: wrap;
padding: 0.875rem 1rem;
}
.jr-fila-icono {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--jr-r);
flex-shrink: 0;
background: var(--jr-s-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--jr-s-400);
}
.jr-fila-cuerpo {
flex: 1;
min-width: 0;
}
.jr-fila-titulo {
font-weight: 700;
font-size: 0.9375rem;
color: var(--jr-s-900);
text-decoration: none;
display: block;
}
.jr-fila-meta {
font-size: 0.78rem;
color: var(--jr-s-500);
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.15rem;
}
.jr-fila-meta .is-aviso {
color: var(--jr-warning);
}
.jr-fila-acciones {
display: flex;
gap: 0.375rem;
flex-shrink: 0;
}
.jr-lista-filas {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
/* --- Bloque de sección dentro del panel --- */
.jr-bloque {
margin-bottom: 2.5rem;
}
.jr-bloque-titulo {
font-family: var(--jr-font-head);
font-size: 1.125rem;
font-weight: 700;
color: var(--jr-s-700);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.jr-bloque-titulo i {
color: var(--jr-p-500);
}
/* Fila de encabezado de bloque: título a la izquierda, acción a la derecha.
El h2 conserva .jr-bloque-titulo (el tamaño vive ahí) y cede el margen
inferior a la fila. */
.jr-bloque-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.jr-bloque-head .jr-bloque-titulo {
margin-bottom: 0;
}
.jr-bloque-cupo {
font-size: 0.75rem;
font-weight: 500;
color: var(--jr-s-500);
}
/* --- Contexto del reporte --- */
.jr-reporte-contexto {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.875rem 1.125rem;
margin-bottom: 1.25rem;
border-radius: var(--jr-r);
background: var(--jr-s-50);
border: 1px solid var(--jr-s-200);
font-size: 0.875rem;
color: var(--jr-s-700);
line-height: 1.5;
}
.jr-reporte-contexto i {
color: var(--jr-a-600);
margin-top: 0.15rem;
}
.jr-reporte-url {
font-size: 0.8rem;
color: var(--jr-s-500);
}
.jr-reporte-nota {
font-size: 0.8125rem;
color: var(--jr-s-500);
margin-top: 1.5rem;
line-height: 1.6;
}
/* --- Anchos de lectura para páginas de contenido / formularios --- */
.jr-container-lectura {
max-width: 900px;
}
.jr-container-form {
max-width: 620px;
}
.jr-container-angosto {
max-width: 640px;
}
/* --- Variantes de fila y avatar usadas en el panel --- */
.jr-fila-bordeada {
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r);
padding: 0.625rem 0.75rem;
}
.jr-avatar-recorte {
overflow: hidden;
flex-shrink: 0;
}
.jr-avatar-recorte img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.jr-siguiendo {
padding: 1.5rem;
margin-top: 2rem;
}
/* --- Pestaña "Organizo" de Mis eventos --- */
.jr-evento-estado {
font-size: 0.7rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 4px;
background: var(--jr-s-100);
color: var(--jr-s-500);
}
/* --- Utilidades chicas de navegación --- */
.jr-caret {
font-size: 0.7rem;
opacity: 0.6;
}
.jr-icono-lg {
font-size: 1.5rem;
}
.jr-sidebar-sep-indent {
padding-left: 0.75rem;
}
.jr-sidebar-contador {
margin-left: auto;
font-size: 0.72rem;
font-weight: 700;
padding: 0.05rem 0.4rem;
border-radius: 99px;
background: rgba(201, 168, 76, 0.18);
color: var(--jr-a-400);
}
.jr-avatar-foto {
padding: 0;
overflow: hidden;
}
.jr-offcanvas-user {
border-top: 1px solid var(--jr-s-200);
}
.jr-offcanvas-user-nick {
font-weight: 600;
font-size: 0.9375rem;
color: var(--jr-s-900);
}
.jr-offcanvas-user-rol {
font-size: 0.8125rem;
color: var(--jr-s-500);
}
.jr-logo-img {
display: block;
}
/* --- Sidebar: bloque de comunidad activa y selector --- */
.jr-sidebar-user-datos {
min-width: 0;
}
.jr-sidebar-comunidad {
font-size: 0.8rem;
color: var(--jr-s-500);
padding: 0.25rem 0.75rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jr-sidebar-comunidad i {
color: var(--jr-p-400);
}
.jr-sidebar-cambiar {
font-size: 0.8rem;
color: var(--jr-s-400);
padding: 0.25rem 0.75rem;
display: block;
text-decoration: none;
}
.jr-modal {
border-radius: var(--jr-r-lg);
border: 1px solid var(--jr-s-200);
padding: 1.5rem;
min-width: 280px;
max-width: 360px;
box-shadow: var(--jr-sh-lg);
}
.jr-modal-titulo {
font-family: var(--jr-font-head);
font-size: 1rem;
font-weight: 700;
color: var(--jr-s-900);
margin-bottom: 1rem;
}
.jr-modal-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.jr-modal-opcion {
display: block;
width: 100%;
text-align: left;
padding: 0.5rem 0.75rem;
border-radius: var(--jr-r);
border: none;
background: transparent;
color: var(--jr-s-800);
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
}
.jr-modal-opcion.is-activa {
background: var(--jr-p-50);
color: var(--jr-p-700);
font-weight: 600;
}
.jr-modal-pie {
margin-top: 1rem;
text-align: right;
}
.jr-modal-cerrar {
font-size: 0.85rem;
color: var(--jr-s-500);
background: none;
border: none;
cursor: pointer;
padding: 0.25rem 0.5rem;
}
/* --- Zona de flashes del layout --- */
.jr-flash-zona {
padding-top: 0.75rem;
}
/* === BANNER DE COOKIES === */
.jr-cookie-banner {
display: none;
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
width: calc(100% - 2rem);
max-width: 640px;
background: var(--jr-s-900);
color: #fff;
border-radius: var(--jr-r-xl);
box-shadow: var(--jr-sh-lg);
padding: 1.25rem 1.5rem;
}
.jr-cookie-banner.is-visible {
display: block;
}
.jr-cookie-inner {
display: flex;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.jr-cookie-icono {
flex-shrink: 0;
margin-top: 0.125rem;
font-size: 1.375rem;
color: var(--jr-a-400);
}
.jr-cookie-texto {
flex: 1;
min-width: 200px;
}
.jr-cookie-titulo {
margin: 0 0 0.25rem;
font-family: var(--jr-font-head);
font-weight: 700;
font-size: 0.9375rem;
color: #fff;
}
.jr-cookie-desc {
margin: 0;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
}
.jr-cookie-desc a {
color: var(--jr-a-400);
text-decoration: underline;
}
.jr-cookie-acciones {
display: flex;
gap: 0.625rem;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
}
.jr-cookie-btn {
border-radius: var(--jr-r);
padding: 0.4375rem 1rem;
font-size: 0.8125rem;
font-family: var(--jr-font-body);
cursor: pointer;
white-space: nowrap;
transition:
border-color 0.2s,
color 0.2s,
background 0.2s;
}
.jr-cookie-btn-ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.75);
}
.jr-cookie-btn-ghost:hover {
border-color: rgba(255, 255, 255, 0.6);
color: #fff;
}
.jr-cookie-btn-accept {
background: var(--jr-a-500);
border: none;
color: #0f172a;
padding: 0.4375rem 1.25rem;
font-weight: 600;
}
.jr-cookie-btn-accept:hover {
background: var(--jr-a-400);
}
.jr-cookie-banner.is-saliendo {
opacity: 0;
transition: opacity 0.3s;
}
/* --- Mi Taberna: rejilla de columnas del panel --- */
.jr-taberna-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
.jr-taberna-grid.is-doble {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
.jr-taberna-grid.is-doble {
grid-template-columns: 1fr;
}
}
/* Bloque a todo el ancho debajo del grid de Mi Taberna. El grid no lleva
margen inferior, así que sin esto el encabezado queda pegado a la última
tarjeta de la columna. Mismo aire que .jr-taberna-explorar. */
.jr-taberna-bloque {
margin-top: 2rem;
}
.jr-taberna-explorar {
margin-top: 2rem;
padding: 1.25rem;
background: var(--jr-s-50);
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r);
}
.jr-taberna-explorar-titulo {
font-size: 0.8rem;
color: var(--jr-s-500);
margin-bottom: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* --- Switch bloqueado: se muestra con su motivo en vez de ocultarse --- */
.jr-switch-label.is-bloqueado {
opacity: 0.55;
cursor: not-allowed;
}
.jr-switch-label.is-bloqueado .jr-switch {
pointer-events: none;
}
.jr-switch-motivo {
margin-top: 0.5rem;
font-size: 0.8125rem;
line-height: 1.55;
}
.jr-switch-motivo ul {
margin: 0.35rem 0 0;
padding-left: 1.25rem;
}
.jr-switch-titulo {
color: var(--jr-s-900);
}
.jr-switch-desc {
font-size: 0.875rem;
color: var(--jr-s-500);
}
/* === TARJETA DE VISIBILIDAD DEL PERFIL === */
/* Encabeza /mi-perfil: primero el objetivo (el switch), después lo que falta.
Tres estados — bloqueado (ámbar), listo (verde), publicado (neutro). */
.jr-visibilidad {
border: 1px solid var(--jr-s-200);
border-left-width: 4px;
border-radius: var(--jr-r-lg);
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
background: #fff;
}
.jr-visibilidad.is-bloqueado {
background: var(--jr-warning-bg);
border-color: var(--jr-warning-bd);
border-left-color: var(--jr-warning);
}
.jr-visibilidad.is-listo {
background: var(--jr-success-bg);
border-color: var(--jr-success-bd);
border-left-color: var(--jr-success);
}
.jr-visibilidad.is-publicado {
background: #fff;
border-color: var(--jr-s-200);
border-left-color: var(--jr-success);
}
.jr-visibilidad__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.jr-visibilidad__estado {
font-size: 0.75rem;
font-weight: 700;
padding: 0.2rem 0.65rem;
border-radius: 99px;
white-space: nowrap;
border: 1px solid currentColor;
}
.is-bloqueado > .jr-visibilidad__head .jr-visibilidad__estado {
color: var(--jr-warning);
}
.is-listo > .jr-visibilidad__head .jr-visibilidad__estado {
color: var(--jr-success);
}
.is-publicado > .jr-visibilidad__head .jr-visibilidad__estado {
color: var(--jr-success);
}
.jr-visibilidad__intro {
font-size: 0.875rem;
color: var(--jr-s-700);
line-height: 1.55;
margin: 1rem 0 0.625rem;
}
.jr-visibilidad__lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.jr-visibilidad__lista li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--jr-s-800);
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r);
padding: 0.5rem 0.75rem;
}
.jr-visibilidad__lista li i {
font-size: 0.5rem;
color: var(--jr-warning);
flex-shrink: 0;
}
.jr-visibilidad__lista li span {
flex: 1;
min-width: 0;
}
.jr-visibilidad__ir {
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
color: var(--jr-p-600);
}
.jr-visibilidad__ir:hover {
text-decoration: underline;
}
.jr-visibilidad__hechos {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
margin: 0.875rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--jr-s-200);
font-size: 0.8125rem;
color: var(--jr-s-500);
}
.jr-visibilidad__hechos i {
color: var(--jr-success);
}
@media (max-width: 640px) {
.jr-visibilidad__lista li {
flex-wrap: wrap;
}
}
/* --- Destino de ancla: deja aire bajo el header fijo al saltar a un campo --- */
[id^="campo-"] {
scroll-margin-top: calc(var(--jr-nav-h, 64px) + 1.5rem);
}
.jr-campo-angosto {
max-width: 18rem;
}
/* --- Separador "Opcional" dentro de Mi progreso --- */
/* Lo que va debajo no cuenta para el contador: se muestra porque enterarse de
que existe es útil, no porque sea un pendiente. */
.jr-progreso__separador {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1rem 0 0.25rem;
}
.jr-progreso__separador::before,
.jr-progreso__separador::after {
content: "";
flex: 1;
height: 1px;
background: var(--jr-s-200);
}
.jr-progreso__separador span {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--jr-s-400);
}
.jr-progreso__nivel.is-opcional {
border-top: none;
padding-top: 0.5rem;
}
.is-opcional .jr-progreso__marca {
background: var(--jr-s-100);
color: var(--jr-s-500);
}
/* --- Tarjeta de formulario y nota al pie --- */
.jr-form-card {
padding: 1.75rem;
}
.jr-form-nota {
margin-top: 1.25rem;
text-align: center;
}
.jr-req {
color: var(--jr-danger);
}
/* --- Accesos de exploración de la pantalla de logout --- */
.jr-logout-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.625rem;
margin-top: 0.75rem;
}
.jr-logout-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.875rem 0.5rem;
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r);
background: var(--jr-s-50);
color: var(--jr-s-700);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 600;
transition:
border-color 0.15s,
color 0.15s,
background 0.15s;
}
.jr-logout-link i {
font-size: 1.25rem;
color: var(--jr-p-500);
}
.jr-logout-link:hover {
border-color: var(--jr-p-400);
background: #fff;
color: var(--jr-p-700);
}
/* --- Contador de caracteres bajo un campo --- */
.jr-contador-chars {
color: var(--jr-s-400);
font-size: 0.8125rem;
}
/* ══════════════════════════════════════════════════════════════════
LISTADOS — utilidades compartidas
Genéricas, no atadas a eventos: sirven para cualquier pantalla de
listado con encabezado, filtros, grilla y paginador.
══════════════════════════════════════════════════════════════════ */
.jr-mb-lg {
margin-bottom: 1.5rem;
}
/* Fila del contador de resultados, arriba de la grilla */
.jr-listado-meta {
margin-bottom: 1rem;
}
/* .jr-paginator ya se centra solo, sólo hace falta separarlo de la grilla */
.jr-paginator.is-separada {
margin-top: 1rem;
}
/* Estado vacío dentro de un marco propio, cuando no hay card que lo contenga */
.jr-empty.is-encuadrada {
border: 1px solid var(--jr-s-200);
border-radius: var(--jr-r-lg);
background: #fff;
}
/* Formulario de filtros en una card */
.jr-filtros-fila {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
}
.jr-filtros-campo {
flex: 1;
min-width: 200px;
}
.jr-filtros-select {
width: 160px;
}
/* Campo de búsqueda en la barra sticky, más ancho que un select de filtro */
.jr-filter-select.is-ancho {
min-width: 220px;
}
/* ══════════════════════════════════════════════════════════════════
EVENTOS — listado y detalle
Referencia visual: resources/specimen_eventos/index.html
══════════════════════════════════════════════════════════════════ */
/* ── Cover ambiente ──────────────────────────────────────────────
La gente sube fotos 4:5, cuadradas o 9:16 (flyers de redes), nunca
panorámicas. Recortarlas a 16:9 tira más de la mitad de la imagen.
Solución: la misma foto dos veces — de fondo escalada y borrosa para
llenar el marco, y encima entera con object-fit:contain.
Resultado: nada se recorta y todas las cards miden igual.
Los selectores llevan `.jr-card-img img.…` porque `.jr-card-img img`
(jr-design.css:1877) fuerza object-fit:cover y le gana a una clase sola. */
.jr-card-img.is-ambient {
background: var(--jr-s-800);
}
.jr-card-img img.jr-card-img-bg {
position: absolute;
inset: 0;
object-fit: cover;
filter: blur(20px) brightness(0.62) saturate(1.25);
transform: scale(1.18);
}
.jr-card-img img.jr-card-img-fg {
position: absolute;
inset: 0;
object-fit: contain;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
/* ── Cuadrito de fecha ───────────────────────────────────────────
Definición única para todo el sitio. Se renderiza siempre a través
del element templates/element/evento_datebox.php, que es también el
único lugar donde viven los nombres de los meses en español.
Día grande arriba, mes abajo, como el especimen canónico
(specimen_solo_frontend/index.html:766). */
.jr-datebox {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 3rem;
padding: 0.4rem 0.5rem;
background: var(--jr-p-600);
color: #fff;
border-radius: var(--jr-r);
text-align: center;
line-height: 1;
}
.jr-datebox-dia {
font-family: var(--jr-font-head);
font-size: 1.375rem;
font-weight: 800;
line-height: 1;
}
.jr-datebox-mes {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--jr-p-200);
margin-top: 0.15rem;
}
.jr-datebox-dow {
font-size: 0.5625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--jr-p-300);
margin-bottom: 0.15rem;
}
/* Escala chica: filas compactas (próximos eventos, eventos de comunidad) */
.jr-datebox.is-sm {
min-width: 2.5rem;
padding: 0.3rem 0.4rem;
}
.jr-datebox.is-sm .jr-datebox-dia {
font-size: 1.0625rem;
}
.jr-datebox.is-sm .jr-datebox-mes {
font-size: 0.5625rem;
}
/* Escala grande: header del detalle */
.jr-datebox.is-lg {
min-width: 4.75rem;
padding: 0.75rem 0.625rem;
border-radius: var(--jr-r-lg);
}
.jr-datebox.is-lg .jr-datebox-dia {
font-size: 2.375rem;
}
.jr-datebox.is-lg .jr-datebox-mes {
font-size: 0.75rem;
}
.jr-datebox.is-lg .jr-datebox-dow {
font-size: 0.6875rem;
}
/* Variante sobre imagen. No se posiciona sola: va dentro de
.jr-card-badges-left, que ya resuelve la ubicación y el z-index. */
.jr-datebox.is-overlay {
background: rgba(255, 255, 255, 0.95);
color: var(--jr-s-900);
border: 1px solid rgba(0, 0, 0, 0.08);
backdrop-filter: blur(6px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.jr-datebox.is-overlay .jr-datebox-mes {
color: var(--jr-p-600);
}
.jr-datebox.is-overlay .jr-datebox-dow {
color: var(--jr-s-400);
}
/* ── Header compacto del detalle de evento ───────────────────────
Sin banner: el primer dato que se lee es la fecha. La foto del
evento vive en la barra lateral, nítida y sin recortar. */
.jr-evento-head {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
}
.jr-evento-head-cuerpo {
flex: 1;
min-width: 0;
}
.jr-evento-head-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.625rem;
}
.jr-evento-head .jr-breadcrumb {
margin-bottom: 0.5rem;
}
@media (max-width: 480px) {
.jr-evento-head {
padding: 1.125rem;
gap: 0.875rem;
}
.jr-datebox.is-lg {
min-width: 3.75rem;
padding: 0.5rem;
}
.jr-datebox.is-lg .jr-datebox-dia {
font-size: 1.75rem;
}
}
/* ── Foto del evento en la barra lateral ─────────────────────────
Sin recortar: la proporción la manda la foto. */
.jr-evento-foto-side {
display: block;
background: var(--jr-s-100);
border-bottom: 1px solid var(--jr-s-200);
}
.jr-evento-foto-side img {
display: block;
width: 100%;
height: auto;
}
/* ── Stack de la columna principal del detalle ───────────────────
Reemplaza los margin-bottom repetidos card por card. */
.jr-detail-stack {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* ── Sidebar sin sticky propio ───────────────────────────────────
.jr-detail-sidebar trae position:sticky porque en Partidas y Perfiles la
clase va sobre el