/* ============================================================
VETERINARY SYSTEM — MAIN CSS
Design: Modern, Premium, Professional
============================================================ */
/* ── CSS Variables ── */
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #dbeafe;
--secondary: #7c3aed;
--success: #059669;
--success-light: #d1fae5;
--warning: #d97706;
--warning-light: #fef3c7;
--danger: #dc2626;
--danger-light: #fee2e2;
--info: #0891b2;
--info-light: #cffafe;
--dark: #111827;
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
--gray-600: #4b5563;
--gray-500: #6b7280;
--gray-400: #9ca3af;
--gray-300: #d1d5db;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--gray-50: #f9fafb;
--white: #ffffff;
--sidebar-width: 260px;
--sidebar-collapsed: 72px;
--topnav-height: 64px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Fira Code', 'Cascadia Code', monospace;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
--shadow: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
--shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
--shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);
--shadow-xl: 0 25px 50px -12px rgba(0,0,0,.15);
--transition: .18s ease;
}
/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--gray-50);
color: var(--gray-800);
display: flex;
min-height: 100vh;
overflow-x: hidden;
line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }
ul { list-style: none; }
/* ── SIDEBAR ── */
.sidebar {
position: fixed;
top: 0; left: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--gray-900);
display: flex;
flex-direction: column;
z-index: 1000;
transition: width var(--transition), transform var(--transition);
overflow: hidden;
box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.sidebar-brand {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
min-height: 70px;
}
.brand-link {
display: flex;
align-items: center;
gap: 10px;
color: var(--white);
font-weight: 700;
font-size: .95rem;
letter-spacing: -.01em;
white-space: nowrap;
overflow: hidden;
}
.brand-icon {
width: 36px; height: 36px;
background: var(--primary);
border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: white;
}
.brand-logo { width: 36px; height: 36px; object-fit: contain; border-radius: var(--radius-sm); }
.brand-text { font-size: .9rem; line-height: 1.2; }
.sidebar-collapse-btn {
color: var(--gray-400);
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
border-radius: var(--radius-sm);
transition: all var(--transition);
flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.1); color: white; }
.sidebar-usercard {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,.06);
overflow: hidden;
}
.sidebar-user-info { overflow: hidden; }
.sidebar-user-name {
display: block;
color: white;
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-role { display: block; color: var(--gray-400); font-size: .72rem; }
/* Nav */
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
.nav-label {
padding: 14px 16px 6px;
color: var(--gray-500);
font-size: .67rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
white-space: nowrap;
overflow: hidden;
}
.nav-item a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
color: var(--gray-400);
border-radius: var(--radius-sm);
margin: 1px 8px;
transition: all var(--transition);
font-size: .87rem;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.nav-item a:hover { background: rgba(255,255,255,.08); color: white; }
.nav-item.active > a {
background: var(--primary);
color: white;
box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.nav-item a svg { flex-shrink: 0; }
.nav-item a span { overflow: hidden; text-overflow: ellipsis; }
/* Urgencia — link prominente en rojo */
.nav-item-emergency a {
background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(220,38,38,.08));
border: 1px solid rgba(248,113,113,.35);
color: #fecaca;
font-weight: 600;
}
.nav-item-emergency a:hover {
background: linear-gradient(135deg, #dc2626, #991b1b);
color: white;
border-color: transparent;
}
.nav-item-emergency.active > a,
.nav-item-emergency.active > a:hover {
background: linear-gradient(135deg, #dc2626, #991b1b);
color: white;
box-shadow: 0 4px 12px rgba(220,38,38,.4);
border-color: transparent;
}
/* Submenu */
.nav-item.has-submenu .submenu-arrow { margin-left: auto; transition: transform .2s; }
.nav-item.has-submenu.open .submenu-arrow { transform: rotate(90deg); }
.submenu { display: none; padding-left: 8px; }
.nav-item.has-submenu.open .submenu { display: block; }
.submenu li a { font-size: .82rem; padding: 7px 14px; }
.submenu li.active a { background: rgba(37,99,235,.4); color: white; }
/* Nav badge */
.nav-badge {
margin-left: auto;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-full);
font-size: .65rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.nav-badge.badge-danger { background: var(--danger); color: white; }
.nav-badge.badge-warning { background: var(--warning); color: white; }
.sidebar-footer {
padding: 12px 16px;
border-top: 1px solid rgba(255,255,255,.07);
display: flex;
align-items: center;
justify-content: space-between;
color: var(--gray-500);
font-size: .72rem;
}
.sidebar-footer a { color: var(--gray-500); }
.sidebar-footer a:hover { color: var(--danger); }
/* ── COLLAPSED SIDEBAR ── */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); }
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .nav-item a span,
body.sidebar-collapsed .nav-item a .submenu-arrow,
body.sidebar-collapsed .nav-label span,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .sidebar-footer span { display: none; }
body.sidebar-collapsed .nav-item a { justify-content: center; padding: 10px; }
body.sidebar-collapsed .sidebar-usercard { justify-content: center; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; }
body.sidebar-collapsed .sidebar-collapse-btn { display: none; }
body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-collapsed); }
/* ── MAIN WRAPPER ── */
.main-wrapper {
margin-left: var(--sidebar-width);
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
/* min-width: 0 es crucial para que un flex-item respete el ancho del padre.
Sin esto, tablas o contenidos anchos pueden hacer crecer el wrapper más
allá del viewport y romper el layout horizontalmente. */
min-width: 0;
max-width: 100%;
width: calc(100% - var(--sidebar-width));
overflow-x: hidden;
transition: margin-left var(--transition), width var(--transition);
}
body.sidebar-collapsed .main-wrapper {
width: calc(100% - var(--sidebar-collapsed));
}
/* ── TOPNAV ── */
.topnav {
position: sticky;
top: 0;
z-index: 900;
height: var(--topnav-height);
background: var(--white);
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
gap: 16px;
box-shadow: var(--shadow-sm);
}
/* min-width:0 + flex-shrink:0: sin esto el bloque izquierdo no podía encogerse más que
el ancho del título de la página, y en teléfono empujaba la campana y el avatar fuera
de la pantalla (el .main-wrapper los recortaba: no se veían). */
.topnav-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.topnav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.sidebar-toggle {
display: none; /* visible solo en móvil */
background: transparent;
border: none;
color: var(--gray-600);
cursor: pointer;
padding: 7px;
border-radius: var(--radius-sm);
}
.sidebar-toggle:hover { background: var(--gray-100); }
.btn-icon {
background: transparent;
border: none;
cursor: pointer;
padding: 7px;
border-radius: var(--radius-sm);
color: var(--gray-600);
display: flex; align-items: center; justify-content: center;
transition: all var(--transition);
}
.btn-icon:hover { background: var(--gray-100); }
/* Breadcrumb */
.breadcrumb-nav { min-width: 0; overflow: hidden; }
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb-item {
font-size: .8rem;
color: var(--gray-500);
line-height: 1.4;
display: inline-flex;
align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
content: '/';
margin: 0 8px;
color: var(--gray-300);
font-weight: 400;
}
.breadcrumb-item a {
color: var(--gray-500);
text-decoration: none;
white-space: nowrap;
}
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active {
color: var(--gray-800);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
/* Bell + Notificaciones dropdown */
.topnav-bell-wrap { position: relative; }
.topnav-bell {
position: relative;
cursor: pointer;
padding: 8px;
border-radius: var(--radius-sm);
color: var(--gray-600);
background: transparent;
border: 0;
transition: all var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
}
.topnav-bell:hover { background: var(--gray-100); color: var(--gray-900); }
.topnav-bell.is-open{ background: var(--gray-100); color: var(--gray-900); }
.bell-badge {
position: absolute;
top: -2px; right: -4px;
min-width: 20px; height: 20px;
padding: 0 5px;
background: var(--danger);
color: white;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid white;
box-shadow: 0 1px 4px rgba(239,68,68,.4);
/* Pequeño "pulse" sutil cuando hay alertas urgentes */
animation: bellPulse 2.4s ease-in-out infinite;
}
@keyframes bellPulse {
0%, 100% { box-shadow: 0 1px 4px rgba(239,68,68,.4); }
50% { box-shadow: 0 1px 10px rgba(239,68,68,.7); }
}
/* Dropdown de notificaciones — position:fixed para escapar del overflow:hidden
del .main-wrapper. El JS (initBellDropdown) calcula top/right contra el botón. */
.alerts-dropdown {
position: fixed;
width: 380px;
max-width: calc(100vw - 24px);
max-height: 480px;
background: white;
border: 1px solid var(--gray-200);
/* antes apuntaba a una variable --radius-md que NO existe en la paleta (hay sm / base / lg / xl / full):
la propiedad quedaba sin valor y el desplegable de la campana salía con esquinas
rectas, distinto a todos los demás paneles. */
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(0,0,0,.15);
z-index: 9600;
display: none;
overflow: hidden;
flex-direction: column;
}
.alerts-dropdown.is-open { display: flex; }
.alerts-dropdown::before {
content: '';
position: absolute;
top: -6px;
right: 14px;
width: 12px; height: 12px;
background: white;
border-top: 1px solid var(--gray-200);
border-left: 1px solid var(--gray-200);
transform: rotate(45deg);
}
.alerts-header {
padding: 12px 16px;
border-bottom: 1px solid var(--gray-200);
background: var(--gray-50);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.alerts-title {
font-size: .9rem; font-weight: 700;
color: var(--gray-900);
display: inline-flex; align-items: center; gap: 6px;
}
.alerts-title svg { width: 16px; height: 16px; }
.alerts-link {
font-size: .78rem;
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.alerts-link:hover { text-decoration: underline; }
.alerts-body {
flex: 1;
overflow-y: auto;
padding: 4px 0;
}
.alerts-loading,
.alerts-empty {
padding: 32px 16px;
text-align: center;
color: var(--gray-500);
font-size: .85rem;
}
.alerts-empty-icon {
display: block;
font-size: 28px;
margin-bottom: 8px;
opacity: .5;
}
.alerts-section-title {
padding: 8px 16px 4px;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--gray-500);
font-weight: 700;
}
.alert-item {
display: flex;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--gray-100);
transition: background .15s;
text-decoration: none;
color: inherit;
}
.alert-item:last-child { border-bottom: 0; }
.alert-item:hover { background: var(--gray-50); }
.alert-dot {
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
margin-top: 6px;
}
.alert-dot--urgente { background: #dc2626; }
.alert-dot--alta { background: #f59e0b; }
.alert-dot--media { background: #3b82f6; }
.alert-dot--baja { background: #94a3b8; }
.alert-dot--vacuna { background: #10b981; }
.alert-body { flex: 1; min-width: 0; }
.alert-title {
font-size: .82rem;
font-weight: 600;
color: var(--gray-900);
line-height: 1.3;
margin-bottom: 2px;
}
.alert-meta {
font-size: .72rem;
color: var(--gray-500);
line-height: 1.3;
}
.alert-meta strong { color: var(--gray-700); font-weight: 500; }
.alert-time {
font-size: .7rem;
font-weight: 600;
margin-top: 2px;
}
.alert-time--vencido { color: #dc2626; }
.alert-time--hoy { color: #f59e0b; }
.alert-time--futuro { color: var(--gray-500); }
.alert-action {
flex-shrink: 0;
align-self: center;
background: transparent;
border: 0;
color: var(--gray-400);
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: all .15s;
}
.alert-action:hover { background: #dcfce7; color: #16a34a; }
.alert-action svg { width: 14px; height: 14px; }
/* User menu */
.topnav-user {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 10px;
border-radius: var(--radius);
transition: all var(--transition);
position: relative;
border: 1px solid transparent;
}
.topnav-user:hover { background: var(--gray-50); border-color: var(--gray-200); }
.user-avatar {
width: 36px; height: 36px;
border-radius: var(--radius-full);
background: var(--primary);
display: flex; align-items: center; justify-content: center;
color: white;
font-size: .8rem;
font-weight: 700;
overflow: hidden;
flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.user-info { display: flex; flex-direction: column; }
.user-name { font-size: .84rem; font-weight: 600; color: var(--gray-900); line-height: 1.2; }
.user-role { font-size: .72rem; color: var(--gray-500); }
.user-caret { color: var(--gray-400); flex-shrink: 0; }
/* User dropdown — position:fixed con coords calculadas por JS al abrir. */
.user-dropdown {
display: none;
position: fixed;
width: 200px;
background: white;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
z-index: 9600;
padding: 6px;
animation: dropIn .15s ease;
}
.user-dropdown.open { display: block; }
.user-dropdown a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--radius-sm);
color: var(--gray-700);
font-size: .84rem;
transition: all var(--transition);
}
.user-dropdown a:hover { background: var(--gray-50); }
.user-dropdown a.text-danger { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--gray-100); margin: 4px 0; }
@keyframes dropIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: translateY(0); } }
/* ── PAGE CONTENT ── */
.page-content {
flex: 1;
padding: 24px;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 24px;
gap: 16px;
flex-wrap: wrap;
}
.page-title { font-size: 1.4rem; font-weight: 700; color: var(--gray-900); }
.page-subtitle { font-size: .84rem; color: var(--gray-500); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Botones de cabecera armados con .flex en vez de .page-actions: que también bajen
de línea si no caben (en teléfono quedaban cortados, p. ej. en el comprobante). */
.page-header > .flex { flex-wrap: wrap; }
/* ── FOOTER ── */
.app-footer {
padding: 16px 24px;
border-top: 1px solid var(--gray-200);
display: flex;
justify-content: space-between;
font-size: .78rem;
color: var(--gray-400);
background: white;
}
/* ── CARDS ── */
.card {
background: white;
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.card-header {
padding: 18px 22px 14px;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.card-title {
font-size: .97rem;
font-weight: 700;
color: var(--gray-900);
display: flex;
align-items: center;
gap: 8px;
}
.card-body { padding: 20px 22px; }
.card-footer {
padding: 14px 22px;
border-top: 1px solid var(--gray-100);
background: var(--gray-50);
}
/* Stat Cards */
.stat-card {
background: white;
border-radius: var(--radius-lg);
padding: 22px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 16px;
transition: all var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-icon {
width: 52px; height: 52px;
border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.stat-icon.blue { background: var(--primary-light); color: var(--primary); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.yellow { background: var(--warning-light); color: var(--warning); }
.stat-icon.red { background: var(--danger-light); color: var(--danger); }
.stat-icon.purple { background: #ede9fe; color: var(--secondary); }
.stat-icon.teal { background: var(--info-light); color: var(--info); }
.stat-info { flex: 1; min-width: 0; }
.stat-value { font-size: 1.8rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
/* Para montos largos ($1.250.000): escala el tamaño y fuerza UNA línea sin
desbordar. Tabular-nums alinea dígitos. Usar en stat-cards de dinero. */
.stat-value.stat-money {
font-size: clamp(1.05rem, 1.9vw, 1.45rem);
white-space: nowrap;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.stat-label { font-size: .8rem; color: var(--gray-500); margin-top: 4px; }
.stat-trend { font-size: .74rem; font-weight: 600; margin-top: 6px; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }
/* ── BUTTONS ── */
.btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border-radius: var(--radius);
font-size: .86rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: all var(--transition);
white-space: nowrap;
line-height: 1;
text-decoration: none;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn svg { flex-shrink: 0; }
/* Botones con background sólido: forzar `color: white` también en hover/focus/active
porque la regla global `a:hover { color: var(--primary-dark) }` (línea ~68) sobreescribe
el texto blanco cuando el botón es un , y el texto queda
del mismo color que el fondo (invisible). */
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background: var(--primary-dark); border-color: var(--primary-dark); color: white; }
.btn-success { background: var(--success); color: white; border-color: var(--success); }
.btn-success:hover,
.btn-success:focus,
.btn-success:active { filter: brightness(1.08); color: white; }
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active { filter: brightness(1.1); color: white; }
.btn-warning { background: var(--warning); color: white; border-color: var(--warning); }
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active { filter: brightness(1.1); color: white; }
.btn-info { background: var(--info); color: white; border-color: var(--info); }
.btn-info:hover,
.btn-info:focus,
.btn-info:active { filter: brightness(1.1); color: white; }
.btn-secondary { background: var(--gray-200); color: var(--gray-700); border-color: var(--gray-200); }
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active { background: var(--gray-300); color: var(--gray-700); }
.btn-outline-primary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active { background: var(--primary); color: white; }
.btn-outline-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active { background: var(--danger); color: white; }
.btn-ghost { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); }
.btn-sm { padding: 6px 12px; font-size: .78rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 12px 24px; font-size: .95rem; }
.btn-icon-only { padding: 7px; gap: 0; }
.btn-group { display: flex; gap: 4px; }
.btn-group-col { display: flex; flex-direction: column; gap: 4px; }
/* ── FORMS ── */
.form-grid { display: grid; gap: 18px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
font-size: .82rem;
font-weight: 600;
color: var(--gray-700);
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-control {
width: 100%;
padding: 9px 12px;
border: 1.5px solid var(--gray-300);
border-radius: var(--radius);
font-size: .88rem;
color: var(--gray-800);
background: white;
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
line-height: 1.5;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-control:disabled { background: var(--gray-50); cursor: not-allowed; color: var(--gray-500); }
.form-control.invalid { border-color: var(--danger); }
.form-control.invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.form-hint { font-size: .74rem; color: var(--gray-500); }
.form-error { font-size: .74rem; color: var(--danger); }
/* Input with icon */
.input-group { position: relative; }
.input-group .form-control { padding-left: 36px; }
.input-group .input-icon {
position: absolute;
left: 10px; top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
pointer-events: none;
}
/* Checkbox & Radio */
.form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
width: 16px; height: 16px;
accent-color: var(--primary);
cursor: pointer;
}
/* ── TABLES ── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius); }
/* .table-scroll lo pone main.js alrededor de cada tabla que no venga envuelta: si la
tabla es más ancha que su tarjeta, se desplaza ADENTRO de la tarjeta en vez de quedar
cortada por el overflow:hidden de .card (pasaba incluso en escritorio con Stock y
Proveedores). Si la tabla cabe, no se nota. */
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table {
width: 100%;
border-collapse: collapse;
font-size: .85rem;
}
.table th {
background: var(--gray-50);
color: var(--gray-600);
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
padding: 11px 14px;
text-align: left;
border-bottom: 2px solid var(--gray-200);
white-space: nowrap;
}
.table td {
padding: 13px 14px;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-700);
vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--gray-50); }
.table-striped tbody tr:nth-child(even) { background: var(--gray-50); }
/* ── BADGES ── */
.badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: var(--radius-full);
font-size: .7rem;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
}
.badge-success { background: var(--success-light); color: #065f46; }
.badge-danger { background: var(--danger-light); color: #991b1b; }
.badge-warning { background: var(--warning-light); color: #92400e; }
.badge-info { background: var(--info-light); color: #164e63; }
.badge-primary { background: var(--primary-light); color: #1e40af; }
.badge-secondary { background: var(--gray-100); color: var(--gray-600); }
.badge-dark { background: var(--gray-800); color: white; }
/* ── ALERTS ── */
.alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px 16px;
border-radius: var(--radius);
font-size: .86rem;
margin-bottom: 18px;
position: relative;
border: 1px solid transparent;
animation: slideDown .2s ease;
}
@keyframes slideDown { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform: translateY(0); } }
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert-success { background: var(--success-light); color: #065f46; border-color: #a7f3d0; }
.alert-error { background: var(--danger-light); color: #991b1b; border-color: #fca5a5; }
.alert-warning { background: var(--warning-light); color: #92400e; border-color: #fcd34d; }
.alert-info { background: var(--info-light); color: #164e63; border-color: #a5f3fc; }
/* Alias de .alert-error: los formularios de Stock y Proveedores (add/edit/adjust)
usan el nombre .alert-danger y no existía ninguna regla, así que sus cajas de
validación se dibujaban SIN fondo ni borde rojo — un error de carga se veía como
un recuadro neutro. */
.alert-danger { background: var(--danger-light); color: #991b1b; border-color: #fca5a5; }
.alert-close {
position: absolute;
top: 10px; right: 10px;
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
color: inherit;
opacity: .6;
line-height: 1;
padding: 0 4px;
}
.alert-close:hover { opacity: 1; }
/* ── MODALS ── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(3px);
}
.modal-overlay.open { display: flex; animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal {
background: white;
border-radius: var(--radius-xl);
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity:0; transform: scale(.94) translateY(10px); } to { opacity:1; transform: none; } }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 1000px; }
.modal-header {
padding: 20px 22px 16px;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-body { padding: 20px 22px; }
.modal-footer {
padding: 14px 22px;
border-top: 1px solid var(--gray-100);
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* ── TABS ── */
.tabs { border-bottom: 2px solid var(--gray-200); display: flex; gap: 2px; margin-bottom: 22px; flex-wrap: wrap; }
.tab-btn {
padding: 9px 18px;
border: none;
background: transparent;
font-size: .86rem;
font-weight: 500;
color: var(--gray-500);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all var(--transition);
display: flex; align-items: center; gap: 6px;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .15s ease; }
/* ── TIMELINE ── */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
content: '';
position: absolute;
left: 9px; top: 0; bottom: 0;
width: 2px;
background: var(--gray-200);
}
.timeline-item { position: relative; margin-bottom: 24px; }
.timeline-dot {
position: absolute;
left: -26px;
top: 4px;
width: 18px; height: 18px;
border-radius: var(--radius-full);
border: 2px solid white;
box-shadow: 0 0 0 2px var(--primary);
background: var(--primary);
z-index: 1;
display: flex; align-items: center; justify-content: center;
}
.timeline-dot.green { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.timeline-dot.red { background: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.timeline-dot.yellow { background: var(--warning); box-shadow: 0 0 0 2px var(--warning); }
.timeline-card {
background: white;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow-sm);
}
.timeline-date { font-size: .74rem; color: var(--gray-400); margin-bottom: 6px; }
.timeline-title { font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.timeline-body { font-size: .84rem; color: var(--gray-600); }
/* ── SEARCH BAR ── */
.search-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
padding: 14px 18px;
background: white;
border-radius: var(--radius);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
}
.search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.search-input-wrap .form-control { padding-left: 36px; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
/* ── PAGINATION ── */
.pagination { display: flex; gap: 4px; flex-wrap: wrap; }
.page-item .page-link {
padding: 7px 12px;
border: 1px solid var(--gray-300);
border-radius: var(--radius-sm);
color: var(--gray-600);
font-size: .84rem;
transition: all var(--transition);
}
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: white; }
.page-link:hover { background: var(--gray-100); }
/* Elipsis y contador de resultados: no son enlaces, no deben verse clicables. */
.page-item.disabled .page-link { color: var(--gray-400); cursor: default; background: none; }
.page-item.disabled .page-link:hover { background: none; }
/* ── GRID UTILS ── */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
/* ── FLEX UTILS ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
/* ── SPACING UTILS ── */
.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}
.p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}
/* ── TEXT UTILS ── */
.text-sm { font-size: .8rem; } .text-xs { font-size: .72rem; } .text-lg { font-size: 1rem; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.text-muted { color: var(--gray-500); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── MISC UTILS ── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.hidden { display: none !important; }
.rounded-full { border-radius: var(--radius-full); }
.rounded { border-radius: var(--radius); }
.shadow { box-shadow: var(--shadow); }
.border { border: 1px solid var(--gray-200); }
.divider { height: 1px; background: var(--gray-200); margin: 18px 0; }
/* Avatar / Foto paciente */
.patient-photo {
width: 56px; height: 56px;
border-radius: var(--radius);
object-fit: cover;
border: 2px solid var(--gray-200);
}
.patient-photo-placeholder {
width: 56px; height: 56px;
border-radius: var(--radius);
background: var(--gray-100);
display: flex; align-items: center; justify-content: center;
color: var(--gray-400);
font-size: 1.6rem;
border: 2px solid var(--gray-200);
flex-shrink: 0;
}
/* ── ALERT PRIORITY COLORS ── */
.priority-urgente { border-left: 4px solid var(--danger); }
.priority-alta { border-left: 4px solid var(--warning); }
.priority-media { border-left: 4px solid var(--primary); }
.priority-baja { border-left: 4px solid var(--gray-300); }
/* ── FILE UPLOAD ZONE ── */
.drop-zone {
border: 2px dashed var(--gray-300);
border-radius: var(--radius-lg);
padding: 40px 24px;
text-align: center;
cursor: pointer;
transition: all var(--transition);
background: var(--gray-50);
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--primary); background: var(--primary-light); }
/* Lista de previews tras seleccionar archivos en un drop-zone */
.file-upload-list { display: flex; flex-direction: column; gap: 8px; }
/* Fila por archivo con tipo individual + sub-tipo + descripción */
.file-upload-row {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.file-upload-row-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
font-size: .88rem;
}
.file-upload-row-meta {
display: grid;
grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.4fr) minmax(180px, 2fr);
gap: 8px;
}
.file-upload-field { display: flex; flex-direction: column; gap: 3px; }
.file-upload-field-label {
font-size: .7rem; color: var(--gray-500); font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
}
.file-upload-field .form-control { padding: 5px 8px; font-size: .82rem; }
.form-control-sm { padding: 5px 8px !important; font-size: .82rem !important; }
@media (max-width: 720px) {
.file-upload-row-meta { grid-template-columns: 1fr; }
}
/* Item simple (legacy / cuando solo se quiere nombre+tamaño sin metadata) */
.file-upload-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
font-size: .85rem;
}
.file-upload-icon { font-size: 1.1rem; }
.file-upload-name { flex: 1; color: var(--gray-800); word-break: break-all; font-weight: 500; }
.file-upload-size { color: var(--gray-500); font-size: .75rem; flex-shrink: 0; }
.file-upload-remove {
background: transparent; border: 0; color: var(--gray-400); cursor: pointer;
font-size: 1.3rem; padding: 0 6px; line-height: 1; margin-left: auto;
}
.file-upload-remove:hover { color: var(--danger); }
.drop-zone-icon { font-size: 2.5rem; margin-bottom: 12px; }
.drop-zone h4 { font-size: .92rem; color: var(--gray-700); margin-bottom: 6px; }
.drop-zone p { font-size: .8rem; color: var(--gray-500); }
/* ── EMPTY STATE ── */
.empty-state {
text-align: center;
padding: 60px 24px;
color: var(--gray-500);
}
.empty-state svg { width: 56px; height: 56px; margin-bottom: 16px; opacity: .4; }
.empty-state h4 { font-size: .97rem; color: var(--gray-700); margin-bottom: 6px; }
.empty-state p { font-size: .84rem; }
/* ── SIDEBAR OVERLAY (mobile) ── */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 999;
}
/* ── LOGIN PAGE ── */
.login-page {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #7c3aed 100%);
padding: 20px;
}
.login-card {
background: white;
border-radius: var(--radius-xl);
padding: 48px 44px;
width: 100%;
max-width: 420px;
box-shadow: var(--shadow-xl);
}
.login-logo {
text-align: center;
margin-bottom: 32px;
}
.login-logo .logo-icon {
width: 64px; height: 64px;
background: var(--primary);
border-radius: var(--radius-lg);
margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
color: white;
font-size: 2rem;
box-shadow: 0 8px 24px rgba(37,99,235,.35);
}
.login-logo h1 { font-size: 1.5rem; font-weight: 800; color: var(--gray-900); }
.login-logo p { font-size: .84rem; color: var(--gray-500); margin-top: 4px; }
/* ── RESPONSIVE ──
Regla de la casa (oct-2026, pedido de Claudio): en NINGÚN ancho la página se corre
hacia el lado ni queda algo cortado. Se verifica con tests/responsive/auditar.js
(abre todas las pantallas a 360, 390, 768, 820, 1024, 1280 y 1440 px; ver tests/README.md).
· Tablas: en teléfono, las de 4 o más columnas se dibujan como fichas "etiqueta +
valor" (bloque TABLAS APILADAS, más abajo); en tablet o en un espacio angosto, las
que no caben. En escritorio siguen siendo tabla, dentro de .table-wrapper o .table-scroll.
· Grillas con las columnas escritas en el HTML (style="grid-template-columns:…"):
llevan una clase .cols-stack-* que las deja en una columna en pantalla angosta.
El !important es a propósito: tiene que ganarle al style del propio elemento.
· Pantallas táctiles: campos a 16 px (con menos, el iPhone hace zoom al tocarlos
y la página queda corrida) y botones con área de toque de 36–40 px.
Las columnas apiladas usan minmax(0,1fr) y no 1fr: con 1fr una palabra larga o una
tabla adentro ensanchaba la columna más allá de la pantalla. */
@media (max-width: 1200px) {
.grid-5 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Barra superior en pantallas medianas (tablet horizontal, notebook chico): con el menú
lateral abierto no entraban "Buscar…", "Cambiar usuario" y el nombre del usuario. Se
van achicando por pasos; la búsqueda sigue a mano con su ícono (o Ctrl K). */
@media (max-width: 1100px) {
/* Migas: sólo el nombre de la página, en una línea (si no, se partían en dos líneas
dentro de la barra y la segunda quedaba cortada). Lo de arriba está en el menú lateral. */
.breadcrumb { flex-wrap: nowrap; }
.breadcrumb-item:not(:last-child) { display: none; }
.breadcrumb-item + .breadcrumb-item::before { content: none; }
.breadcrumb-item:last-child {
display: block; min-width: 0; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--gray-800); font-weight: 600; font-size: .86rem;
}
.topnav .topnav-search-trigger, .topnav .topnav-switch { min-width: 0; width: 38px; height: 38px; padding: 0; justify-content: center; }
.topnav .topnav-search-trigger .search-label,
.topnav .topnav-search-trigger .search-kbd,
.topnav .topnav-switch .switch-label { display: none; }
}
@media (max-width: 900px) {
.topnav .user-info { display: none; }
/* Tablet vertical con el menú lateral abierto: dos columnas de 250 px no alcanzan
(ficha del paciente y del dueño) */
.grid-2 { grid-template-columns: minmax(0, 1fr); }
}
/* Notebook de 1280–1366: celdas un poco más justas, así la Agenda entra sin scroll lateral */
@media (max-width: 1366px) {
.table th, .table td, .table th.sortable a { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1024px) {
.cols-stack-lg { grid-template-columns: minmax(0, 1fr) !important; }
/* Un hijo con "grid-column: span 2" en una grilla ya apilada crearía una segunda
columna fantasma y desbordaría. */
.cols-stack-lg > * { grid-column: auto !important; }
/* Tablet: los títulos de columna pueden partirse en dos líneas, así entran más
columnas antes de necesitar scroll (las celdas ya se aprietan desde 1366 px). */
.table th { white-space: normal; }
}
@media (max-width: 992px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3, .form-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 768px) {
.sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; }
.sidebar.open { transform: translateX(0); }
.sidebar-overlay.open { display: block; }
.main-wrapper { margin-left: 0 !important; width: 100% !important; }
body.sidebar-collapsed .main-wrapper { width: 100% !important; }
.sidebar-toggle { display: flex !important; }
.page-content { padding: 16px; }
.grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr); }
.col-span-2, .col-span-3 { grid-column: span 1; }
.cols-stack { grid-template-columns: minmax(0, 1fr) !important; }
.cols-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cols-stack > * { grid-column: auto !important; } /* (ver .cols-stack-lg más arriba) */
.page-header { flex-direction: column; align-items: flex-start; margin-bottom: 18px; }
.page-title { font-size: 1.25rem; }
.login-card { padding: 32px 24px; }
.card-header { padding: 14px 16px 12px; }
.card-body { padding: 16px; }
.card-footer { padding: 12px 16px; }
.search-bar { padding: 12px; }
.search-input-wrap { min-width: 0; flex-basis: 100%; }
.app-footer { flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px; text-align: center; }
/* Barra superior: solo el nombre de la página y los íconos. Los textos de
"Buscar…" y "Cambiar usuario" y el nombre del usuario ya no caben. */
.topnav { padding: 0 10px 0 6px; gap: 8px; }
.topnav-left { gap: 2px; }
.topnav-right { gap: 2px; }
.user-info, .user-caret { display: none; }
.topnav-user { padding: 2px; gap: 0; border: 0; }
.topnav-user:hover { background: none; }
/* (buscar y cambiar usuario ya quedaron en ícono desde 1100 px, más arriba) */
.topnav-bell, .sidebar-toggle { width: 38px; height: 38px; padding: 0; }
/* Tarjetas de cifras: de a dos por fila y compactas (antes, una por fila, enormes
y centradas: había que bajar tres pantallas para pasar las cifras del tablero). */
.grid:has(> .stat-card), .grid:has(> a > .stat-card) {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
gap: 10px;
}
.stat-card { padding: 14px; gap: 12px; border-radius: var(--radius); }
.stat-card:hover { transform: none; }
.stat-icon { width: 40px; height: 40px; }
.stat-icon svg { width: 20px !important; height: 20px !important; }
.stat-value { font-size: 1.45rem; }
/* Pestañas: siguen partiéndose en varias filas (todo a la vista, sin scroll
lateral), pero más juntas. */
.tabs { gap: 0; }
.tab-btn { padding: 8px 12px; }
/* Ventanas emergentes a la medida del teléfono */
.modal-overlay { padding: 10px; }
.modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: var(--radius-lg); }
.modal-header { padding: 16px 16px 12px; gap: 8px; }
.modal-body { padding: 16px; }
.modal-footer { padding: 12px 16px; flex-wrap: wrap; }
/* (con body/#id delante: las reglas base del buscador están más abajo en el archivo) */
body .modal-overlay#globalSearchOverlay,
body .modal-overlay#shortcutsOverlay { padding-top: 10px; }
#globalSearchOverlay .global-search-results { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
#globalSearchOverlay .global-search-footer { display: none; } /* ↑ ↓ Enter Esc: no hay teclado físico */
}
/* ══ TABLAS APILADAS ══
Una tabla que no cabe a lo ancho se dibuja como lista de fichas: cada fila es una
ficha, la primera celda hace de título, cada celda siguiente lleva a la izquierda el
nombre de su columna y la columna "Acciones" queda al pie, a la derecha.
Quién decide es main.js (bloque "Tablas en pantalla angosta"), que le pone la clase
.table-stack a la tabla:
· en teléfono (≤640 px), toda tabla de 4 columnas o más;
· en cualquier pantalla, la que NO cabe en un espacio de menos de 900 px: tablet
vertical, o "Citas de hoy" en la columna del tablero de escritorio (antes la
columna "Acción" quedaba cortada). Con 900 px o más, una tabla ancha sigue siendo
tabla, con scroll propio.
main.js también copia el nombre de cada columna (su | ) al data-label de las
celdas y marca td-title, td-media (foto), td-actions y td-empty. Las tablas de 3
columnas o menos y las fichas "clave: valor" sin siguen como tabla.
Una tabla que NUNCA deba apilarse: clase .table-no-stack. Una de menos de 4
columnas que igual no cabe en teléfono (campos de hora, por ejemplo): .table-stack-sm. */
/* Primer pintado en teléfono, antes de que corra main.js: lo justo para que la tabla
no se salga de la pantalla. :where() no suma especificidad, así las reglas completas
de .table-stack (abajo) mandan apenas main.js marca la tabla. */
@media screen and (max-width: 640px) {
:where(.table:has(> thead > tr > :nth-child(4)):not(.table-no-stack), .table.table-stack-sm) { display: block; width: 100%; }
:where(.table:has(> thead > tr > :nth-child(4)):not(.table-no-stack), .table.table-stack-sm) > thead { display: none; }
:where(.table:has(> thead > tr > :nth-child(4)):not(.table-no-stack), .table.table-stack-sm) > :is(tbody, tfoot) { display: block; }
:where(.table:has(> thead > tr > :nth-child(4)):not(.table-no-stack), .table.table-stack-sm) > :is(tbody, tfoot) > tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--gray-200); }
:where(.table:has(> thead > tr > :nth-child(4)):not(.table-no-stack), .table.table-stack-sm) > :is(tbody, tfoot) > tr > :is(td, th) { display: block; border: 0; padding: 4px 0; }
/* Las que quedan como tabla: que una palabra larga (archivo, correo) se parta
antes que desbordar. */
.table td { overflow-wrap: anywhere; }
}
.table.table-stack { display: block; width: 100%; background: var(--white); }
.table.table-stack > thead { display: none; }
.table.table-stack > tbody,
.table.table-stack > tfoot { display: block; }
.table.table-stack > tbody > tr,
.table.table-stack > tfoot > tr {
display: block; position: relative;
padding: 12px 16px; border-bottom: 1px solid var(--gray-200);
}
.table.table-stack > tbody > tr:last-child { border-bottom: 0; }
.table.table-stack > tbody > tr.tr-danger { background: #fff5f5; }
.table.table-stack > tbody > tr > :is(td, th) {
display: block; position: relative;
min-height: 30px; padding: 5px 0 5px 38%;
border: 0; background: none;
white-space: normal !important;
width: auto !important; min-width: 0 !important; max-width: none !important;
overflow-wrap: anywhere;
}
/* (las celdas que abarcan varias columnas conservan su alineación: suelen ser el
"Sin registros" centrado) */
.table.table-stack > tbody > tr > :is(td, th):not([colspan]:not([colspan="1"])) { text-align: left !important; }
.table.table-stack > tbody > tr > :is(td, th)::before {
content: attr(data-label);
position: absolute; left: 0; top: 7px; width: calc(38% - 12px);
font-size: .68rem; font-weight: 700; line-height: 1.35;
text-transform: uppercase; letter-spacing: .04em;
color: var(--gray-500); overflow-wrap: normal;
}
/* Sin etiqueta: columnas sin nombre y celdas que abarcan varias columnas (filas de
"sin registros", cabeceras de grupo). */
.table.table-stack > tbody > tr > :is(td, th):is(:not([data-label]), [data-label=""], [colspan]:not([colspan="1"])) { padding-left: 0; }
.table.table-stack > tbody > tr > :is(td, th):is(:not([data-label]), [data-label=""], [colspan]:not([colspan="1"]))::before { content: none; }
/* Título de la ficha */
.table.table-stack > tbody > tr > .td-title {
padding: 0 0 6px; min-height: 0;
font-size: .95rem; font-weight: 600; color: var(--gray-900);
}
.table.table-stack > tbody > tr > .td-title::before { content: none; }
/* Foto del paciente: a la izquierda del título */
.table.table-stack > tbody > tr.tr-media { padding-left: 74px; min-height: 72px; }
.table.table-stack > tbody > tr > .td-media { position: absolute; left: 16px; top: 14px; padding: 0; min-height: 0; }
.table.table-stack > tbody > tr > .td-media::before { content: none; }
/* Celda vacía: no se muestra una etiqueta sin valor */
.table.table-stack > tbody > tr > .td-empty { display: none; }
/* Acciones: al pie de la ficha, a la derecha */
.table.table-stack > tbody > tr > .td-actions {
display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px;
margin-top: 8px; padding: 10px 0 0; min-height: 0;
border-top: 1px solid var(--gray-100);
text-align: right !important;
}
.table.table-stack > tbody > tr > .td-actions::before { content: none; }
.table.table-stack > tbody > tr > .td-actions .btn-group { flex-wrap: wrap; justify-content: flex-end; }
/* Fila de totales: "Total ........ $12.000" en una línea */
.table.table-stack > tfoot > tr {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
background: var(--gray-50); border-bottom: 0;
}
.table.table-stack > tfoot > tr > :is(td, th) { display: block; padding: 0; border: 0; text-align: left !important; width: auto !important; }
.table.table-stack > tfoot > tr > :is(td, th):empty { display: none; }
/* Agrupación por paciente (includes/list_helpers.php) */
.table.table-stack > tbody > tr.list-group-header { padding: 0; }
.table.table-stack > tbody > tr.list-group-row { padding-left: 26px; }
.table.table-stack > tbody > tr.list-group-row > td { padding-left: 38% !important; }
.table.table-stack > tbody > tr.list-group-row > :is(.td-title, .td-actions, [data-label=""]) { padding-left: 0 !important; }
.table.table-stack > tbody > tr.list-group-row > .td-actions { padding-top: 10px !important; }
/* Un texto "truncate" (una línea con …) en la ficha se lee entero: hay espacio hacia abajo */
.table.table-stack > tbody > tr > td .truncate { white-space: normal; }
/* Campos dentro de la ficha (presupuestos, órdenes de compra): a todo el ancho */
.table.table-stack > tbody > tr > td > :is(.form-control, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { width: 100%; max-width: 100%; }
/* Ficha en columnas (.table-stack-2, la pone main.js cuando el espacio pasa de 440 px:
teléfono grande, tablet, columna del tablero de escritorio). Los datos van de a dos
o tres por fila (según el ancho) con el nombre ARRIBA del valor, y los botones suben
junto al título: la lista queda la mitad de alta que con un dato por fila. */
.table.table-stack.table-stack-2 > tbody > tr {
/* min(190px, 45%): nunca menos de dos columnas (título y botones comparten la primera fila) */
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 45%), 1fr));
gap: 6px 16px; align-items: start;
}
.table.table-stack.table-stack-2 > tbody > tr > :is(td, th) { padding: 0; min-height: 0; }
.table.table-stack.table-stack-2 > tbody > tr > :is(td, th)::before {
position: static; display: block; width: auto; margin-bottom: 1px;
}
.table.table-stack.table-stack-2 > tbody > tr > :is([colspan]:not([colspan="1"]), [data-label=""]):not(.td-actions),
.table.table-stack.table-stack-2 > tbody > tr:not(:has(> .td-actions)) > .td-title { grid-column: 1 / -1; }
.table.table-stack.table-stack-2 > tbody > tr > .td-title { grid-column: 1 / -2; grid-row: 1; align-self: center; padding: 0; }
.table.table-stack.table-stack-2 > tbody > tr > .td-actions {
grid-column: -2 / -1; grid-row: 1; justify-self: end;
margin: 0; padding: 0; border-top: 0;
}
@media print {
/* Al imprimir, siempre tabla */
.table.table-stack { display: table; }
.table.table-stack > thead { display: table-header-group; }
.table.table-stack > tbody { display: table-row-group; }
.table.table-stack > tfoot { display: table-footer-group; }
.table.table-stack > tbody > tr, .table.table-stack > tfoot > tr { display: table-row; padding: 0; }
.table.table-stack > tbody > tr > :is(td, th), .table.table-stack > tfoot > tr > :is(td, th) { display: table-cell; position: static; padding: 6px 8px; }
.table.table-stack > tbody > tr > :is(td, th)::before { content: none; }
.table.table-stack > tbody > tr > .td-empty { display: table-cell; }
}
@media (max-width: 560px) {
.form-grid-2, .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
/* .form-grid-4 sólo se usa para signos vitales (números cortos): de a dos por fila */
.form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Filtros de los listados: de a dos por fila y parejos (cada uno con su ancho
"auto" quedaban dentados) */
.search-bar form > :is(select, input:not([type="hidden"])) { flex: 1 1 140px; min-width: 0; }
.cols-stack-sm { grid-template-columns: minmax(0, 1fr) !important; }
.cols-stack-sm > * { grid-column: auto !important; }
}
@media (max-width: 480px) {
html { font-size: 14px; }
/* Cifras: ícono arriba, así la cifra y su nombre tienen todo el ancho de la tarjeta */
.stat-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
.stat-icon { width: 34px; height: 34px; }
.stat-icon svg { width: 18px !important; height: 18px !important; }
}
/* Pantallas táctiles (teléfono, tablet): campos a 16 px y áreas de toque cómodas.
El buscador global se cierra tocando "Cerrar" (en teléfono no hay tecla Esc). */
@media (pointer: coarse) {
/* !important a propósito: varias pantallas achican sus campos con reglas propias
(vademécum, filtros) y con menos de 16 px el iPhone hace zoom al tocarlos. Se salva
el campo del PIN, que es más grande a propósito. */
:is(.form-control, .global-search-input, .list-sort-btn, select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):not(#pinSwitchInput) { font-size: 16px !important; }
/* Botones chicos de otros archivos: dictado por voz (assets/js/dictado.js), la ✕ de los
buscadores de paciente/dueño y las pestañas de Urgencia */
.dictado-wrap .dictado-btn { width: 36px; height: 36px; top: 6px; right: 6px; }
.dictado-wrap textarea.form-control { padding-right: 48px; }
.entity-search .entity-search-clear { width: 36px; height: 36px; right: 2px; }
.entity-search .entity-search-input { padding-right: 44px; }
.mode-tabs .mode-tab { min-height: 36px; }
.btn { min-height: 40px; }
.btn-sm { min-height: 36px; }
.btn-icon-only { min-width: 40px; justify-content: center; }
.btn-sm.btn-icon-only { min-width: 36px; }
.page-item .page-link { display: inline-flex; align-items: center; min-height: 38px; min-width: 38px; justify-content: center; }
#globalSearchOverlay .global-search-esc { font-size: 0; padding: 6px 10px; cursor: pointer; }
#globalSearchOverlay .global-search-esc::after { content: 'Cerrar'; font-size: .8rem; font-family: var(--font-sans); }
}
/* ── PRINT ── */
@media print {
/* ══ 1. Qué NO va al papel ══
.no-print va acá porque recipes/view.php y surgery/view.php lo ponen sobre
y |