Hugging Face's logo

Spaces:
blackmistcode
/
morphos
Sleeping

App Files Community
josesalazar2025 commited on
Commit
0431806
·
1 Parent(s): 18c7aa5

Refactor panel headers: h2 as first section child, panel-cabecera as div

Browse files

Add visually-hidden h2.panel-titulo as first direct child of each section
for semantic/SEO correctness. Change panel-cabecera from h2 to div keeping
all visual content and layout unchanged.

Files changed (2) hide show
  1. css/styles.css +9 -0
  2. index.html +22 -16
css/styles.css CHANGED
@@ -410,6 +410,15 @@ main {
410
  overflow: hidden;
411
  }
412
 
 
 
 
 
 
 
 
 
 
413
  .panel-cabecera {
414
  height: 2.5rem;
415
  display: flex;
 
410
  overflow: hidden;
411
  }
412
 
413
+ .panel-titulo {
414
+ position: absolute;
415
+ width: 1px;
416
+ height: 1px;
417
+ overflow: hidden;
418
+ clip: rect(0, 0, 0, 0);
419
+ white-space: nowrap;
420
+ }
421
+
422
  .panel-cabecera {
423
  height: 2.5rem;
424
  display: flex;
index.html CHANGED
@@ -17,7 +17,7 @@
17
  <link rel="preload" href="assets/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
18
 
19
  <link rel="icon" href="assets/icons/favicon.ico">
20
- <link rel="stylesheet" href="css/styles.css?v=3">
21
  </head>
22
  <body>
23
 
@@ -71,7 +71,8 @@
71
 
72
  <!-- DATOS DEL PACIENTE -->
73
  <section class="panel" id="panel-paciente">
74
- <h2 class="panel-cabecera">Datos del paciente</h2>
 
75
  <div class="panel-cuerpo panel-cuerpo--paciente">
76
  <div class="fila-paciente">
77
  <label for="mob-pt-especie">Especie</label>
@@ -117,7 +118,8 @@
117
 
118
  <!-- HEMATOLOGÍA -->
119
  <section class="panel subpanel" id="panel-hema">
120
- <h2 class="panel-cabecera">
 
121
  Hematología
122
  <input type="file" id="pdf-input-hema" class="pdf-input" accept=".pdf" hidden>
123
  <button class="btn-limpiar-panel" type="button" data-panel="hema" aria-label="Limpiar campos Hematología" data-tooltip="Limpiar formulario">
@@ -126,7 +128,7 @@
126
  <button class="btn-importar-pdf" type="button" data-panel="hema" aria-label="Importar PDF Hematología" data-tooltip="Adjuntar PDF">
127
  <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>
128
  </button>
129
- </h2>
130
  <div class="subpanel-anim"><div class="panel-cuerpo" id="cuerpo-hema">
131
  <div class="cabecera-columnas" aria-hidden="true">
132
  <span></span>
@@ -278,7 +280,8 @@
278
 
279
  <!-- PERFIL ENDOCRINO -->
280
  <section class="panel subpanel" id="panel-endo">
281
- <h2 class="panel-cabecera">
 
282
  Perfil Endocrino
283
  <input type="file" id="pdf-input-endo" class="pdf-input" accept=".pdf" hidden>
284
  <button class="btn-limpiar-panel" type="button" data-panel="endo" aria-label="Limpiar campos Perfil Endocrino" data-tooltip="Limpiar formulario">
@@ -291,7 +294,7 @@
291
  aria-expanded="true" aria-controls="cuerpo-endo" aria-label="Colapsar Perfil Endocrino" data-tooltip="Contraer / Expandir">
292
  <svg class="icono-colapsar" viewBox="0 -960 960 960" aria-hidden="true"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg><svg class="icono-expandir" viewBox="0 -960 960 960" aria-hidden="true"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
293
  </button>
294
- </h2>
295
  <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-endo">
296
  <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
297
  <span></span>
@@ -327,7 +330,8 @@
327
 
328
  <!-- BIOQUÍMICA -->
329
  <section class="panel subpanel" id="panel-bioquim">
330
- <h2 class="panel-cabecera">
 
331
  Bioquímica sanguínea
332
  <input type="file" id="pdf-input-bioquim" class="pdf-input" accept=".pdf" hidden>
333
  <button class="btn-limpiar-panel" type="button" data-panel="bioquim" aria-label="Limpiar campos Bioquímica" data-tooltip="Limpiar formulario">
@@ -336,7 +340,7 @@
336
  <button class="btn-importar-pdf" type="button" data-panel="bioquim" aria-label="Importar PDF Bioquímica" data-tooltip="Adjuntar PDF">
337
  <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>
338
  </button>
339
- </h2>
340
  <div class="subpanel-anim"><div class="panel-cuerpo" id="cuerpo-bioquim">
341
  <div class="cabecera-columnas" aria-hidden="true">
342
  <span></span>
@@ -502,7 +506,8 @@
502
 
503
  <!-- URIANÁLISIS -->
504
  <section class="panel subpanel" id="panel-uri">
505
- <h2 class="panel-cabecera">
 
506
  Urianálisis
507
  <input type="file" id="pdf-input-uri" class="pdf-input" accept=".pdf" hidden>
508
  <button class="btn-limpiar-panel" type="button" data-panel="uri" aria-label="Limpiar campos Urianálisis" data-tooltip="Limpiar formulario">
@@ -515,7 +520,7 @@
515
  aria-expanded="true" aria-controls="cuerpo-uri" aria-label="Colapsar Urianálisis" data-tooltip="Contraer / Expandir">
516
  <svg class="icono-colapsar" viewBox="0 -960 960 960" aria-hidden="true"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg><svg class="icono-expandir" viewBox="0 -960 960 960" aria-hidden="true"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
517
  </button>
518
- </h2>
519
  <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-uri">
520
  <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
521
  <span></span>
@@ -563,13 +568,14 @@
563
 
564
  <!-- FLUJO DE TRABAJO -->
565
  <section class="panel panel-flujo activo" id="panel-flujo">
566
- <h2 class="panel-cabecera">
 
567
  Flujo de trabajo
568
  <button class="btn-colapsar-flujo" id="btn-colapsar-flujo" type="button"
569
  aria-expanded="true" aria-controls="cuerpo-flujo" aria-label="Colapsar panel" data-tooltip="Contraer / Expandir">
570
  <svg class="icono-colapsar" viewBox="0 -960 960 960" aria-hidden="true"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg><svg class="icono-expandir" viewBox="0 -960 960 960" aria-hidden="true"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
571
  </button>
572
- </h2>
573
  <div class="panel-cuerpo cuerpo-flujo" id="cuerpo-flujo">
574
  <ol class="pasos-flujo">
575
  <li>
@@ -611,9 +617,8 @@
611
 
612
  <!-- IMÁGENES / CITOLOGÍA -->
613
  <div class="subpanel" id="subpanel-citologia">
614
- <h2 class="panel-cabecera">
615
- Citologías
616
- </h2>
617
  <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-citologia">
618
  <div class="zonas-imagen">
619
  <div class="zona-imagen" data-zona="0" data-tooltip="Adjuntar citología 1">
@@ -686,7 +691,8 @@
686
 
687
  <!-- RESULTADOS -->
688
  <section class="panel" id="panel-resultados">
689
- <h2 class="panel-cabecera">Interpretación</h2>
 
690
  <div class="panel-cuerpo">
691
 
692
  <div class="seccion-resultado seccion-patrones" id="seccion-patrones">
 
17
  <link rel="preload" href="assets/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
18
 
19
  <link rel="icon" href="assets/icons/favicon.ico">
20
+ <link rel="stylesheet" href="css/styles.css?v=4">
21
  </head>
22
  <body>
23
 
 
71
 
72
  <!-- DATOS DEL PACIENTE -->
73
  <section class="panel" id="panel-paciente">
74
+ <h2 class="panel-titulo">Datos del paciente</h2>
75
+ <div class="panel-cabecera">Datos del paciente</div>
76
  <div class="panel-cuerpo panel-cuerpo--paciente">
77
  <div class="fila-paciente">
78
  <label for="mob-pt-especie">Especie</label>
 
118
 
119
  <!-- HEMATOLOGÍA -->
120
  <section class="panel subpanel" id="panel-hema">
121
+ <h2 class="panel-titulo">Hematología</h2>
122
+ <div class="panel-cabecera">
123
  Hematología
124
  <input type="file" id="pdf-input-hema" class="pdf-input" accept=".pdf" hidden>
125
  <button class="btn-limpiar-panel" type="button" data-panel="hema" aria-label="Limpiar campos Hematología" data-tooltip="Limpiar formulario">
 
128
  <button class="btn-importar-pdf" type="button" data-panel="hema" aria-label="Importar PDF Hematología" data-tooltip="Adjuntar PDF">
129
  <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>
130
  </button>
131
+ </div>
132
  <div class="subpanel-anim"><div class="panel-cuerpo" id="cuerpo-hema">
133
  <div class="cabecera-columnas" aria-hidden="true">
134
  <span></span>
 
280
 
281
  <!-- PERFIL ENDOCRINO -->
282
  <section class="panel subpanel" id="panel-endo">
283
+ <h2 class="panel-titulo">Perfil Endocrino</h2>
284
+ <div class="panel-cabecera">
285
  Perfil Endocrino
286
  <input type="file" id="pdf-input-endo" class="pdf-input" accept=".pdf" hidden>
287
  <button class="btn-limpiar-panel" type="button" data-panel="endo" aria-label="Limpiar campos Perfil Endocrino" data-tooltip="Limpiar formulario">
 
294
  aria-expanded="true" aria-controls="cuerpo-endo" aria-label="Colapsar Perfil Endocrino" data-tooltip="Contraer / Expandir">
295
  <svg class="icono-colapsar" viewBox="0 -960 960 960" aria-hidden="true"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg><svg class="icono-expandir" viewBox="0 -960 960 960" aria-hidden="true"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
296
  </button>
297
+ </div>
298
  <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-endo">
299
  <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
300
  <span></span>
 
330
 
331
  <!-- BIOQUÍMICA -->
332
  <section class="panel subpanel" id="panel-bioquim">
333
+ <h2 class="panel-titulo">Bioquímica sanguínea</h2>
334
+ <div class="panel-cabecera">
335
  Bioquímica sanguínea
336
  <input type="file" id="pdf-input-bioquim" class="pdf-input" accept=".pdf" hidden>
337
  <button class="btn-limpiar-panel" type="button" data-panel="bioquim" aria-label="Limpiar campos Bioquímica" data-tooltip="Limpiar formulario">
 
340
  <button class="btn-importar-pdf" type="button" data-panel="bioquim" aria-label="Importar PDF Bioquímica" data-tooltip="Adjuntar PDF">
341
  <svg viewBox="0 -960 960 960" aria-hidden="true"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>
342
  </button>
343
+ </div>
344
  <div class="subpanel-anim"><div class="panel-cuerpo" id="cuerpo-bioquim">
345
  <div class="cabecera-columnas" aria-hidden="true">
346
  <span></span>
 
506
 
507
  <!-- URIANÁLISIS -->
508
  <section class="panel subpanel" id="panel-uri">
509
+ <h2 class="panel-titulo">Urianálisis</h2>
510
+ <div class="panel-cabecera">
511
  Urianálisis
512
  <input type="file" id="pdf-input-uri" class="pdf-input" accept=".pdf" hidden>
513
  <button class="btn-limpiar-panel" type="button" data-panel="uri" aria-label="Limpiar campos Urianálisis" data-tooltip="Limpiar formulario">
 
520
  aria-expanded="true" aria-controls="cuerpo-uri" aria-label="Colapsar Urianálisis" data-tooltip="Contraer / Expandir">
521
  <svg class="icono-colapsar" viewBox="0 -960 960 960" aria-hidden="true"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg><svg class="icono-expandir" viewBox="0 -960 960 960" aria-hidden="true"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
522
  </button>
523
+ </div>
524
  <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-uri">
525
  <div class="cabecera-columnas cabecera-columnas--mobile-only" aria-hidden="true">
526
  <span></span>
 
568
 
569
  <!-- FLUJO DE TRABAJO -->
570
  <section class="panel panel-flujo activo" id="panel-flujo">
571
+ <h2 class="panel-titulo">Flujo de trabajo</h2>
572
+ <div class="panel-cabecera">
573
  Flujo de trabajo
574
  <button class="btn-colapsar-flujo" id="btn-colapsar-flujo" type="button"
575
  aria-expanded="true" aria-controls="cuerpo-flujo" aria-label="Colapsar panel" data-tooltip="Contraer / Expandir">
576
  <svg class="icono-colapsar" viewBox="0 -960 960 960" aria-hidden="true"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg><svg class="icono-expandir" viewBox="0 -960 960 960" aria-hidden="true"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
577
  </button>
578
+ </div>
579
  <div class="panel-cuerpo cuerpo-flujo" id="cuerpo-flujo">
580
  <ol class="pasos-flujo">
581
  <li>
 
617
 
618
  <!-- IMÁGENES / CITOLOGÍA -->
619
  <div class="subpanel" id="subpanel-citologia">
620
+ <h2 class="panel-titulo">Citologías</h2>
621
+ <div class="panel-cabecera">Citologías</div>
 
622
  <div class="subpanel-anim"><div class="subpanel-cuerpo" id="cuerpo-citologia">
623
  <div class="zonas-imagen">
624
  <div class="zona-imagen" data-zona="0" data-tooltip="Adjuntar citología 1">
 
691
 
692
  <!-- RESULTADOS -->
693
  <section class="panel" id="panel-resultados">
694
+ <h2 class="panel-titulo">Interpretación</h2>
695
+ <div class="panel-cabecera">Interpretación</div>
696
  <div class="panel-cuerpo">
697
 
698
  <div class="seccion-resultado seccion-patrones" id="seccion-patrones">