de Bootstrap: reemplaza las esquinas
cuadradas por defecto sin tener que redondear cada | / | a mano.
Se aplica sobre el .table-responsive que ya envuelve casi todas las
tablas de listados (ver cliente_list.html, producto_list.html, etc.). */
.tabla-panel {
border: 1px solid var(--khalma-border);
border-radius: var(--khalma-radius-md);
overflow: hidden;
background: var(--khalma-surface);
}
.tabla-panel .table {
margin-bottom: 0;
}
.tabla-panel thead th {
background: var(--khalma-mint);
border-bottom: 1px solid var(--khalma-border);
}
@media print {
.no-print { display: none !important; }
}
/* ---------------------------------------------------------------------
Calendario de turnos: el color de fondo identifica al especialista; el
estado se distingue con opacidad/tachado sobre ese mismo color.
--------------------------------------------------------------------- */
.fc-event.turno-cancelado {
opacity: .45;
text-decoration: line-through;
}
.fc-event.turno-no-asistio {
opacity: .6;
border-style: dashed !important;
}
.fc-event.turno-atendido {
opacity: .85;
}
.leyenda-especialista {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .8rem;
margin-right: .75rem;
}
.leyenda-especialista .punto {
width: .7rem;
height: .7rem;
border-radius: 50%;
display: inline-block;
}
/* ---------------------------------------------------------------------
Cromado de FullCalendar: se pisa a la paleta/tipografía Khalma para que
la vista Calendario no se sienta un widget aparte del resto del panel.
--------------------------------------------------------------------- */
#panel-calendario .fc {
font-family: var(--khalma-font-body);
--fc-border-color: var(--khalma-border);
--fc-page-bg-color: var(--khalma-surface);
--fc-neutral-bg-color: var(--khalma-mint);
--fc-today-bg-color: var(--khalma-mint);
--fc-button-bg-color: var(--khalma-dark);
--fc-button-border-color: var(--khalma-dark);
--fc-button-hover-bg-color: var(--khalma-mauve-deep);
--fc-button-hover-border-color: var(--khalma-mauve-deep);
--fc-button-active-bg-color: var(--khalma-primary);
--fc-button-active-border-color: var(--khalma-primary);
}
.fc-calendario-wrapper {
background: var(--khalma-surface);
border: 1px solid var(--khalma-border);
border-radius: var(--khalma-radius-lg);
box-shadow: var(--khalma-shadow);
overflow: hidden;
padding: 1rem;
}
/* Selectores con #panel-calendario (no solo .fc-*) a propósito: el CSS de
FullCalendar se carga después de este archivo (ver {% block extra_head %}
en turnos/calendario.html), así que a igual especificidad ganaría el de
FullCalendar por cargar último. Prefijar con el id sube la especificidad
y evita depender del orden de carga. */
#panel-calendario .fc-button {
border-radius: 10px;
text-transform: capitalize;
box-shadow: none !important;
}
#panel-calendario .fc a,
#panel-calendario .fc-col-header-cell-cushion,
#panel-calendario .fc-daygrid-day-number {
color: var(--khalma-dark);
text-decoration: none;
}
#panel-calendario .fc-daygrid-day {
transition: background-color var(--khalma-transition-fast);
}
#panel-calendario .fc-daygrid-day:hover {
background-color: var(--khalma-mint);
}
@media (max-width: 767.98px) {
/* En mobile el sidebar deja de estar siempre visible: es un cajón que
se abre con el botón hamburguesa y se cierra tocando el fondo oscuro
o cualquier link del menú (ver inicializarSidebarMobile en app.js). */
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1045;
width: 72px;
min-width: 72px;
transform: translateX(-100%);
transition: transform .25s ease;
}
.sidebar.sidebar-abierta { transform: translateX(0); }
.sidebar-icon, .sidebar-avatar { width: 40px; height: 40px; }
}
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .4);
z-index: 1044;
}
.sidebar-backdrop.show { display: block; }
/* ---------------------------------------------------------------------
Turnero de una sola pantalla: barra de agenda/fecha/vistas, filas de
horario con los 5 botones de acción fijos, vista Página (grilla) y
vista Global (columnas por agenda). Ver turnos/calendario.html.
--------------------------------------------------------------------- */
/* Hijo directo de .main-content: sin esto queda con el mismo z-index que
#panel-dia (su hermano siguiente en el DOM), y el contenido de ese panel
(tarjeta KPI, filas de turnos) tapa el desplegable del buscador de
pacientes. Mismo problema y misma solución que .app-header-bar más arriba. */
.turno-toolbar {
position: relative;
z-index: 2;
}
.turno-toolbar select,
.turno-toolbar input[type="date"] {
min-width: 0;
}
.turno-fila {
display: flex;
align-items: center;
gap: .75rem;
padding: .5rem .75rem;
border-bottom: 1px solid var(--khalma-border);
background: var(--khalma-surface);
}
.turno-fila:first-child { border-top-left-radius: var(--khalma-radius-md); border-top-right-radius: var(--khalma-radius-md); }
.turno-fila:last-child { border-bottom-left-radius: var(--khalma-radius-md); border-bottom-right-radius: var(--khalma-radius-md); border-bottom: none; }
.turno-fila.ocupada { background: var(--khalma-mint); }
.turno-fila-hora {
flex: 0 0 4.5rem;
font-weight: 600;
color: var(--khalma-dark);
}
.turno-fila-contenido {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: .35rem .75rem;
}
.turno-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .4rem;
cursor: pointer;
}
.turno-item:hover .turno-item-nombre { color: var(--khalma-mauve-deep); }
.turno-item-cancelado { opacity: .5; text-decoration: line-through; }
.turno-item-nombre { font-weight: 500; transition: color var(--khalma-transition-fast); }
.turno-acciones {
flex: 0 0 auto;
display: flex;
gap: .3rem;
}
.btn-accion {
width: 2rem;
height: 2rem;
border-radius: 50%;
border: none;
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .85rem;
opacity: .95;
}
.btn-accion:hover { opacity: 1; transform: scale(1.06); color: #fff; }
.btn-accion:disabled { opacity: .25; cursor: not-allowed; transform: none; }
.btn-verde { background: var(--khalma-sage); }
.btn-amarillo { background: #f5a524; }
.btn-naranja { background: #f76b15; }
.btn-rojo { background: #dc3545; }
.btn-azul { background: #4f8ef7; }
.btn-violeta { background: #8e4ec6; }
.btn-gris { background: var(--khalma-gray); }
.btn-whatsapp { background: #25d366; }
.punto-accion {
display: inline-block;
width: .6rem;
height: .6rem;
border-radius: 50%;
margin-right: .3rem;
}
.punto-azul { background: #4f8ef7; }
.punto-rojo { background: #dc3545; }
.punto-amarillo { background: #f5a524; }
/* Sombreado rápido del menú "..." (Asistió/Ausente/Destacar): !important a
propósito, para que gane siempre sobre el fondo de .ocupada o el de la
tarjeta de la vista Página, sin depender del orden de las clases. */
.turno-fila-atendido { background: rgba(79, 142, 247, .16) !important; }
.turno-fila-no-asistio { background: rgba(220, 53, 69, .12) !important; }
.turno-fila-destacado { background: rgba(245, 165, 36, .20) !important; }
/* Feriado (turnos.feriados, informativo) y bloqueo administrativo
(BloqueoAgenda, impide el alta): se aplican solo si la fila no tiene ya un
turno agendado, para no tapar el color de estado (ocupada/atendido/etc). */
.turno-fila-feriado:not(.ocupada) { background: rgba(0, 0, 0, .04); }
.turno-fila-bloqueada:not(.ocupada) { background: rgba(0, 0, 0, .08) !important; }
/* Burbuja de aviso del día (feriado/bloqueo) en la toolbar del turnero. */
#aviso-dia-burbuja { cursor: help; }
.pill-sobreturno {
display: inline-block;
padding: .1rem .5rem;
border-radius: 999px;
font-size: .7rem;
font-weight: 600;
background: rgba(79, 142, 247, .15);
color: #3e63dd;
text-transform: uppercase;
}
.pill-cobrado {
display: inline-block;
padding: .1rem .5rem;
border-radius: 999px;
font-size: .7rem;
font-weight: 600;
background: rgba(46, 125, 50, .15);
color: #2e7d32;
}
.turno-card-pagina {
cursor: pointer;
transition: box-shadow var(--khalma-transition-fast), transform var(--khalma-transition-fast);
}
.turno-card-pagina:hover { box-shadow: var(--khalma-shadow); transform: translateY(-1px); }
.vista-global-columnas {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: .5rem;
}
.vista-global-columna {
flex: 0 0 240px;
background: var(--khalma-surface);
border: 1px solid var(--khalma-border);
border-radius: var(--khalma-radius-md);
padding: .5rem;
}
.vista-global-columna-titulo {
font-weight: 600;
border-bottom: 3px solid;
padding-bottom: .4rem;
margin-bottom: .5rem;
display: flex;
align-items: center;
gap: .4rem;
}
.vista-global-columna-titulo .punto {
width: .7rem;
height: .7rem;
border-radius: 50%;
display: inline-block;
}
.turno-global-item {
border: 1px solid var(--khalma-border);
border-radius: 10px;
padding: .4rem .5rem;
margin-bottom: .4rem;
cursor: pointer;
background: var(--khalma-bg);
transition: box-shadow var(--khalma-transition-fast), transform var(--khalma-transition-fast);
}
.turno-global-item:hover {
box-shadow: var(--khalma-shadow);
transform: translateY(-1px);
}
/* Dropdown de resultados de cualquier campo "buscá y elegí de la lista":
el buscador de paciente del turnero (.turno-cliente-resultados, nombre
histórico) y el nuevo buscador genérico (.buscador-resultados) usado por
el cliente de Ventas y por los combos buscables (ver combo-buscable en
app.js) comparten el mismo estilo. */
.turno-cliente-resultados,
.buscador-resultados {
position: absolute;
z-index: 5;
width: 100%;
max-height: 220px;
overflow-y: auto;
background: var(--khalma-surface);
border: 1px solid var(--khalma-border);
border-radius: var(--khalma-radius-md);
box-shadow: var(--khalma-shadow);
}
.combo-buscable {
position: relative;
}
/* ---------------------------------------------------------------------
Modal genérico (alta/edición de producto, servicio, cliente, usuario
como ventana superpuesta) y estados de carga del JS de app.js
--------------------------------------------------------------------- */
#modal-generico .modal-content {
border-radius: var(--khalma-radius-lg);
}
.ajax-indicator { display: none; }
form.enviando .ajax-indicator { display: inline-block; }
form.enviando button[type="submit"] { pointer-events: none; opacity: .7; }
.ajax-refrescable.refrescando { opacity: .5; transition: opacity var(--khalma-transition-fast); }
@keyframes khalma-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------------------------------------------------------------------
Lenguaje de entrada único: todo lo que aparece en pantalla (dropdowns
de Bootstrap, el modal genérico, y cualquier panel que la app muestra
con classList.toggle('d-none', ...)) usa el mismo fade + leve subida.
Al ser una animation (no una transition), se dispara sola cada vez que
el elemento pasa de display:none a visible, sin tocar el JS existente
que solo agrega/saca la clase d-none. */
.dropdown-menu.show,
.collapse.show,
.modal.show .modal-content {
animation: khalma-fade-in .18s ease;
}
.anim-in {
animation: khalma-fade-in .18s ease;
}
/* ---------------------------------------------------------------------
Nube emergente de "Productos por vencer" (ver #alerta-vencimientos en
base.html y static/js/vencimientos.js): aviso fijo en la esquina
inferior derecha que se repite hasta que se confirma "Ya lo vi".
--------------------------------------------------------------------- */
.toast-vencimientos {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 320px;
max-width: calc(100vw - 2rem);
background: var(--khalma-surface);
border: 1px solid var(--khalma-border);
border-radius: var(--khalma-radius-md);
box-shadow: 0 8px 30px rgba(76, 81, 83, .2);
z-index: 1080;
overflow: hidden;
animation: toast-vencimientos-entrada .3s ease-out;
}
@keyframes toast-vencimientos-entrada {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.toast-vencimientos-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
padding: .65rem .9rem;
background: #dc3545;
color: #fff;
font-weight: 600;
font-size: .85rem;
}
.toast-vencimientos-lista {
list-style: none;
margin: 0;
padding: .5rem .9rem;
max-height: 220px;
overflow-y: auto;
}
.toast-vencimientos-lista li {
padding: .4rem 0;
border-bottom: 1px solid var(--khalma-border);
font-size: .85rem;
}
.toast-vencimientos-lista li:last-child { border-bottom: none; }
.toast-vencimientos-footer {
padding: .6rem .9rem;
border-top: 1px solid var(--khalma-border);
text-align: right;
}
.main-content { animation: khalma-fade-in .25s ease; }
|