/* Extraído de index.html (bloque de estilo #7) */
/* â•”â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•╗
║ ULTRA PREMIUM TAB BAR — Dioptrisoft Óptica ║
║ Cada sección tiene su identidad de color propia ║
â•šâ•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•╝ */
/* Variables de color por sección */
#tab-btn-basicos {
--tc: #3b82f6;
--tc-bg: #eff6ff;
--tc-light: rgba(59, 130, 246, 0.12);
}
#tab-btn-antecedentes {
--tc: #6366f1;
--tc-bg: #eef2ff;
--tc-light: rgba(99, 102, 241, 0.12);
}
#tab-btn-examen {
--tc: #06b6d4;
--tc-bg: #ecfeff;
--tc-light: rgba(6, 182, 212, 0.12);
}
#tab-btn-refraccion {
--tc: #8b5cf6;
--tc-bg: #f5f3ff;
--tc-light: rgba(139, 92, 246, 0.12);
}
#tab-btn-pruebas {
--tc: #ec4899;
--tc-bg: #fdf2f8;
--tc-light: rgba(236, 72, 153, 0.12);
}
#tab-btn-plan {
--tc: #10b981;
--tc-bg: #ecfdf5;
--tc-light: rgba(16, 185, 129, 0.12);
}
#tab-btn-lc {
--tc: #0ea5e9;
--tc-bg: #f0f9ff;
--tc-light: rgba(14, 165, 233, 0.12);
}
#tab-btn-medicamentos {
--tc: #f59e0b;
--tc-bg: #fffbeb;
--tc-light: rgba(245, 158, 11, 0.12);
}
#tab-btn-tamizaje {
--tc: #14b8a6;
--tc-bg: #f0fdfa;
--tc-light: rgba(20, 184, 166, 0.12);
}
#tab-btn-rips {
--tc: #ef4444;
--tc-bg: #fef2f2;
--tc-light: rgba(239, 68, 68, 0.12);
}
/* ── Barra contenedora ── */
.hc-tabs-bar {
display: flex;
align-items: stretch;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom: 2px solid #e2e8f0;
overflow-x: auto;
overflow-y: hidden;
flex-shrink: 0;
padding: 10px 12px 0;
gap: 6px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hc-tabs-bar::-webkit-scrollbar {
display: none;
}
/* ── Botón base ── */
.hc-tab-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
/* Permite que crezcan pero asegura un ancho mínimo para no cortar palabras */
flex: 0 0 auto;
min-width: 75px;
/* Altura mínima en lugar de fija para evitar desbordes */
min-height: 65px;
padding: 6px 4px;
background: transparent;
border: 1.5px solid transparent;
border-bottom: none;
color: #94a3b8;
font-weight: 600;
font-family: 'Inter', sans-serif;
font-size: 0.55rem;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
/* Permite 2 líneas pero evita que afecte al tamaño de la caja */
white-space: normal;
text-align: center;
line-height: 1.2;
outline: none;
user-select: none;
border-radius: 12px 12px 0 0;
transition:
color 0.2s ease,
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
/* ── Icon bubble ── */
.hc-tab-btn .htb-bubble {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: #e9eef5;
transition:
background 0.22s cubic-bezier(.4, 0, .2, 1),
transform 0.22s cubic-bezier(.34, 1.56, .64, 1),
box-shadow 0.22s ease;
flex-shrink: 0;
}
.hc-tab-btn .htb-icon {
font-family: 'Material Symbols Outlined';
font-size: 16px;
font-weight: 300;
line-height: 1;
display: block;
color: #94a3b8;
transition: color 0.22s ease, font-variation-settings 0.22s ease;
}
/* ── Label ── */
.hc-tab-btn .htb-label {
display: flex;
align-items: center;
justify-content: center;
/* Altura adaptable para 2-3 líneas sin cortar letras */
min-height: 2.2em;
max-width: 100%;
transition: color 0.22s ease;
overflow: visible;
word-break: normal;
}
/* ── Hover: levanta el bubble y colorea ── */
.hc-tab-btn:hover {
color: var(--tc, #3b82f6);
}
.hc-tab-btn:hover .htb-bubble {
background: var(--tc-light, rgba(59, 130, 246, 0.12));
transform: translateY(-3px) scale(1.08);
box-shadow: 0 6px 16px -4px var(--tc-light, rgba(59, 130, 246, 0.3));
}
.hc-tab-btn:hover .htb-icon {
color: var(--tc, #3b82f6);
}
/* ── Activo: card flotante premium ── */
.hc-tab-btn.active {
color: var(--tc, #3b82f6);
background: white;
border-color: #e2e8f0;
font-weight: 700;
box-shadow:
0 -2px 0 0 var(--tc, #3b82f6) inset,
0 -8px 20px -4px var(--tc-light, rgba(59, 130, 246, 0.2)),
0 2px 0 0 white;
}
.hc-tab-btn.active .htb-bubble {
background: var(--tc-bg, #eff6ff);
box-shadow: 0 4px 12px -2px var(--tc-light, rgba(59, 130, 246, 0.35));
transform: translateY(-2px);
}
.hc-tab-btn.active .htb-icon {
color: var(--tc, #3b82f6);
font-variation-settings: 'FILL' 1, 'wght' 600;
}
.hc-tab-btn.active .htb-label {
color: var(--tc, #3b82f6);
}
/* Línea de acento superior */
.hc-tab-btn.active::before {
content: '';
position: absolute;
top: -1px;
left: 20%;
width: 60%;
height: 3px;
background: linear-gradient(90deg, var(--tc, #3b82f6) 0%, color-mix(in srgb, var(--tc, #3b82f6) 60%, white) 100%);
border-radius: 0 0 99px 99px;
animation: htb-top-line 0.3s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes htb-top-line {
from {
opacity: 0;
transform: scaleX(0.2);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
/* Entrada del card activo */
.hc-tab-btn.active {
animation: htb-card-in 0.25s cubic-bezier(.34, 1.3, .64, 1) both;
}
@keyframes htb-card-in {
from {
transform: translateY(4px);
opacity: 0.6;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Click feedback */
.hc-tab-btn:active .htb-bubble {
transform: scale(0.92) !important;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.hc-tabs-bar {
padding: 6px 6px 0;
gap: 2px;
}
.hc-tab-btn {
min-width: 60px;
min-height: 55px;
padding: 6px 4px 6px;
font-size: 0.48rem;
gap: 3px;
}
.hc-tab-btn .htb-bubble {
width: 24px;
height: 24px;
border-radius: 6px;
}
.hc-tab-btn .htb-icon {
font-size: 14px;
}
}
.hc-input-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.hc-label,
.hc-field-label {
font-weight: 700;
color: #475569;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 4px;
}
.hc-field-label {
font-size: 0.72rem;
color: #64748b;
margin-bottom: 6px;
}
.hc-input {
width: 100%;
padding: 10px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
transition: border-color 0.2s;
}
.hc-input:focus {
border-color: #0066cc;
outline: none;
}
.hc-input:disabled {
background: #f8fafc;
color: #94a3b8;
}
#hc-window.hc-fullscreen-mode {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
border-radius: 0 !important;
}
#hc-window.hc-fullscreen-mode>div:nth-child(3) {
padding: 16px 18px !important;
}
#hc-fullscreen-nav {
position: sticky;
top: 0;
z-index: 5;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
}
.hc-fs-top {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
}
.hc-fs-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.hc-fs-link {
appearance: none;
border: 1px solid var(--border);
background: #f8fafc;
color: #0f172a;
border-radius: 999px;
padding: 6px 10px;
font-weight: 800;
font-size: 0.78rem;
cursor: pointer;
white-space: nowrap;
}
.hc-fs-link:hover {
background: rgba(0, 102, 204, 0.08);
border-color: rgba(0, 102, 204, 0.3);
color: #0066cc;
}
.hc-fs-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
min-width: 180px;
}
.hc-fs-progress-bar {
width: 160px;
height: 8px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.hc-fs-progress-bar>div {
height: 100%;
background: linear-gradient(135deg, #0066cc, #0099ff);
border-radius: 999px;
transition: width 0.2s ease;
}
.hc-fs-progress-text,
.hc-fs-autosave {
color: #334155;
font-weight: 800;
font-size: 0.78rem;
white-space: nowrap;
}
.hc-section-heading {
margin: 12px 0 10px 0;
padding: 12px 12px;
background: linear-gradient(135deg, rgba(0, 102, 204, 0.08), rgba(0, 153, 255, 0.06));
border: 1px solid rgba(0, 102, 204, 0.18);
border-radius: 12px;
font-weight: 900;
color: #0f172a;
}
.hc-required-asterisk {
color: #ef4444;
font-weight: 900;
}
.hc-required-missing {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}