/* ============================================================= styles.css - Estilos compartidos por ambas vistas ============================================================= Identidad visual: clínica veterinaria amigable y moderna. - Verde médico-cálido como color principal (vista cliente) - Azul pizarra para la vista interna del staff - Tipografía Nunito (redondeada y amistosa) - Tarjetas con animación de entrada + hover - Badges tipo "pastilla" con punto de color para los estados - Diseño responsive + MODO OSCURO (automático + toggle manual) TEMA CLARO/OSCURO: Todos los colores salen de "custom properties" (tokens). El tema claro vive en :root. El oscuro se activa de dos formas: 1) Automática: @media (prefers-color-scheme: dark) según el SO. 2) Manual: el atributo data-theme en (lo pone tema.js), que SIEMPRE gana sobre la preferencia del sistema. Como se estiliza a través de los tokens, nunca escribimos colores dentro del bloque oscuro directamente: solo redefinimos tokens. IMPORTANTE: los .js generan HTML con estas clases (.tarjeta, .item, .badge--estado, .btn-mini, .fila…). No renombrar clases. ============================================================= */ /* Tipografía desde Google Fonts (requiere internet) */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap'); /* ------------------------------------------------------------- TOKENS - TEMA CLARO (valores por defecto) ------------------------------------------------------------- */ :root { /* --- Marca: vista cliente (verde) — se mantienen en ambos temas --- */ --verde: #2F8A63; --verde-oscuro: #22664A; --verde-claro: #E4F3EB; --verde-tenue: #F1F9F5; /* --- Marca: vista staff (azul pizarra) --- */ --pizarra: #33506E; --pizarra-oscuro: #24384F; --pizarra-claro: #E8EEF4; --pizarra-tenue: #F3F6FA; /* --- Neutrales --- */ --tinta: #1E2C27; /* Texto principal */ --gris: #647469; /* Texto secundario */ --fondo: #F5F8F5; /* Fondo general / superficies sutiles */ --superficie: #FFFFFF; /* Fondo de tarjetas/inputs/tablas */ --blanco: #FFFFFF; /* Blanco literal: texto sobre acentos */ --borde: #E3EAE5; --borde-fuerte: #CFDACF; /* --- Colores semánticos de estados --- */ --ambar: #9A6714; --ambar-claro: #FBEFD3; --ok: #2F8A63; --ok-claro: #E1F1E8; --rojo: #B23B36; --rojo-claro: #FBE6E4; --azul: #2C6CB0; --azul-claro: #E4EEF8; /* --- Radios --- */ --radio: 16px; --radio-sm: 10px; --radio-pill: 999px; /* --- Sombras en capas (dan profundidad real) --- */ --sombra-sm: 0 1px 2px rgba(30, 44, 39, 0.06); --sombra: 0 6px 20px -10px rgba(30, 44, 39, 0.20), 0 2px 6px -3px rgba(30, 44, 39, 0.10); --sombra-lg: 0 20px 44px -16px rgba(30, 44, 39, 0.30); /* --- Gradientes de cabecera (fijos: marca en ambos temas) --- */ --grad-cliente: linear-gradient(135deg, #35996E 0%, #226A4C 100%); --grad-staff: linear-gradient(135deg, #3E5C7E 0%, #253A52 100%); /* Acento activo según la vista (lo pisa .vista-staff) */ --acento: var(--verde); --acento-oscuro: var(--verde-oscuro); --acento-claro: var(--verde-claro); --grad-acento: var(--grad-cliente); } /* La vista staff cambia el acento a azul pizarra en toda la página */ .vista-staff { --acento: var(--pizarra); --acento-oscuro: var(--pizarra-oscuro); --acento-claro: var(--pizarra-claro); --grad-acento: var(--grad-staff); } /* ------------------------------------------------------------- TOKENS - TEMA OSCURO Se redefinen SOLO los tokens que cambian. Los acentos de marca (--verde, gradientes, --blanco) se conservan para no perder la identidad; se aclaran los tonos "claro" y el texto pizarra para que tengan contraste sobre fondos oscuros. Patrón: automático por SO salvo que el usuario haya forzado claro; y explícito con data-theme="dark". ------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tinta: #E6EEE8; --gris: #9BACA2; --fondo: #0F1411; --superficie: #182019; --borde: #29332D; --borde-fuerte: #3A463F; --verde-claro: #16271E; --verde-tenue: #131E18; --verde-oscuro: #97DDB8; --ambar: #E7C57F; --ambar-claro: #33280F; --ok: #71CD9D; --ok-claro: #16281F; --rojo: #E88C86; --rojo-claro: #341B1A; --azul: #84B3E8; --azul-claro: #172636; --pizarra: #A6B9D4; --pizarra-oscuro: #8497B6; --pizarra-claro: #273039; --pizarra-tenue: #1A2127; --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --sombra: 0 8px 22px -10px rgba(0, 0, 0, 0.6), 0 2px 6px -3px rgba(0, 0, 0, 0.45); --sombra-lg: 0 22px 46px -16px rgba(0, 0, 0, 0.72); } } /* Forzado manual a oscuro (gana sobre la preferencia del SO) */ :root[data-theme="dark"] { --tinta: #E6EEE8; --gris: #9BACA2; --fondo: #0F1411; --superficie: #182019; --borde: #29332D; --borde-fuerte: #3A463F; --verde-claro: #16271E; --verde-tenue: #131E18; --verde-oscuro: #97DDB8; --ambar: #E7C57F; --ambar-claro: #33280F; --ok: #71CD9D; --ok-claro: #16281F; --rojo: #E88C86; --rojo-claro: #341B1A; --azul: #84B3E8; --azul-claro: #172636; --pizarra: #A6B9D4; --pizarra-oscuro: #8497B6; --pizarra-claro: #273039; --pizarra-tenue: #1A2127; --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --sombra: 0 8px 22px -10px rgba(0, 0, 0, 0.6), 0 2px 6px -3px rgba(0, 0, 0, 0.45); --sombra-lg: 0 22px 46px -16px rgba(0, 0, 0, 0.72); } /* ------------------------------------------------------------- Reset mínimo y base ------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Garantiza que el atributo hidden siempre oculte (lo usan los JS) */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: 'Nunito', system-ui, -apple-system, sans-serif; color: var(--tinta); line-height: 1.6; min-height: 100vh; /* Fondo general con un halo suave del color de marca arriba */ background-color: var(--fondo); background-image: radial-gradient(1100px 480px at 50% -260px, var(--verde-claro), transparent 70%); background-repeat: no-repeat; transition: background-color 0.25s ease, color 0.25s ease; } body.vista-staff { background-image: radial-gradient(1100px 480px at 50% -260px, var(--pizarra-claro), transparent 70%); } ::selection { /* Tinte del acento: legible con el texto actual en ambos temas */ background: color-mix(in srgb, var(--acento) 30%, transparent); } /* ------------------------------------------------------------- Cabecera (sticky, con gradiente de rol) ------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: 20; color: var(--blanco); padding: 22px 24px; background: var(--grad-acento); box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.5); } header .contenedor { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; } header h1 { font-weight: 900; font-size: 1.55rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 4px; } /* Grupo de acciones a la derecha de la cabecera (rol + toggle + links) */ .header-acciones { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; } /* Etiqueta que aclara qué vista es (Portal de dueños / Uso interno) */ .rol { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; padding: 5px 12px; border-radius: var(--radio-pill); background: rgba(255, 255, 255, 0.16); white-space: nowrap; } header a { color: var(--blanco); font-size: 0.88rem; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: var(--radio-pill); background: rgba(255, 255, 255, 0.12); transition: background-color 0.18s ease, transform 0.18s ease; } header a:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-1px); } /* Botón para alternar tema claro/oscuro (vive sobre el gradiente) */ .btn-tema { background: rgba(255, 255, 255, 0.14); color: var(--blanco); font-size: 0.82rem; font-weight: 800; padding: 7px 13px; border-radius: var(--radio-pill); box-shadow: none; white-space: nowrap; } .btn-tema:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); } .btn-tema:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; } /* ------------------------------------------------------------- Layout general ------------------------------------------------------------- */ .contenedor { max-width: 1000px; margin: 0 auto; padding: 0 24px; } main.contenedor { padding-top: 32px; padding-bottom: 72px; display: grid; gap: 22px; } /* Párrafo introductorio de cada página */ main.contenedor>.ayuda { color: var(--gris); font-size: 0.98rem; max-width: 68ch; } /* ------------------------------------------------------------- Tarjetas: cada sección de la app vive en una ------------------------------------------------------------- */ .tarjeta { background-color: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 26px; /* Las tarjetas son items de un grid (main.contenedor), y los items de grid y flex arrancan con min-width: auto, que les impide achicarse por debajo del ancho minimo de su contenido. Como adentro hay tablas con min-width, la tarjeta se negaba a entrar en pantallas chicas y estiraba toda la pagina. Con min-width: 0 la tarjeta si se achica y recien ahi el overflow-x de .tabla-scroll puede hacer su trabajo. */ min-width: 0; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.25s ease; /* Animación de entrada */ animation: aparecer 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Aparición escalonada de las tarjetas al cargar */ main.contenedor>.tarjeta:nth-of-type(1) { animation-delay: 0.02s; } main.contenedor>.tarjeta:nth-of-type(2) { animation-delay: 0.10s; } main.contenedor>.tarjeta:nth-of-type(3) { animation-delay: 0.18s; } main.contenedor>.tarjeta:nth-of-type(4) { animation-delay: 0.26s; } main.contenedor>.tarjeta:nth-of-type(5) { animation-delay: 0.34s; } .tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); border-color: var(--borde-fuerte); } /* Tarjetas anidadas (ej: el mini-form de "Editar turno") no levantan */ .tarjeta .tarjeta { box-shadow: none; background: var(--acento-claro); border-color: transparent; animation: none; } .tarjeta .tarjeta:hover { transform: none; box-shadow: none; } @keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .tarjeta h2 { font-size: 1.22rem; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } .tarjeta h3 { font-size: 1rem; font-weight: 800; } .tarjeta .ayuda { color: var(--gris); font-size: 0.92rem; margin-bottom: 18px; } /* Número de paso (solo vista cliente: es una secuencia real) */ .paso { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad-acento); color: #fff; font-size: 0.9rem; font-weight: 900; flex-shrink: 0; box-shadow: 0 4px 10px -3px rgba(34, 106, 76, 0.5); } /* Secciones bloqueadas hasta que el cliente se identifica */ .bloqueada { opacity: 0.5; filter: saturate(0.55); pointer-events: none; transform: none !important; } /* ------------------------------------------------------------- Formularios ------------------------------------------------------------- */ form { display: grid; gap: 16px; } /* En pantallas anchas, los campos se acomodan en columnas */ .fila { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 800; color: var(--tinta); } input, select, textarea { font: inherit; padding: 11px 13px; border: 1.5px solid var(--borde); border-radius: var(--radio-sm); background-color: var(--superficie); color: var(--tinta); width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } input::placeholder, textarea::placeholder { color: var(--gris); opacity: 0.75; } input:hover, select:hover, textarea:hover { border-color: var(--borde-fuerte); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); background-color: var(--superficie); } button:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; } textarea { resize: vertical; min-height: 84px; } /* ------------------------------------------------------------- Botones ------------------------------------------------------------- */ button { font: inherit; font-weight: 800; padding: 11px 20px; border: none; border-radius: var(--radio-sm); cursor: pointer; transition: transform 0.14s ease, box-shadow 0.18s ease, background-color 0.18s ease, filter 0.18s ease; } button:active { transform: translateY(1px) scale(0.99); } .btn-principal { background: var(--grad-acento); color: var(--blanco); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--acento) 70%, transparent); } .btn-principal:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--acento) 75%, transparent); } /* Botones chicos de acción en listas/tablas */ .btn-mini { padding: 6px 12px; font-size: 0.8rem; font-weight: 800; border-radius: 8px; box-shadow: none; } .btn-mini:hover { transform: translateY(-1px); } .btn-ok { background-color: var(--ok-claro); color: var(--ok); } .btn-peligro { background-color: var(--rojo-claro); color: var(--rojo); } .btn-neutro { background-color: var(--pizarra-claro); color: var(--pizarra); } /* Hover de los mini-botones: se adapta solo a claro/oscuro mezclando el tinte con el color de texto principal (--tinta). */ .btn-ok:hover { background-color: color-mix(in srgb, var(--ok-claro), var(--tinta) 12%); } .btn-peligro:hover { background-color: color-mix(in srgb, var(--rojo-claro), var(--tinta) 12%); } .btn-neutro:hover { background-color: color-mix(in srgb, var(--pizarra-claro), var(--tinta) 12%); } /* Filtros de estado (vista staff): botones tipo pestaña */ .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; padding: 5px; background: var(--pizarra-tenue); border: 1px solid var(--borde); border-radius: var(--radio-pill); width: fit-content; max-width: 100%; } .filtros button { background-color: transparent; border: none; color: var(--gris); padding: 8px 16px; font-size: 0.85rem; border-radius: var(--radio-pill); box-shadow: none; } .filtros button:hover { color: var(--pizarra); background: color-mix(in srgb, var(--pizarra) 14%, transparent); transform: none; } .filtros button.activo { background: var(--grad-staff); color: var(--blanco); box-shadow: 0 6px 14px -6px rgba(37, 58, 82, 0.6); } /* ------------------------------------------------------------- Badges de estado (la "firma" visual del sistema) Punto de color a la izquierda con ::before. ------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border-radius: var(--radio-pill); font-size: 0.76rem; font-weight: 800; text-transform: capitalize; /* Neutro por defecto: cualquier estado sin color específico */ background-color: var(--pizarra-claro); color: var(--pizarra); white-space: nowrap; } .badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge--pendiente { background-color: var(--ambar-claro); color: var(--ambar); } .badge--completado { background-color: var(--ok-claro); color: var(--ok); } .badge--cancelado { background-color: var(--rojo-claro); color: var(--rojo); } /* Estados extra usados en la tabla de relaciones (con guiones) */ .badge--en-curso { background-color: var(--azul-claro); color: var(--azul); } .badge--requiere-estudios-previos, .badge--seguimiento-post-tratamiento { background-color: var(--ambar-claro); color: var(--ambar); } /* ------------------------------------------------------------- Listas de items (mascotas, turnos, registros médicos) ------------------------------------------------------------- */ .lista { list-style: none; display: grid; gap: 10px; } .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio-sm); background-color: var(--fondo); transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } .item>div:first-child { min-width: 0; /* permite que el texto largo haga wrap sin desbordar */ } .item:hover { transform: translateX(3px); border-left-color: var(--acento); background-color: var(--superficie); box-shadow: var(--sombra-sm); } .item strong { font-weight: 900; font-size: 1.02rem; } .item .detalle { color: var(--gris); font-size: 0.87rem; margin-top: 2px; } .item .acciones { display: flex; gap: 6px; flex-wrap: wrap; } /* Estado vacío: invita a actuar en lugar de quedar en blanco */ .vacio { color: var(--gris); font-size: 0.92rem; padding: 26px 18px; text-align: center; border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio-sm); background: var(--fondo); } /* ------------------------------------------------------------- Tablas (turnos, relaciones, stock) ------------------------------------------------------------- */ .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: var(--radio-sm); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; /* En pantallas chicas la tabla scrollea horizontalmente */ min-width: 560px; background: var(--superficie); } /* El calendario (FullCalendar) arma su vista con propias, asi que heredaba el min-width: 560px de la regla de arriba. Pero esas tablas no viven dentro de un .tabla-scroll, o sea que no tienen donde scrollear: el calendario se desbordaba de la pantalla. Se lo sacamos para que calcule su ancho solo, que es lo que FullCalendar ya sabe hacer. */ .fc table { min-width: 0; } thead th { background: var(--fondo); text-align: left; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris); padding: 12px 14px; border-bottom: 2px solid var(--borde); position: sticky; top: 0; } td { padding: 13px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; } tbody tr { transition: background-color 0.14s ease; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background-color: var(--acento-claro); } td .detalle { color: var(--gris); font-size: 0.82rem; margin-top: 3px; } /* ------------------------------------------------------------- Mensajes de feedback (éxito / error) - aparecen animados ------------------------------------------------------------- */ .mensaje { padding: 12px 16px; border-radius: var(--radio-sm); font-size: 0.9rem; font-weight: 800; margin-top: 4px; border: 1px solid transparent; animation: mensajeIn 0.28s ease; } @keyframes mensajeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .mensaje--exito { background-color: var(--ok-claro); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); } .mensaje--error { background-color: var(--rojo-claro); color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 25%, transparent); } /* ------------------------------------------------------------- Acciones de formulario ------------------------------------------------------------- */ .acciones-formulario { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ------------------------------------------------------------- Saludo al cliente identificado ------------------------------------------------------------- */ .saludo { background: linear-gradient(135deg, var(--verde-claro), var(--verde-tenue)); color: var(--verde-oscuro); padding: 12px 16px; border-radius: var(--radio-sm); font-weight: 800; border: 1px solid color-mix(in srgb, var(--verde) 20%, transparent); margin-bottom: 16px; animation: mensajeIn 0.3s ease; } /* ------------------------------------------------------------- Stock de medicamentos ------------------------------------------------------------- */ .tabla-stock { min-width: 760px; } .tabla-stock th, .tabla-stock td { white-space: nowrap; text-align: center; vertical-align: middle; } .tabla-stock thead th:first-child, .tabla-stock td:first-child { text-align: left; } .badge-stock { display: inline-block; padding: 4px 12px; border-radius: var(--radio-pill); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } .badge-stock--bajo { background-color: var(--rojo-claro); color: var(--rojo); } .badge-stock--medio { background-color: var(--ambar-claro); color: var(--ambar); } .badge-stock--alto { background-color: var(--ok-claro); color: var(--ok); } .acciones-stock { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .acciones-stock button { min-width: 88px; } #form-stock { margin-top: 4px; } /* Indicadores de nivel de stock por texto (compat. con JS previo) */ .stock-bajo { color: var(--rojo); font-weight: 800; } .stock-medio { color: var(--ambar); font-weight: 800; } .stock-alto { color: var(--ok); font-weight: 800; } .estado-stock { display: inline-block; padding: 4px 10px; border-radius: var(--radio-pill); font-size: .85rem; font-weight: 700; } .estado-stock.alto { background: var(--ok-claro); color: var(--ok); } .estado-stock.medio { background: var(--ambar-claro); color: var(--ambar); } .estado-stock.bajo { background: var(--rojo-claro); color: var(--rojo); } /* ------------------------------------------------------------- RESPONSIVE ------------------------------------------------------------- */ /* Tablets */ @media (max-width: 720px) { .contenedor { padding: 0 18px; } main.contenedor { padding-top: 24px; gap: 18px; } .tarjeta { padding: 20px; } header h1 { font-size: 1.35rem; } } /* Teléfonos */ @media (max-width: 480px) { header { padding: 18px 16px; } header .contenedor { flex-direction: column; align-items: flex-start; gap: 8px; } .contenedor { padding: 0 14px; } .tarjeta { padding: 18px 16px; border-radius: 14px; } .tarjeta h2 { font-size: 1.1rem; } /* Los formularios pasan a una sola columna */ .fila { grid-template-columns: 1fr; } /* Botones principales al ancho completo, más cómodos al tocar */ .acciones-formulario .btn-principal, .acciones-formulario .btn-neutro { flex: 1 1 100%; } /* Filtros ocupan el ancho y se centran */ .filtros { width: 100%; justify-content: center; } .filtros button { flex: 1 1 auto; text-align: center; } /* En listas, las acciones bajan y se estiran */ .item { align-items: flex-start; } .item .acciones { width: 100%; } .item .acciones .btn-mini { flex: 1 1 auto; text-align: center; } } /* ------------------------------------------------------------- Accesibilidad: respetar la preferencia de menos animaciones ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------- Calendario de turnos (FullCalendar) ------------------------------------------------------------- FullCalendar trae su propio CSS con colores claros fijos. Para que acompañe el tema de la app (y no quede un bloque blanco en modo oscuro) reasignamos SUS variables a nuestros tokens. Al estar basadas en tokens, cambian solas al alternar el tema. ------------------------------------------------------------- */ #calendario { min-height: 700px; } .fc { font-size: 14px; color: var(--tinta); /* Superficies y bordes */ --fc-page-bg-color: var(--superficie); --fc-border-color: var(--borde); --fc-neutral-bg-color: var(--fondo); --fc-neutral-text-color: var(--gris); /* Día de hoy y selección */ --fc-today-bg-color: var(--acento-claro); --fc-highlight-color: var(--acento-claro); /* Botones de la barra superior */ --fc-button-bg-color: var(--acento); --fc-button-border-color: var(--acento); --fc-button-hover-bg-color: var(--acento-oscuro); --fc-button-hover-border-color: var(--acento-oscuro); --fc-button-active-bg-color: var(--acento-oscuro); --fc-button-active-border-color: var(--acento-oscuro); --fc-button-text-color: var(--blanco); /* Eventos (el color real lo define cada turno según su estado) */ --fc-event-bg-color: var(--acento); --fc-event-border-color: var(--acento); --fc-event-text-color: var(--blanco); --fc-list-event-hover-bg-color: var(--acento-claro); } .fc .fc-toolbar-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; } .fc .fc-button { font-weight: 800; border-radius: var(--radio-sm); box-shadow: none; text-transform: capitalize; } .fc .fc-button:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; } .fc .fc-daygrid-event { padding: 5px; line-height: 1.3; border-radius: 6px; font-weight: 700; } .fc .fc-event-title { white-space: normal; } .fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion { color: var(--tinta); text-decoration: none; } .fc .fc-daygrid-day-number { padding: 8px; font-weight: 700; } .fc .fc-col-header-cell-cushion { padding: 10px 0; font-weight: 800; text-transform: capitalize; } .fc .fc-daygrid-day { min-height: 100px; } /* Los días fuera del mes actual se atenúan en vez de "apagarse" */ .fc .fc-day-other .fc-daygrid-day-number { color: var(--gris); opacity: 0.65; } /* Color de cada turno según su estado. Usamos el mismo lenguaje visual que los badges (fondo tenue + texto saturado), así el contraste funciona en ambos temas. */ .fc .evento--pendiente, .fc .evento--requiere-estudios-previos, .fc .evento--seguimiento-post-tratamiento { background-color: var(--ambar-claro); border-color: var(--ambar); color: var(--ambar); } .fc .evento--en-curso { background-color: var(--azul-claro); border-color: var(--azul); color: var(--azul); } .fc .evento--completado { background-color: var(--ok-claro); border-color: var(--ok); color: var(--ok); } .fc .evento--cancelado { background-color: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo); } /* ------------------------------------------------------------- Configuración de horarios de atención (vista staff) ------------------------------------------------------------- */ .dias-config { display: grid; gap: 10px; } /* Una fila por día: nombre + horarios + estado */ .dia-config { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--borde); border-left: 4px solid var(--ok); border-radius: var(--radio-sm); background-color: var(--fondo); transition: border-color 0.16s ease, opacity 0.16s ease; } /* Día cerrado: se atenúa y cambia el color del borde */ .dia-config--cerrado { border-left-color: var(--rojo); opacity: 0.7; } .dia-config--cerrado .dia-config__horas { opacity: 0.45; } /* Checkbox + nombre del día */ .dia-config__check { display: flex; align-items: center; gap: 9px; min-width: 140px; font-weight: 800; cursor: pointer; } .dia-config__check input { width: 18px; height: 18px; accent-color: var(--acento); cursor: pointer; } .dia-config__horas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .dia-config__horas label { font-size: 0.78rem; font-weight: 700; color: var(--gris); } .dia-config__horas select { min-width: 96px; font-variant-numeric: tabular-nums; } .dia-config__estado { margin-left: auto; font-size: 0.76rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rojo); } /* --- Vista previa de franjas --- */ .franjas-preview { display: flex; flex-wrap: wrap; gap: 8px; } .franja { display: inline-block; padding: 6px 12px; border-radius: var(--radio-pill); font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid transparent; } .franja--libre { background-color: var(--ok-claro); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .franja--ocupada { background-color: var(--fondo); color: var(--gris); border-color: var(--borde-fuerte); text-decoration: line-through; } @media (max-width: 480px) { .dia-config__estado { margin-left: 0; } .dia-config__horas { width: 100%; } }