/* KidsCalendar — sistema visual estilo Apple: minimalista, mucho aire, paleta neutra con un solo acento azul. El verde y el amarillo se reservan EXCLUSIVAMENTE para las celdas de días asignados y su leyenda. */ :root { /* Neutros (grises "Apple") */ --bg: #f5f5f7; --surface: #ffffff; --ink: #1d1d1f; --ink-2: #6e6e73; --ink-3: #86868b; --line: #d2d2d7; --line-soft: #e8e8ed; /* Acento (solo enlaces, foco, detalles) */ --accent: #0071e3; /* Botones */ --primary: #1d1d1f; /* grafito */ --primary-ink: #ffffff; --secondary: #ececed; --secondary-ink:#1d1d1f; --danger: #d70015; /* Días del calendario — NO CAMBIAR */ --dia-verde: #22c55e; --dia-amarillo: #fbbf24; --radius: 20px; --radius-sm: 14px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.06); /* Tonos claros usados en pastillas/avisos; se invierten en oscuro. */ --borrador-bg: #fff4d6; --borrador-ink: #7a5a00; --ok-bg: #e4f7ea; --ok-ink: #146c2e; --err-bg: #fde7e9; --err-ink: var(--danger); --info-bg: color-mix(in srgb, var(--accent) 10%, transparent); --info-ink: var(--accent); } :root { color-scheme: light; } /* Modo oscuro. Se activa con data-theme="dark" en , que pone un script inline según la preferencia guardada (Sistema/Claro/Oscuro). El verde y el amarillo de los días NO cambian; sobre negro resaltan aún más. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #000000; --surface: #1c1c1e; /* tarjeta elevada */ --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73; --line: #38383a; --line-soft: #2c2c2e; --accent: #0a84ff; /* azul Apple oscuro */ /* En oscuro los botones primarios se invierten: claros con texto negro. */ --primary: #f5f5f7; --primary-ink: #1d1d1f; --secondary: #2c2c2e; --secondary-ink:#f5f5f7; --danger: #ff453a; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --borrador-bg: #3a2f00; --borrador-ink: #ffd66b; --ok-bg: #10331d; --ok-ink: #4ade80; --err-bg: #3a1416; --err-ink: #ff6b6b; --info-bg: color-mix(in srgb, var(--accent) 22%, transparent); --info-ink: #6cb6ff; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Iconos SVG inline (line-style, heredan el color del texto). */ .ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.45em; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .btn .ic { margin-right: 0.4em; } .ic-hero { width: 2.4rem; height: 2.4rem; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.5rem; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); padding: 2.5rem 1.25rem 4rem; min-height: 100vh; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; } .container { max-width: 560px; margin: 0 auto; position: relative; } /* Toggle sol/luna, arriba a la derecha, siempre visible. */ .tema-toggle { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); background: var(--surface); color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s, transform 0.15s; } .tema-toggle:hover { background: var(--line-soft); } .tema-toggle:active { transform: scale(0.92); } .tema-toggle .ic { margin: 0; width: 1.15rem; height: 1.15rem; } .tema-toggle .ic-luna { display: block; } .tema-toggle .ic-sol { display: none; } :root[data-theme="dark"] .tema-toggle .ic-luna { display: none; } :root[data-theme="dark"] .tema-toggle .ic-sol { display: block; } /* ------------------------------------------------------------ marca */ .marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .marca:hover { text-decoration: none; } .marca-icono { display: inline-flex; background: var(--accent); border-radius: 28%; padding: 0.28em; } .marca-icono svg { width: 1em; height: 1em; display: block; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .marca-texto { font-size: 1em; } /* "Cal" con texto en degradado IA (azul → violeta → cian). */ .marca-texto b { font-weight: 600; background: linear-gradient(120deg, #2563eb 0%, #7c3aed 45%, #00d4ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Marca chica arriba de la app. */ .marca-top { display: flex; justify-content: center; margin-bottom: 1.5rem; } .marca-top .marca { font-size: 1.15rem; } /* Marca grande en login/registro. */ .marca-hero { font-size: 1.9rem; margin-bottom: 0.5rem; } /* ------------------------------------------------------------ firma E/A */ .firma { display: flex; justify-content: center; margin: 3rem auto 0; padding-top: 1.5rem; opacity: 0.5; transition: opacity 0.2s; } .firma:hover { opacity: 0.9; } .firma img { height: 22px; width: auto; } /* El logo cambia según el tema: barras oscuras en claro, blancas en oscuro. Sin display en «.firma img» para que estas reglas no pierdan por especificidad. */ .firma-claro { display: block; } .firma-oscuro { display: none; } :root[data-theme="dark"] .firma-claro { display: none; } :root[data-theme="dark"] .firma-oscuro { display: block; } .header { text-align: center; margin-bottom: 1.75rem; } .header h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 0.15rem; } .header p { color: var(--ink-2); font-size: 0.95rem; } /* ------------------------------------------------------------ identidad */ .badge-container { text-align: center; margin-bottom: 1.5rem; } .badge { display: inline-block; padding: 0.55rem 1.25rem; border-radius: 980px; font-weight: 590; font-size: 0.95rem; background: var(--color-yo, var(--dia-verde)); color: var(--texto-yo, #fff); letter-spacing: -0.01em; } .leyenda { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .leyenda span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-2); } .leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } /* ------------------------------------------------------------ pantallas */ .screen { display: none; } .screen.active { display: block; animation: aparece 0.35s ease; } @keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } h2 { font-weight: 600; letter-spacing: -0.03em; } h3 { font-weight: 600; letter-spacing: -0.02em; } /* ------------------------------------------------------------ navegación */ .anio-nav { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .anio-nav select { border: 1px solid var(--line); background: var(--surface); border-radius: 980px; padding: 0.5rem 1.1rem; font-family: inherit; font-size: 0.95rem; font-weight: 590; color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; } .etiqueta-borrador { background: var(--borrador-bg); color: var(--borrador-ink); border-radius: 980px; padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 590; } .month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; gap: 1rem; } .month-nav button { background: var(--surface); border: 1px solid var(--line-soft); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; color: var(--ink); transition: background 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; } .month-nav button:hover:not(:disabled) { background: var(--line-soft); } .month-nav button:active:not(:disabled) { transform: scale(0.94); } .month-nav button:disabled { opacity: 0.3; cursor: default; } .month-title { text-align: center; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; flex: 1; } /* ------------------------------------------------------------ calendario */ .calendar-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 0.75rem; text-align: center; } .calendar-header div { font-size: 0.72rem; font-weight: 590; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; } .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 1.5rem; } .calendar-cell { position: relative; aspect-ratio: 1; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 500; background: var(--surface); color: var(--ink); border: 1px solid var(--line-soft); transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s; cursor: default; } .calendar-cell:hover:not(.empty) { transform: scale(1.05); } /* Días asignados: gradiente IA por persona (frío vs cálido). El número va en blanco sólido para no perder legibilidad sobre el degradado. */ .calendar-cell.asignado { background: var(--grad, var(--color)); color: var(--texto); border-color: transparent; font-weight: 600; box-shadow: 0 6px 16px color-mix(in srgb, var(--color) 30%, transparent); } .calendar-cell.sin-asignar { background: var(--surface); color: var(--ink-3); border-style: dashed; border-color: var(--line); } .calendar-cell.empty { background: transparent; border: none; } .calendar-cell.hoy { box-shadow: 0 0 0 2px var(--ink); } .calendar-cell.asignado.hoy { box-shadow: 0 0 0 2px var(--ink), 0 6px 16px color-mix(in srgb, var(--color) 28%, transparent); } .calendar-cell.cambio::after { content: ''; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; } .calendar-cell.con-nota::before { content: ''; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* Modo edición: se toca para reasignar. */ .calendar.editando .calendar-cell:not(.empty) { cursor: pointer; } .calendar.editando .calendar-cell:not(.empty):active { transform: scale(0.9); } .calendar.editando .calendar-cell.sin-asignar { border-color: var(--accent); } /* ------------------------------------------------------------ botones */ .button-group { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; } .btn { flex: 1; padding: 0.85rem 1.25rem; border: none; border-radius: 980px; font-weight: 590; font-size: 0.98rem; font-family: inherit; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.15s, opacity 0.2s, background 0.2s; position: relative; background: var(--secondary); color: var(--secondary-ink); } .btn:hover:not(:disabled) { opacity: 0.88; } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.4; cursor: default; } /* Primarios (grafito) */ .btn-green, .btn-blue { background: var(--primary); color: var(--primary-ink); } /* Secundarios (gris claro) */ .btn-yellow, .btn-gray { background: var(--secondary); color: var(--secondary-ink); } /* Peligro */ .btn-red { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); } .btn-red:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 8%, transparent); opacity: 1; } .btn-chico { padding: 0.55rem 1rem; font-size: 0.875rem; } .pastilla { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 0.45rem; background: var(--danger); color: white; border-radius: 980px; font-size: 0.72rem; font-weight: 600; } /* ------------------------------------------------------------ formularios */ form { background: var(--surface); padding: 1.75rem; border-radius: var(--radius); margin-bottom: 1.5rem; box-shadow: var(--shadow); } label { display: block; font-weight: 590; margin-bottom: 0.6rem; color: var(--ink); font-size: 0.95rem; } input, textarea, select { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; color: var(--ink); margin-bottom: 1.25rem; transition: border-color 0.2s, box-shadow 0.2s; background: var(--surface); } input::placeholder, textarea::placeholder { color: var(--ink-3); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); } textarea { height: 110px; resize: vertical; } .ayuda { font-size: 0.85rem; color: var(--ink-2); margin: -0.75rem 0 1.25rem; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------------------------------------ tarjetas */ .card { background: var(--surface); padding: 1.25rem 1.35rem; border-radius: var(--radius-sm); margin-bottom: 0.85rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); } .card.pendiente { border-left: 3px solid var(--accent); } .card.aceptada { border-left: 3px solid var(--dia-verde); } .card.rechazada { border-left: 3px solid var(--danger); } .card.cancelada { border-left: 3px solid var(--line); } .card-title { font-weight: 590; color: var(--ink); margin-bottom: 0.4rem; } .card-text { font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; } .card-text + .card-text { margin-top: 0.3rem; } .card-pie { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.65rem; } .card-acciones { display: flex; gap: 0.6rem; margin-top: 0.9rem; } .card-acciones .btn { flex: 1; } .estado { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 980px; font-size: 0.72rem; font-weight: 590; margin-left: 0.4rem; vertical-align: middle; } .estado.pendiente { background: var(--info-bg); color: var(--info-ink); } .estado.aceptada { background: var(--ok-bg); color: var(--ok-ink); } .estado.rechazada { background: var(--err-bg); color: var(--err-ink); } .estado.cancelada { background: var(--secondary); color: var(--ink-2); } .empty-state { text-align: center; padding: 2rem; color: var(--ink-3); font-size: 0.92rem; } /* ------------------------------------------------------------ avisos */ .aviso { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: 0.9rem; line-height: 1.5; display: none; } .aviso.visible { display: block; } .aviso.error { background: var(--err-bg); color: var(--err-ink); } .aviso.ok { background: var(--ok-bg); color: var(--ok-ink); } .aviso.info { background: var(--info-bg); color: var(--info-ink); } /* ------------------------------------------------------------ login/registro */ /* Selector de tema (segmentado, estilo iOS). */ .tema-selector { display: flex; gap: 4px; background: var(--secondary); border-radius: 12px; padding: 4px; margin-bottom: 1rem; } .tema-selector button { flex: 1; border: none; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 0.9rem; font-weight: 590; padding: 0.55rem; border-radius: 9px; cursor: pointer; transition: background 0.2s, color 0.2s; } .tema-selector button.activo { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } /* Encabezado de sección dentro de «Mi cuenta». */ .cuenta-seccion { font-size: 0.8rem; font-weight: 590; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin: 1.75rem 0 0.75rem; } /* Tarjeta "agregar a pantalla de inicio". */ .instalar { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-top: 1.5rem; box-shadow: var(--shadow-sm); font-size: 0.9rem; } .instalar strong { display: block; margin-bottom: 0.35rem; color: var(--ink); } .instalar p { color: var(--ink-2); line-height: 1.5; margin: 0; } .instalar b { color: var(--ink); } .instalar-x { position: absolute; top: 0.5rem; right: 0.6rem; border: none; background: none; color: var(--ink-3); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.2rem; } .login-caja { max-width: 400px; margin: 6vh auto 0; } .login-caja form { margin-bottom: 1rem; } .login-caja .btn { width: 100%; } .pie { text-align: center; color: var(--ink-3); font-size: 0.85rem; margin-top: 1.5rem; } /* ------------------------------------------------------------ móvil */ @media (max-width: 420px) { body { padding: 1.5rem 1rem 3rem; } .header h1 { font-size: 1.75rem; } .calendar, .calendar-header { gap: 5px; } .calendar-cell { font-size: 1rem; border-radius: 11px; } form { padding: 1.35rem; } }