976e45f156
- index.css: sidebar 210px, nav con fuente Impact/Anton uppercase y tamaño rem absoluto, calendario sin gap (bordes internos), celdas 68px, pills 12px, daynum 0.88rem, hoy resaltado con círculo rosa, padding lateral en main para separar del sidebar, corrección de bugs (font-size 4px→legible, max-width 6mv→100%) - index.html: JS actualizado con Fridays for Future en 2º y último viernes, resaltado del día actual, leyenda de colectivos, todos los colectivos del último pull (euskera, teatro, montaña, asambleas) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
736 lines
17 KiB
CSS
736 lines
17 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
|
||
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
|
||
|
||
/* Fuente local Code462W Pink */
|
||
@font-face {
|
||
font-family: 'Code462WPink';
|
||
src: url('/Code462WPink-Regular.ttf') format('truetype');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
:root{
|
||
--sidebar-w: 210px; /* reducido de 250px */
|
||
--sidebar-rail: 48px;
|
||
|
||
/* “Impact” consistente: Anton (Google) + fallback a Impact */
|
||
--impact: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif;
|
||
}
|
||
|
||
/* Ocultar visualmente el checkbox */
|
||
.sr-only{
|
||
position: absolute !important;
|
||
width: 1px; height: 1px;
|
||
padding: 0; margin: -1px;
|
||
overflow: hidden; clip: rect(0,0,0,0);
|
||
border: 0;
|
||
}
|
||
|
||
/* Botón ☰ (solo se muestra en tablet/móvil) */
|
||
.sb-toggle{
|
||
position: fixed; inset: 8px auto auto 8px;
|
||
width: 40px; height: 40px;
|
||
display: none; /* se activa en media queries */
|
||
align-items: center; justify-content: center;
|
||
border-radius: 10px;
|
||
background: #ff00aa; color: #000; font-weight: 800;
|
||
z-index: 1001;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,.25);
|
||
cursor: pointer; user-select: none;
|
||
}
|
||
|
||
|
||
body {
|
||
background: url('/img/fondo.jpg') no-repeat center center fixed;
|
||
background-size: cover;
|
||
color: #000;
|
||
font-family: 'Rock Salt';
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.logo {
|
||
width: 100%;
|
||
max-width: 180px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.imagen {
|
||
width: 100%;
|
||
border-radius: 10px;
|
||
|
||
}
|
||
|
||
.sidebar{
|
||
width: var(--sidebar-w);
|
||
background: #000;
|
||
color: #fff;
|
||
padding: 20px;
|
||
text-align: center;
|
||
min-height: 100vh;
|
||
position: fixed; left: 0; top: 0;
|
||
z-index: 1000;
|
||
overflow-y: auto;
|
||
transition: transform .25s ease, width .25s ease;
|
||
}
|
||
|
||
.sidebar h2,
|
||
.sidebar h3{
|
||
font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||
font-weight: 1000;
|
||
font-size: 2em;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.sidebar p {
|
||
font-size: 0.9em;
|
||
color: #ff00aa;
|
||
}
|
||
/* Título sidebar (en tu HTML es h2, no h3) */
|
||
.sidebar h2{
|
||
font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||
font-weight: 900;
|
||
}
|
||
|
||
/* NAV sidebar: los puntos están en el UL, no en el NAV */
|
||
.sidebar .sidebar-nav ul{
|
||
list-style: none; /* QUITA LOS PUNTOS */
|
||
padding: 0;
|
||
margin: 50px 0 0;
|
||
|
||
display: flex; /* columna real */
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.sidebar .sidebar-nav li{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Links tipo “caja” */
|
||
.sidebar .sidebar-nav a{
|
||
display: block;
|
||
|
||
font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||
font-weight: 1200;
|
||
letter-spacing: .6px;
|
||
font-size: 1.2rem;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
|
||
padding: 12px 12px;
|
||
border-radius: 8px;
|
||
border: 2px solid rgba(255,0,170,.95);
|
||
background: rgba(255,255,255,.04);
|
||
|
||
transition: background .15s ease, transform .12s ease, color .15s ease;
|
||
}
|
||
|
||
.sidebar .sidebar-nav a:hover{
|
||
background: #ff00aa;
|
||
color: #000;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
|
||
main {
|
||
margin-left: var(--sidebar-w);
|
||
transition: margin-left .25s ease;
|
||
flex-grow: 1;
|
||
padding: 0 16px 0 20px; /* 20px izquierda para separar del sidebar */
|
||
text-align: center;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
header {
|
||
background: #ff00aa;
|
||
color: white;
|
||
padding: 1px;
|
||
font-size: 2em;
|
||
}
|
||
|
||
header h1 {
|
||
font-family: 'Code462WPink', 'Rock Salt';
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.top-nav a,
|
||
.top-nav.second a {
|
||
font-family: Impact, 'Anton', sans-serif;
|
||
letter-spacing: 1.5px;
|
||
font-size: 0.9rem; /* rem absoluto, no hereda nada */
|
||
}
|
||
|
||
|
||
.vertical-marquee {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 20px;
|
||
writing-mode: vertical-rl;
|
||
font-family: 'VT323', monospace;
|
||
font-size: 1em;
|
||
color: #ff00aa;
|
||
background-color: transparent;
|
||
z-index: 999;
|
||
text-align: center;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.left-marquee {
|
||
left: 0;
|
||
writing-mode: vertical-lr;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.right-marquee {
|
||
right: 0;
|
||
}
|
||
|
||
.top-nav ul {
|
||
list-style: none;
|
||
padding: 8px 10px;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 6px 8px;
|
||
}
|
||
|
||
.top-nav li {
|
||
margin: 0;
|
||
}
|
||
|
||
.top-nav a {
|
||
text-decoration: none;
|
||
background-color: white;
|
||
color: black;
|
||
font-weight: 900;
|
||
padding: 6px 13px;
|
||
border-radius: 18px;
|
||
border: 2px solid transparent;
|
||
display: inline-block;
|
||
text-transform: uppercase;
|
||
transition: color .15s, border-color .15s, box-shadow .15s;
|
||
}
|
||
|
||
.top-nav a:hover {
|
||
color: #ff00aa;
|
||
border-color: #ff00aa;
|
||
box-shadow: 2px 3px 0 #ff00aa;
|
||
}
|
||
|
||
/* Secciones del index: fondo blanco, borde rosa, texto negro */
|
||
section{
|
||
background: #fff;
|
||
color: #111;
|
||
padding: 14px 18px;
|
||
margin: 10px auto;
|
||
max-width: 100%;
|
||
border: 2px solid #ff00aa;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 14px rgba(0,0,0,.07);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
section#feminismos{
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Título de cada sección: rosa con fondo negro */
|
||
section h2{
|
||
margin: 0 0 12px;
|
||
display: inline-block;
|
||
background: #000; /* fondo negro */
|
||
color: #ff00aa; /* texto rosa */
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
letter-spacing: .3px;
|
||
transition: transform .2s ease, box-shadow .25s ease;
|
||
}
|
||
|
||
/* Efecto suave al pasar el ratón */
|
||
section h2:hover{
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 4px rgba(255,0,127,.15);
|
||
}
|
||
|
||
/* Texto de párrafo un poco más legible */
|
||
section p{
|
||
color: #222;
|
||
margin: .6rem 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
|
||
button {
|
||
background: #ff00aa;
|
||
color: black;
|
||
font-weight: bold;
|
||
padding: 8px 15px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
button:hover {
|
||
background: #ff00aa;
|
||
}
|
||
|
||
|
||
/* Imagen de colectivo centrada y responsive */
|
||
.colectivo-img-link{
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.colectivo-img{
|
||
display: inline-block;
|
||
max-width: min(520px, 92%);
|
||
height: auto;
|
||
border-radius: 12px;
|
||
border: 2px solid #ff00aa;
|
||
box-shadow: 0 8px 18px rgba(0,0,0,.12);
|
||
}
|
||
|
||
/* Botón como link */
|
||
.colectivo-btn{
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
padding: 10px 14px;
|
||
border-radius: 10px;
|
||
border: 2px solid #ff00aa;
|
||
background: #fff;
|
||
color: #000;
|
||
text-decoration: none;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.colectivo-btn:hover{
|
||
background: #ff00aa;
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
/* Contenedor centrado y con buen ritmo de lectura */
|
||
.content-page.readable{
|
||
background:#fff;
|
||
color:var(--ink);
|
||
max-width: 860px;
|
||
margin: 24px auto 64px; /* centrado */
|
||
padding: 28px 26px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,.07);
|
||
line-height: 1.75;
|
||
font-size: 1.05rem;
|
||
font-family: 'Quicksand', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
text-align: left; /* párrafo legible */
|
||
hyphens: auto;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
/* Títulos centrados, mismo color y un hover elegante */
|
||
.content-page.readable h2,
|
||
.content-page.readable h3{
|
||
color: var(--accent-2);
|
||
text-align: center; /* centrados */
|
||
margin: 0 0 1rem;
|
||
letter-spacing: .2px;
|
||
|
||
/* subrayado animado con el color actual */
|
||
background-image: linear-gradient(currentColor, currentColor);
|
||
background-size: 0% 2px;
|
||
background-position: left calc(100% - 2px);
|
||
background-repeat: no-repeat;
|
||
transition: background-size .35s ease, color .25s ease, transform .2s ease;
|
||
}
|
||
|
||
.content-page.readable h2{ font-size: 2rem; margin-top: .2rem; }
|
||
.content-page.readable h3{ font-size: 1.25rem; margin-top: 1.6rem; color: var(--accent); }
|
||
|
||
.content-page.readable h2:hover,
|
||
.content-page.readable h3:hover{
|
||
background-size: 100% 2px; /* aparece la línea bonita */
|
||
transform: translateY(-1px); /* micro-animación */
|
||
}
|
||
|
||
/* Párrafos con buen contraste y separación */
|
||
.content-page.readable p{
|
||
color: var(--ink-soft);
|
||
margin: .7rem 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
̣
|
||
|
||
/* ====== CALENDARIO ====== */
|
||
|
||
/* Botones prev / next */
|
||
.button {
|
||
background: #000;
|
||
color: #ff00aa;
|
||
border: 2px solid #ff00aa;
|
||
border-radius: 8px;
|
||
padding: 5px 14px;
|
||
font-size: 1rem;
|
||
font-weight: bold;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
transition: background .15s, color .15s, transform .1s;
|
||
line-height: 1;
|
||
}
|
||
.button:hover {
|
||
background: #ff00aa;
|
||
color: #000;
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
.cal-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin: 6px 0 10px;
|
||
}
|
||
|
||
.cal-title {
|
||
min-width: 180px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
color: #ff00aa;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Grid: sin gap, bordes como líneas internas */
|
||
.cal {
|
||
background: #fff;
|
||
border: 2px solid #ff00aa;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 18px rgba(255,0,170,.15);
|
||
}
|
||
|
||
.cal-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
border-bottom: 1px solid rgba(255,0,170,.15);
|
||
}
|
||
.cal-row:last-child { border-bottom: none; }
|
||
|
||
/* Cabecera días */
|
||
.cal-head { background: #000; }
|
||
|
||
.cal-head-cell {
|
||
background: #000;
|
||
color: #ff00aa;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 0.78rem;
|
||
padding: 8px 2px;
|
||
border-right: 1px solid rgba(255,0,170,.2);
|
||
}
|
||
.cal-head-cell:last-child { border-right: none; }
|
||
|
||
/* Celda de día */
|
||
.cal-cell {
|
||
position: relative;
|
||
background: #fff;
|
||
border-right: 1px solid rgba(255,0,170,.1);
|
||
min-height: 68px;
|
||
padding: 20px 3px 3px;
|
||
overflow: hidden;
|
||
}
|
||
.cal-cell:last-child { border-right: none; }
|
||
|
||
/* Fin de semana: fondo levemente rosado */
|
||
.cal-cell:nth-child(6),
|
||
.cal-cell:nth-child(7) { background: #fff6fc; }
|
||
|
||
/* HOY */
|
||
.cal-today {
|
||
background: #fff0f8 !important;
|
||
box-shadow: inset 0 0 0 2px #ff00aa;
|
||
}
|
||
|
||
.cal-daynum {
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 5px;
|
||
font-size: 0.88rem;
|
||
font-weight: bold;
|
||
color: #444;
|
||
z-index: 2;
|
||
}
|
||
|
||
.cal-today .cal-daynum {
|
||
background: #ff00aa;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
width: 22px;
|
||
height: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.72rem;
|
||
top: 2px;
|
||
left: 2px;
|
||
}
|
||
|
||
.cal-empty {
|
||
background: #f5f5f5 !important;
|
||
opacity: .5;
|
||
}
|
||
|
||
/* Pills */
|
||
.cal-pills {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.cal-pill {
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
border-radius: 4px;
|
||
padding: 2px 5px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
border: 1px solid rgba(0,0,0,.08);
|
||
cursor: pointer;
|
||
}
|
||
.cal-pill:hover {
|
||
filter: brightness(1.08);
|
||
}
|
||
|
||
/* Leyenda */
|
||
.cal-legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px 14px;
|
||
margin: 10px 0 2px;
|
||
justify-content: center;
|
||
}
|
||
.cal-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 0.55rem;
|
||
font-family: var(--impact);
|
||
}
|
||
.cal-legend-dot {
|
||
width: 11px;
|
||
height: 11px;
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
border: 1px solid rgba(0,0,0,.12);
|
||
}
|
||
|
||
|
||
/* ========== TELÉFONOS PEQUEÑOS (<= 480px) ========== */
|
||
@media (max-width: 480px){
|
||
html{ font-size: 9px; } /* baja toda la escala */
|
||
body{ overflow-x: hidden; }
|
||
.vertical-marquee{ display:none !important; }
|
||
body{ flex-direction: column; overflow-x: hidden; }
|
||
.container{ width:100%; position: relative; }
|
||
main{ margin-left: 0 !important; font-size: 1rem; }
|
||
header{ padding: 16px 12px; padding-left:20px; font-size: 1.05em; }
|
||
|
||
/* Hamburguesa + sidebar superpuesta */
|
||
.sb-toggle{ display:flex; }
|
||
.sidebar{
|
||
position: fixed; left: 0; top: 0; bottom: 0;
|
||
width: min(82vw, 300px);
|
||
transform: translateX(-100%);
|
||
z-index: 1000; overflow-y:auto; padding:20px;
|
||
}
|
||
#nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); }
|
||
#nav-toggle:checked ~ .container::before{
|
||
content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
|
||
}
|
||
|
||
/* Nav superior: 2 filas, botones más compactos */
|
||
.top-nav ul, .top-nav.second ul{
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
justify-content:center;
|
||
gap:6px;
|
||
padding:0 6px;
|
||
margin:10px 0 0;
|
||
}
|
||
.top-nav li, .top-nav.second li{
|
||
list-style:none;
|
||
margin:0;
|
||
width:auto;
|
||
flex:0 0 auto;
|
||
}
|
||
.top-nav a, .top-nav.second a, .top-nav2 a{
|
||
display:inline-block;
|
||
padding:5px 10px;
|
||
font-size:.8rem;
|
||
font-family: Impact, 'Anton', sans-serif;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
line-height:1.1;
|
||
border:2px solid transparent;
|
||
border-radius:16px;
|
||
background:#fff;
|
||
color:#000;
|
||
text-decoration:none;
|
||
white-space:nowrap;
|
||
}
|
||
|
||
/* Secciones y contenido */
|
||
section{ margin:12px 0; padding:12px; border-radius:10px; }
|
||
section h2{ font-size:2rem; }
|
||
.content-page.readable{ max-width:100%; margin:16px auto 36px; padding:14px; font-size:1rem; line-height:1.7; }
|
||
button{ font-size:.9em; padding:8px 12px; }
|
||
footer{ font-size:.85em; padding:14px 0; }
|
||
|
||
/* ====== CALENDARIO móvil ====== */
|
||
.cal{ border-radius:8px; }
|
||
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
|
||
.cal-cell{ min-height:52px; padding:17px 2px 2px; }
|
||
.cal-daynum{ font-size:.65rem; top:2px; left:3px; }
|
||
.cal-today .cal-daynum{ width:16px; height:16px; font-size:.55rem; }
|
||
.cal-pills{ gap:1px; margin-top:0; }
|
||
.cal-pill{ font-size:7px; padding:1px 2px; border-radius:3px; }
|
||
.cal-head-cell{ padding:6px 1px; font-size:.7rem; }
|
||
.cal-title{ font-size:.75rem; min-width:140px; }
|
||
.cal-legend{ gap:3px 8px; }
|
||
.cal-legend-item{ font-size:.5rem; }
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ====== FUENTE “IMPACT” SOLO PARA EL CALENDARIO ====== */
|
||
.cal,
|
||
.cal *{
|
||
font-family: var(--impact) !important;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ========== MÓVILES / TABLETS VERTICALES (481px–768px) ========== */
|
||
@media (min-width: 481px) and (max-width: 768px){
|
||
|
||
.vertical-marquee{ display:none !important; }
|
||
main{ margin-left:0 !important; font-size:1rem; }
|
||
header{ font-size:1.2em; }
|
||
|
||
/* Hamburguesa + sidebar superpuesta */
|
||
.sb-toggle{ display:flex; }
|
||
.sidebar{
|
||
position: fixed; left:0; top:0; bottom:0;
|
||
width: min(78vw, 320px);
|
||
background:#000; color:#fff;
|
||
transform: translateX(-100%);
|
||
z-index:1000; overflow-y:auto; padding:20px;
|
||
}
|
||
#nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); }
|
||
#nav-toggle:checked ~ .container::before{
|
||
content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
|
||
}
|
||
|
||
/* Nav superior */
|
||
.top-nav ul, .top-nav.second ul{
|
||
display:flex; flex-wrap:wrap; justify-content:center;
|
||
gap:8px; padding:0; margin:12px 0 0;
|
||
}
|
||
.top-nav li, .top-nav.second li{ list-style:none; }
|
||
.top-nav a, .top-nav.second a, .top-nav2 a{
|
||
display:inline-block; padding:7px 13px; font-size:.88rem;
|
||
font-family: Impact, 'Anton', sans-serif;
|
||
text-transform: uppercase; letter-spacing: 1px;
|
||
border:2px solid transparent; border-radius:18px;
|
||
background:#fff; color:#000; text-decoration:none;
|
||
}
|
||
|
||
section{ max-width:100%; margin:14px 0; padding:14px; border-radius:12px; }
|
||
section h2{ font-size:1.1rem; }
|
||
.content-page.readable{ max-width:92vw; margin:18px auto 48px; padding:18px; font-size:1.02rem; line-height:1.75; }
|
||
button{ font-size:1em; padding:10px 16px; }
|
||
footer{ font-size:.95em; padding:16px 0; }
|
||
|
||
/* Calendario tablet vertical */
|
||
.cal{ border-radius:10px; }
|
||
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
|
||
.cal-cell{ min-height:64px; padding:20px 3px 3px; }
|
||
.cal-daynum{ font-size:.72rem; top:3px; left:5px; }
|
||
.cal-today .cal-daynum{ width:18px; height:18px; font-size:.6rem; }
|
||
.cal-pills{ gap:2px; margin-top:1px; }
|
||
.cal-pill{ font-size:8.5px; padding:1px 3px; }
|
||
.cal-head-cell{ padding:7px 1px; font-size:.75rem; }
|
||
}
|
||
|
||
/* ========== TABLETS HORIZONTALES / PORTÁTILES PEQUEÑOS (769px–1024px) ========== */
|
||
@media (min-width: 769px) and (max-width: 1024px){
|
||
|
||
.vertical-marquee{ display:none !important; }
|
||
|
||
/* Sidebar en “raíl” por defecto + hamburguesa */
|
||
.sb-toggle{ display:flex; }
|
||
.sidebar{
|
||
position: fixed; left:0; top:0; bottom:0;
|
||
width: var(--sidebar-w);
|
||
background:#000; color:#fff;
|
||
transform: translateX(calc(-100% + var(--sidebar-rail)));
|
||
z-index:1000; overflow-y:auto; padding:20px;
|
||
}
|
||
main{ margin-left: var(--sidebar-rail) !important; }
|
||
#nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); }
|
||
#nav-toggle:checked ~ .container main{ margin-left: var(--sidebar-w) !important; }
|
||
|
||
header{ font-size:1.4em; padding:24px; }
|
||
|
||
.top-nav ul, .top-nav.second ul{
|
||
display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0;
|
||
}
|
||
.top-nav li, .top-nav.second li{ list-style:none; }
|
||
.top-nav a, .top-nav.second a{
|
||
font-size:.9rem; padding:6px 13px;
|
||
font-family: Impact, 'Anton', sans-serif;
|
||
text-transform: uppercase; letter-spacing:1px;
|
||
}
|
||
|
||
section{ padding:20px; max-width:90%; margin:12px auto; }
|
||
button{ font-size:1em; padding:12px 22px; }
|
||
footer{ font-size:1em; padding:22px; }
|
||
|
||
/* Calendario tablet horizontal */
|
||
.cal{ border-radius:10px; }
|
||
.cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); }
|
||
.cal-cell{ min-height:72px; padding:21px 3px 3px; }
|
||
.cal-daynum{ font-size:.76rem; top:3px; left:5px; }
|
||
.cal-today .cal-daynum{ width:18px; height:18px; font-size:.62rem; }
|
||
.cal-pills{ margin-top:1px; gap:2px; }
|
||
.cal-pill{ font-size:9px; padding:2px 4px; }
|
||
}
|
||
|
||
|