diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cd8d2b8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1237 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Del Austral · Historial Clínico</title>
+
+<!-- PWA: hace que el sitio se pueda "instalar" como app -->
+<link rel="manifest" href="manifest.json">
+<meta name="theme-color" content="#3D6B63">
+
+<!-- Favicon e íconos -->
+<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32.png">
+<link rel="apple-touch-icon" href="assets/icons/icon-apple-touch.png">
+
+<!-- iOS no lee manifest.json para el modo "app instalada"; necesita estas etiquetas propias -->
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="Del Austral">
+
+<link rel="stylesheet" href="assets/css/estilos.css">
+</head>
+<body>
+
+<!-- Fondo decorativo de ondas -->
+<svg class="fondo-ondas" viewBox="0 0 1440 900" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M0,750 Q60,700 120,750 T240,750 T360,750 T480,750 T600,750 T720,750 T840,750 T960,750 T1080,750 T1200,750 T1320,750 T1440,750" stroke="#3D6B63" stroke-width="1.5" fill="none" opacity="0.06"/>
+  <path d="M0,800 Q90,650 180,800 T360,800 T540,800 T720,800 T900,800 T1080,800 T1260,800 T1440,800" stroke="#C9A84C" stroke-width="1.5" fill="none" opacity="0.06"/>
+  <path d="M0,60 Q40,20 80,60 T160,60 T240,60 T320,60 T400,60 T480,60 T560,60 T640,60 T720,60 T800,60 T880,60 T960,60 T1040,60 T1120,60 T1200,60 T1280,60 T1360,60 T1440,60" stroke="#3D6B63" stroke-width="1.5" fill="none" opacity="0.05"/>
+</svg>
+
+<!-- ============================================================
+     PANTALLA DE ACCESO
+     ============================================================ -->
+<div id="vista-acceso" class="pantalla-acceso">
+  <div class="tarjeta-acceso">
+    <div class="marca-acceso">
+      <svg class="icono-marca" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 24h4l3-12 4 24 4-30 4 24 4-18 3 12h6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <h1>Del Austral</h1>
+      <span class="subtitulo">Historial clínico digital</span>
+    </div>
+
+    <!-- PASO: crear clave de Desarrollador (solo la primera vez que se instala) -->
+    <div id="paso-crear-desarrollador" class="paso-login oculto">
+      <p class="instruccion-patron">Antes de empezar, creá la clave de Desarrollador. La vas a usar para configurar sedes y dar de alta a los profesionales.</p>
+      <div class="indicadores-pin" id="indicadores-pin-dev-crear">
+        <span class="punto-pin"></span><span class="punto-pin"></span><span class="punto-pin"></span><span class="punto-pin"></span>
+      </div>
+      <input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="4" autocomplete="off" class="input-pin-oculto" id="input-pin-dev-crear" aria-label="Clave de desarrollador">
+    </div>
+
+    <!-- PASO: elegir sede -->
+    <div id="paso-elegir-sede" class="paso-login oculto">
+      <p class="instruccion-patron">¿En qué sede estás?</p>
+      <div class="lista-opciones-login" id="lista-sedes-login"></div>
+      <button class="btn-texto" id="btn-soy-desarrollador">Soy el Desarrollador →</button>
+    </div>
+
+    <!-- PASO: elegir usuario dentro de la sede -->
+    <div id="paso-elegir-usuario" class="paso-login oculto">
+      <p class="instruccion-patron">¿Quién eres?</p>
+      <div class="lista-opciones-login" id="lista-usuarios-login"></div>
+      <button class="btn-texto" id="btn-volver-sede">← Cambiar de sede</button>
+    </div>
+
+    <!-- PASO: si es administrativa, elegir a qué profesional representa -->
+    <div id="paso-elegir-profesional-activo" class="paso-login oculto">
+      <p class="instruccion-patron">¿A nombre de qué profesional vas a trabajar?</p>
+      <div class="lista-opciones-login" id="lista-profesionales-login"></div>
+      <button class="btn-texto" id="btn-volver-usuario-desde-prof">← Volver</button>
+    </div>
+
+    <!-- PASO: ingresar PIN -->
+    <div id="paso-ingresar-pin" class="paso-login oculto">
+      <p class="instruccion-patron" id="texto-instruccion-pin">Ingresá tu PIN</p>
+      <div class="indicadores-pin" id="indicadores-pin">
+        <span class="punto-pin"></span><span class="punto-pin"></span><span class="punto-pin"></span><span class="punto-pin"></span>
+      </div>
+      <input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="4" autocomplete="off" class="input-pin-oculto" id="input-pin-oculto" aria-label="PIN de acceso">
+      <div class="acciones-patron">
+        <button class="btn-texto oculto" id="btn-reintentar-patron">Volver a intentar</button>
+        <button class="btn-texto" id="btn-volver-usuario">← Volver</button>
+      </div>
+    </div>
+
+    <!-- PASO: clave de Desarrollador (login normal, no creación) -->
+    <div id="paso-clave-desarrollador" class="paso-login oculto">
+      <p class="instruccion-patron">Ingresá la clave de Desarrollador</p>
+      <div class="indicadores-pin" id="indicadores-pin-dev">
+        <span class="punto-pin"></span><span class="punto-pin"></span><span class="punto-pin"></span><span class="punto-pin"></span>
+      </div>
+      <input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="4" autocomplete="off" class="input-pin-oculto" id="input-clave-dev" aria-label="Clave de desarrollador">
+      <div class="acciones-patron">
+        <button class="btn-texto" id="btn-volver-sede-desde-dev">← Volver</button>
+      </div>
+    </div>
+
+    <p class="instruccion-patron oculto" id="texto-instruccion">Cargando...</p>
+  </div>
+</div>
+
+<!-- ============================================================
+     PRIMERA CONFIGURACIÓN DEL DESARROLLADOR (sede + profesional)
+     ============================================================ -->
+<div id="vista-setup-inicial" class="pantalla-acceso oculto">
+  <div class="tarjeta-acceso" style="max-width: 480px;">
+    <div class="marca-acceso">
+      <svg class="icono-marca" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 24h4l3-12 4 24 4-30 4 24 4-18 3 12h6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <h1>¡Bienvenido, Desarrollador!</h1>
+      <span class="subtitulo">Antes de que el consultorio pueda usar el sistema, creá la primera sede y el primer profesional.</span>
+    </div>
+
+    <div class="campo" style="margin-bottom: 18px; text-align: left;">
+      <label>Nombre de la primera sede</label>
+      <input type="text" id="input-primera-sede" placeholder="Ej: Clínica del Valle">
+    </div>
+
+    <div class="campo" style="margin-bottom: 8px; text-align: left;">
+      <label>Nombre del primer profesional</label>
+      <input type="text" id="input-primer-profesional" placeholder="Ej: Dr. Arian Lorenz">
+    </div>
+    <div class="campo" style="margin-bottom: 18px; text-align: left;">
+      <label>PIN de acceso para este profesional (4 números)</label>
+      <input type="text" id="input-pin-primer-profesional" inputmode="numeric" pattern="[0-9]*" maxlength="4" class="input-pin-texto" placeholder="Ej: 1234">
+    </div>
+
+    <button class="btn btn-primario" id="btn-crear-setup-inicial" style="width:100%;">Crear sede y profesional</button>
+    <button class="btn-texto" id="btn-ir-panel-dev" style="margin-top:14px;">Saltar por ahora, ir directo al panel →</button>
+  </div>
+</div>
+
+<!-- ============================================================
+     CARTEL DE BIENVENIDA (tras iniciar sesión)
+     ============================================================ -->
+<div id="modal-bienvenida" class="overlay-modal oculto">
+  <div class="modal modal-bienvenida">
+    <svg class="icono-marca" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 24h4l3-12 4 24 4-30 4 24 4-18 3 12h6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <h3 id="texto-bienvenida">¡Bienvenido/a!</h3>
+    <p>Tu sistema de historiales clínicos está listo para usar.</p>
+    <div class="acciones-modal" style="justify-content:center;">
+      <button class="btn btn-primario" id="btn-cerrar-bienvenida">Empezar</button>
+    </div>
+  </div>
+</div>
+
+<!-- ============================================================
+     APP PRINCIPAL
+     ============================================================ -->
+<div id="vista-app" class="app oculto">
+
+  <div class="topbar">
+    <div class="marca">
+      <svg class="icono-marca" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 24h4l3-12 4 24 4-30 4 24 4-18 3 12h6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <h2>Del Austral</h2>
+    </div>
+    <div class="topbar-acciones">
+      <button class="btn btn-secundario btn-chico" id="btn-inicio" title="Ir al inicio">Inicio</button>
+      <button class="btn btn-secundario btn-chico" id="btn-cerrar-sesion">Cerrar sesión</button>
+    </div>
+  </div>
+
+  <div class="contenido" id="contenido"></div>
+</div>
+
+<!-- Contenedor de toasts -->
+<div class="toast-contenedor" id="toast-contenedor"></div>
+
+<!-- ============================================================
+     PLANTILLAS (se clonan por JS, no se muestran directamente)
+     ============================================================ -->
+<template id="tpl-modal-licencia">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 400px;">
+      <h3>Gestionar licencia</h3>
+      <p id="texto-prof-licencia"></p>
+      <div class="campo" style="margin-bottom: 14px;">
+        <label>Estado</label>
+        <select id="select-estado-licencia">
+          <option value="activo">Activo</option>
+          <option value="pausado">Pausado (motivos varios)</option>
+          <option value="prohibido">Prohibido (falta de pago u otros)</option>
+        </select>
+      </div>
+      <div id="campo-dias-licencia" class="campo" style="margin-bottom: 20px;">
+        <label>Duración de la licencia</label>
+        <select id="select-dias-licencia">
+          <option value="">Indeterminada (sin vencimiento)</option>
+          <option value="7">7 días</option>
+          <option value="15">15 días</option>
+          <option value="30">30 días</option>
+          <option value="60">60 días</option>
+          <option value="90">90 días</option>
+          <option value="120">120 días</option>
+        </select>
+        <span class="ayuda">La duración solo aplica si el estado es "Activo".</span>
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-licencia">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-licencia">Guardar</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-menu">
+  <div class="encabezado-menu">
+    <span class="eyebrow">Panel principal</span>
+    <h1 id="titulo-menu">¿Qué necesitás hacer?</h1>
+    <p id="desc-menu">Elegí una opción para gestionar los legajos de tus pacientes.</p>
+  </div>
+
+  <div id="franja-resumen-hoy" class="franja-resumen-hoy oculto" data-rol="profesional"></div>
+  <button id="franja-avisos-turnos" class="franja-avisos-turnos oculto" data-rol="profesional"></button>
+
+  <div class="panel-resumen-menu" id="panel-resumen-menu">
+    <div class="resumen-columna">
+      <div class="resumen-titulo">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+        Próximas citas
+      </div>
+      <div id="lista-resumen-citas" class="lista-resumen">
+        <div class="cargando-pagina chico"><span class="spinner"></span></div>
+      </div>
+    </div>
+    <div class="resumen-columna" data-rol="profesional">
+      <div class="resumen-titulo alerta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
+        Pacientes sin sesiones recientes
+      </div>
+      <div id="lista-resumen-inactivos" class="lista-resumen">
+        <div class="cargando-pagina chico"><span class="spinner"></span></div>
+      </div>
+    </div>
+    <div class="resumen-columna">
+      <div class="resumen-titulo cumple">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M8 6c0 1-1 2-2 2s-2-1-2-2 1-2 1-3M18 6c0 1-1 2-2 2s-2-1-2-2 1-2 1-3"/><path d="M4 13h16v7a1 1 0 01-1 1H5a1 1 0 01-1-1v-7zM4 13c0-2 2-3 2-3M12 13c0-2 2-3 2-3M20 13c0-2-2-3-2-3"/></svg>
+        Próximos cumpleaños
+      </div>
+      <div id="lista-resumen-cumple" class="lista-resumen">
+        <div class="cargando-pagina chico"><span class="spinner"></span></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="grilla-menu">
+    <button class="tarjeta-menu crear" data-vista="crear">
+      <div class="icono-tarjeta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+      </div>
+      <h3>Crear legajo</h3>
+      <p id="desc-crear-legajo">Registrá un nuevo paciente con sus datos personales, obra social y motivo de consulta.</p>
+      <span class="ir">Crear nuevo →</span>
+    </button>
+    <button class="tarjeta-menu acceder" data-vista="acceder">
+      <div class="icono-tarjeta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+      </div>
+      <h3>Acceder a legajos</h3>
+      <p id="desc-acceder-legajos">Buscá por DNI, nombre, fecha de atención u obra social para ver el historial completo.</p>
+      <span class="ir">Buscar →</span>
+    </button>
+    <button class="tarjeta-menu agenda" data-vista="agenda">
+      <div class="icono-tarjeta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+      </div>
+      <h3>Agenda</h3>
+      <p>Mirá el calendario completo de citas, agendá turnos nuevos y marcá asistencias.</p>
+      <span class="ir">Ver calendario →</span>
+    </button>
+    <button class="tarjeta-menu borrar" data-vista="borrar" data-rol="profesional">
+      <div class="icono-tarjeta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6h16z"/></svg>
+      </div>
+      <h3>Eliminar legajos</h3>
+      <p>Quitá un legajo del sistema activo. Queda resguardado en la base histórica.</p>
+      <span class="ir">Gestionar →</span>
+    </button>
+    <button class="tarjeta-menu dashboard" data-vista="dashboard" data-rol="profesional">
+      <div class="icono-tarjeta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18M7 14l4-4 4 4 4-6"/></svg>
+      </div>
+      <h3>Estadísticas</h3>
+      <p>Pacientes activos, sesiones del mes y citas por estado, todo de un vistazo.</p>
+      <span class="ir">Ver panel →</span>
+    </button>
+    <button class="tarjeta-menu" data-vista="mi-legajo" data-rol="profesional">
+      <div class="icono-tarjeta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+      </div>
+      <h3>Mi legajo</h3>
+      <p>Tus datos profesionales registrados en el sistema. Solo lectura.</p>
+      <span class="ir">Ver →</span>
+    </button>
+  </div>
+</template>
+
+<template id="tpl-crear">
+  <div class="encabezado-seccion">
+    <div>
+      <button class="volver" data-volver>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Volver
+      </button>
+      <h2 id="titulo-form-crear">Crear legajo nuevo</h2>
+      <p class="desc" id="desc-form-crear">Completá los datos del paciente. Podés agregar sesiones más adelante desde su ficha.</p>
+    </div>
+  </div>
+
+  <button type="button" class="franja-aviso-legal" id="btn-abrir-aviso-legal">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
+    <span>Aviso de protección de datos personales (Ley 25.326)</span>
+    <span class="franja-aviso-legal-ver">Ver →</span>
+  </button>
+
+  <form id="form-crear">
+    <input type="hidden" name="id" id="input-id-legajo" value="">
+    <div class="panel">
+      <div class="panel-titulo"><span class="num">1</span> Datos personales</div>
+      <p class="panel-subtitulo">Información básica de identificación del paciente.</p>
+      <div class="grilla-campos">
+        <div class="campo">
+          <label>Nombre</label>
+          <input type="text" name="nombre" required placeholder="Ej: María">
+        </div>
+        <div class="campo">
+          <label>Apellido</label>
+          <input type="text" name="apellido" required placeholder="Ej: González">
+        </div>
+        <div class="campo">
+          <label>DNI</label>
+          <input type="text" name="dni" required placeholder="Ej: 34567890" inputmode="numeric">
+        </div>
+        <div class="campo">
+          <label>Sexo</label>
+          <select name="sexo" required>
+            <option value="" disabled selected>Seleccionar…</option>
+            <option value="Femenino">Femenino</option>
+            <option value="Masculino">Masculino</option>
+            <option value="Otro">Otro</option>
+          </select>
+        </div>
+        <div class="campo">
+          <label>Fecha de nacimiento</label>
+          <input type="date" name="fecha_nacimiento" required id="input-fecha-nac">
+        </div>
+        <div class="campo">
+          <label>Edad <span class="opcional">(calculada automáticamente)</span></label>
+          <input type="text" id="input-edad-calculada" disabled placeholder="—">
+        </div>
+        <div class="campo">
+          <label>Teléfono <span class="opcional">(opcional)</span></label>
+          <input type="text" name="telefono" placeholder="Ej: 297 154-1234">
+        </div>
+        <div class="campo">
+          <label>Email <span class="opcional">(opcional)</span></label>
+          <input type="email" name="email" placeholder="Ej: maria@correo.com">
+        </div>
+        <div class="campo ancho-completo">
+          <label>Dirección <span class="opcional">(opcional)</span></label>
+          <input type="text" name="direccion" placeholder="Ej: Av. Rivadavia 1234, Comodoro Rivadavia">
+        </div>
+      </div>
+    </div>
+
+    <div class="panel">
+      <div class="panel-titulo"><span class="num">2</span> Cobertura de salud</div>
+      <p class="panel-subtitulo">Si no figura la obra social del paciente, podés agregarla al instante.</p>
+      <div class="grilla-campos">
+        <div class="campo">
+          <label>Obra social</label>
+          <div class="fila-obra-social">
+            <select name="obra_social_id" id="select-obra-social"></select>
+            <button type="button" class="btn-agregar-obra" id="btn-agregar-obra" title="Agregar nueva obra social">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+            </button>
+          </div>
+        </div>
+        <div class="campo">
+          <label>N° de afiliado <span class="opcional">(opcional)</span></label>
+          <input type="text" name="numero_afiliado" placeholder="Ej: 0123456789">
+        </div>
+      </div>
+    </div>
+
+    <div class="panel" id="panel-cuadro-clinico">
+      <div class="panel-titulo"><span class="num">3</span> Motivo y cuadro clínico</div>
+      <p class="panel-subtitulo">Qué trae al paciente a la consulta y lo que observaste inicialmente.</p>
+      <div class="grilla-campos">
+        <div class="campo ancho-completo">
+          <label>Motivo de consulta</label>
+          <textarea name="motivo_consulta" placeholder="Ej: Derivado por pediatra por retraso en adquisición del lenguaje."></textarea>
+        </div>
+        <div class="campo">
+          <label>Patología <span class="opcional">(opcional)</span></label>
+          <input type="text" name="patologia" placeholder="Ej: TEL, disfonía, afasia...">
+        </div>
+        <div class="campo">
+          <label>Síntomas <span class="opcional">(opcional)</span></label>
+          <input type="text" name="sintomas" placeholder="Ej: Dificultad articulatoria, voz ronca...">
+        </div>
+        <div class="campo ancho-completo">
+          <label>Observaciones generales <span class="opcional">(opcional)</span></label>
+          <textarea name="observaciones_generales" placeholder="Antecedentes, contexto familiar, otras notas relevantes..."></textarea>
+        </div>
+      </div>
+    </div>
+
+    <div class="panel" id="panel-sesiones-iniciales">
+      <div class="panel-titulo"><span class="num">4</span> Sesiones / días de atención <span class="opcional">(opcional)</span></div>
+      <p class="panel-subtitulo">Agregá los días que atendiste al paciente y qué se trabajó en cada sesión. Podés seguir sumando sesiones después desde su ficha.</p>
+      <div class="lista-sesiones-form" id="lista-sesiones-form"></div>
+      <button type="button" class="btn-agregar-dia" id="btn-agregar-dia">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+        Agregar día de atención
+      </button>
+    </div>
+
+    <div class="barra-acciones-form">
+      <button type="button" class="btn btn-secundario" data-volver>Cancelar</button>
+      <button type="submit" class="btn btn-primario" id="btn-guardar-legajo">Guardar legajo</button>
+    </div>
+  </form>
+</template>
+
+<template id="tpl-sesion-form-item">
+  <div class="sesion-form-item">
+    <button type="button" class="quitar-sesion" title="Quitar este día">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+    </button>
+    <div class="grilla-campos">
+      <div class="campo">
+        <label>Fecha de atención</label>
+        <input type="date" class="campo-fecha-sesion" required>
+      </div>
+      <div class="campo">
+        <label>Próxima cita <span class="opcional">(opcional)</span></label>
+        <input type="date" class="campo-proxima-cita">
+      </div>
+      <div class="campo ancho-completo">
+        <label>¿Qué se trabajó en la sesión?</label>
+        <textarea class="campo-descripcion-sesion" required placeholder="Ej: Ejercicios de respiración y praxias linguales. Buena respuesta a estímulos visuales."></textarea>
+      </div>
+      <div class="campo ancho-completo">
+        <label>Evolución / notas <span class="opcional">(opcional)</span></label>
+        <textarea class="campo-evolucion-sesion" placeholder="Avances, dificultades, indicaciones para la familia..."></textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-acceder">
+  <div class="encabezado-seccion">
+    <div>
+      <button class="volver" data-volver>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Volver al panel
+      </button>
+      <h2>Acceder a legajos</h2>
+      <p class="desc">Buscá un paciente por DNI, nombre, fecha de atención u obra social.</p>
+    </div>
+  </div>
+
+  <div class="tabs-busqueda">
+    <button class="tab-busqueda activo" data-tipo="dni">Por DNI</button>
+    <button class="tab-busqueda" data-tipo="nombre">Por nombre</button>
+    <button class="tab-busqueda" data-tipo="fecha">Por fecha de atención</button>
+    <button class="tab-busqueda" data-tipo="obra_social">Por obra social</button>
+    <button class="tab-busqueda" data-tipo="sede">Por sede</button>
+  </div>
+
+  <div class="fila-buscador" id="fila-buscador">
+    <!-- Se genera dinámicamente según la pestaña activa -->
+  </div>
+
+  <div id="resultados-busqueda"></div>
+</template>
+
+<template id="tpl-borrar">
+  <div class="encabezado-seccion">
+    <div>
+      <button class="volver" data-volver>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Volver al panel
+      </button>
+      <h2>Eliminar legajos</h2>
+      <p class="desc">Buscá el legajo que querés quitar del sistema activo. Quedará resguardado en la base histórica, accesible desde "Ver base histórica".</p>
+    </div>
+    <button class="btn btn-secundario btn-chico" id="btn-ver-papelera">Ver base histórica</button>
+  </div>
+
+  <div class="tabs-busqueda">
+    <button class="tab-busqueda activo" data-tipo="dni">Por DNI</button>
+    <button class="tab-busqueda" data-tipo="nombre">Por nombre</button>
+    <button class="tab-busqueda" data-tipo="fecha">Por fecha de atención</button>
+    <button class="tab-busqueda" data-tipo="obra_social">Por obra social</button>
+    <button class="tab-busqueda" data-tipo="sede">Por sede</button>
+  </div>
+
+  <div class="fila-buscador" id="fila-buscador"></div>
+
+  <div id="resultados-busqueda"></div>
+</template>
+
+<template id="tpl-agenda">
+  <div class="encabezado-seccion">
+    <div>
+      <button class="volver" data-volver>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Volver al panel
+      </button>
+      <h2>Agenda</h2>
+      <p class="desc">Calendario de citas. Hacé clic en un día para ver o agendar turnos.</p>
+    </div>
+    <button class="btn btn-primario btn-chico" id="btn-nueva-cita">+ Agendar cita</button>
+  </div>
+
+  <div class="panel">
+    <div class="calendario-nav">
+      <button class="btn-icono" id="btn-mes-anterior" title="Mes anterior">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+      </button>
+      <div class="calendario-mes-titulo" id="calendario-mes-titulo"></div>
+      <button class="btn-icono" id="btn-mes-siguiente" title="Mes siguiente">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+      </button>
+    </div>
+    <div class="calendario-dias-semana">
+      <span>Dom</span><span>Lun</span><span>Mar</span><span>Mié</span><span>Jue</span><span>Vie</span><span>Sáb</span>
+    </div>
+    <div class="calendario-grilla" id="calendario-grilla"></div>
+  </div>
+
+  <div class="panel" id="panel-citas-dia">
+    <div class="panel-titulo" id="titulo-citas-dia">Citas</div>
+    <div id="lista-citas-dia" class="lista-resultados"></div>
+  </div>
+</template>
+
+<template id="tpl-modal-nueva-cita">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 480px;">
+      <h3>Agendar cita</h3>
+      <p>Buscá al paciente por DNI o nombre y elegí fecha y hora.</p>
+      <div class="campo" style="margin-bottom: 14px;">
+        <label>Paciente</label>
+        <input type="text" id="input-buscar-paciente-cita" placeholder="Escribí DNI, nombre o apellido...">
+        <div id="resultados-buscar-paciente-cita" class="resultados-autocompletar"></div>
+        <input type="hidden" id="input-paciente-id-cita">
+      </div>
+      <div class="grilla-campos" style="margin-bottom: 20px;">
+        <div class="campo">
+          <label>Fecha</label>
+          <input type="date" id="input-fecha-cita">
+        </div>
+        <div class="campo">
+          <label>Hora <span class="opcional">(opcional)</span></label>
+          <input type="time" id="input-hora-cita">
+        </div>
+        <div class="campo ancho-completo">
+          <label>Motivo <span class="opcional">(opcional)</span></label>
+          <input type="text" id="input-motivo-cita" placeholder="Ej: Control mensual">
+        </div>
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-nueva-cita">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-nueva-cita">Agendar</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-avisos-turnos">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 480px; max-height: 80vh; overflow-y: auto;">
+      <h3>Novedades de turnos</h3>
+      <p>Esto cambió desde la última vez que revisaste la agenda.</p>
+      <div id="lista-avisos-turnos" class="lista-resumen" style="margin-bottom: 20px;"></div>
+      <div class="acciones-modal">
+        <button class="btn btn-primario" id="btn-marcar-avisos-vistos" style="width:100%;">Entendido, marcar como visto</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-migrar-sede">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 420px;">
+      <h3>Cambiar de sede</h3>
+      <p id="texto-paciente-migrar-sede"></p>
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>Nueva sede</label>
+        <select id="select-nueva-sede"></select>
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-migrar-sede">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-migrar-sede">Migrar</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-mi-legajo">
+  <div class="encabezado-seccion">
+    <div>
+      <button class="volver" data-volver>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Volver al panel
+      </button>
+      <h2>Mi legajo</h2>
+      <p class="desc">Tus datos registrados en el sistema. Si necesitás corregir algo, comunicarte con el administrador.</p>
+    </div>
+  </div>
+  <div id="contenido-mi-legajo">
+    <div class="cargando-pagina"><span class="spinner"></span></div>
+  </div>
+</template>
+
+<template id="tpl-dashboard">
+  <div class="encabezado-seccion">
+    <div>
+      <button class="volver" data-volver>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Volver al panel
+      </button>
+      <h2>Estadísticas</h2>
+      <p class="desc">Un vistazo rápido al estado general del consultorio.</p>
+    </div>
+    <button class="btn btn-secundario btn-chico" id="btn-exportar-todo">Descargar backup de todos mis legajos</button>
+  </div>
+
+  <div id="contenido-dashboard">
+    <div class="cargando-pagina"><span class="spinner"></span> Calculando estadísticas...</div>
+  </div>
+</template>
+
+<template id="tpl-tarjeta-stat">
+  <div class="tarjeta-stat">
+    <div class="tarjeta-stat-valor"></div>
+    <div class="tarjeta-stat-etiqueta"></div>
+    <div class="tarjeta-stat-detalle"></div>
+  </div>
+</template>
+
+<template id="tpl-configuracion">
+  <div class="encabezado-seccion">
+    <div>
+      <button class="volver" data-volver>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        Volver al panel
+      </button>
+      <h2>Sedes, usuarios y registro</h2>
+      <p class="desc">Gestioná las sedes del consultorio, quién puede entrar al sistema y revisá el historial de cambios.</p>
+    </div>
+  </div>
+
+  <div class="tabs-busqueda">
+    <button class="tab-busqueda activo" data-tab-config="sedes">Sedes</button>
+    <button class="tab-busqueda" data-tab-config="usuarios">Usuarios</button>
+    <button class="tab-busqueda" data-tab-config="historial">Historial de cambios</button>
+    <button class="tab-busqueda" data-tab-config="version">Versión del sistema</button>
+    <button class="tab-busqueda" data-tab-config="reportes">Reportes por sede</button>
+    <button class="tab-busqueda" data-tab-config="papelera">Papelera</button>
+    <button class="tab-busqueda" data-tab-config="huerfanos">Legajos huérfanos</button>
+  </div>
+
+  <div id="panel-config-sedes">
+    <div class="panel">
+      <div class="encabezado-panel-accion">
+        <div>
+          <div class="panel-titulo">Sedes del consultorio</div>
+          <p class="panel-subtitulo">Cada sede agrupa profesionales y administrativas que atienden ahí.</p>
+        </div>
+        <button class="btn btn-primario btn-chico" id="btn-agregar-sede">+ Agregar sede</button>
+      </div>
+      <div id="lista-sedes-config" class="lista-resultados"></div>
+    </div>
+  </div>
+
+  <div id="panel-config-usuarios" class="oculto">
+    <div class="panel">
+      <div class="encabezado-panel-accion">
+        <div>
+          <div class="panel-titulo">Personas con acceso</div>
+          <p class="panel-subtitulo">Cada una entra con su propio PIN. La administrativa no ve contenido clínico.</p>
+        </div>
+        <button class="btn btn-primario btn-chico" id="btn-agregar-usuario">+ Agregar persona</button>
+      </div>
+      <div id="lista-usuarios" class="lista-resultados"></div>
+    </div>
+  </div>
+
+  <div id="panel-config-historial" class="oculto">
+    <div class="panel">
+      <div class="panel-titulo">Historial de cambios</div>
+      <p class="panel-subtitulo">Registro de qué se creó, editó o eliminó, y quién lo hizo.</p>
+      <div id="lista-historial" class="lista-historial"></div>
+      <div class="paginado-historial" id="paginado-historial"></div>
+    </div>
+  </div>
+
+  <div id="panel-config-version" class="oculto">
+    <div class="panel">
+      <div class="encabezado-panel-accion">
+        <div>
+          <div class="panel-titulo">Versión del sistema</div>
+          <p class="panel-subtitulo">Compara los archivos del servidor contra la última actualización entregada, para detectar si algo quedó con una versión vieja sin actualizar.</p>
+        </div>
+        <button class="btn btn-secundario btn-chico" id="btn-revisar-version">Revisar ahora</button>
+      </div>
+      <div id="resumen-version" class="resumen-version"></div>
+      <div id="lista-archivos-version" class="lista-archivos-version"></div>
+    </div>
+  </div>
+
+  <div id="panel-config-reportes" class="oculto">
+    <div class="panel">
+      <div class="panel-titulo">Reportes por sede</div>
+      <p class="panel-subtitulo">Resumen de cada sede activa: cuántos profesionales atienden ahí, pacientes totales, y la actividad de este mes.</p>
+      <div id="lista-reportes-sede" class="lista-reportes-sede"></div>
+    </div>
+  </div>
+
+  <div id="panel-config-papelera" class="oculto">
+    <div class="panel">
+      <div class="panel-titulo">Papelera de legajos eliminados</div>
+      <p class="panel-subtitulo">Elegí una sede y un profesional para ver los legajos que eliminó, y recuperarlos asignándolos a otro profesional de esa misma sede.</p>
+      <div class="fila-selectores-papelera">
+        <div class="campo">
+          <label>Sede</label>
+          <select id="select-sede-papelera-dev"><option value="">Elegí una sede…</option></select>
+        </div>
+        <div class="campo">
+          <label>Profesional (de quién ver la papelera)</label>
+          <select id="select-profesional-papelera-dev" disabled><option value="">Elegí primero una sede…</option></select>
+        </div>
+      </div>
+      <div id="lista-papelera-dev" class="lista-resultados"></div>
+    </div>
+  </div>
+
+  <div id="panel-config-huerfanos" class="oculto">
+    <div class="panel">
+      <div class="panel-titulo">Legajos de profesionales sin acceso</div>
+      <p class="panel-subtitulo">Estos legajos siguen activos (no fueron eliminados), pero su profesional ya no tiene acceso al sistema. Elegí uno para ver sus pacientes y transferirlos a otro profesional de la misma sede.</p>
+      <div class="campo" style="margin-bottom: 20px; max-width: 420px;">
+        <label>Profesional desactivado</label>
+        <select id="select-profesional-huerfano"><option value="">Elegí un profesional…</option></select>
+      </div>
+      <div id="lista-huerfanos-dev" class="lista-resultados"></div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-recuperar-legajo">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 440px;">
+      <h3>Recuperar legajo</h3>
+      <p id="texto-paciente-recuperar"></p>
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>Asignar a qué profesional</label>
+        <select id="select-nuevo-profesional-recuperar"></select>
+        <span class="ayuda">Solo se muestran profesionales que atienden en la misma sede donde estaba este legajo.</span>
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-recuperar-legajo">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-recuperar-legajo">Recuperar legajo</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-transferir-huerfano">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 440px;">
+      <h3>Transferir legajo</h3>
+      <p id="texto-paciente-transferir"></p>
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>Asignar a qué profesional</label>
+        <select id="select-nuevo-profesional-transferir"></select>
+        <span class="ayuda">Solo se muestran profesionales que atienden en la misma sede donde está este paciente.</span>
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-transferir-huerfano">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-transferir-huerfano">Transferir legajo</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-nueva-sede">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 420px;">
+      <h3>Agregar sede</h3>
+      <p>Es el lugar físico donde atiende uno o más profesionales.</p>
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>Nombre de la sede</label>
+        <input type="text" id="input-nombre-nueva-sede" placeholder="Ej: Clínica del Valle">
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-nueva-sede">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-nueva-sede">Crear sede</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-nuevo-profesional">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 560px; max-height: 90vh; overflow-y: auto;">
+      <h3>Nuevo profesional</h3>
+      <p>Completá el legajo del profesional. Va a poder entrar al sistema con su PIN.</p>
+
+      <div class="grilla-campos" style="margin-bottom: 4px;">
+        <div class="campo">
+          <label>Título</label>
+          <select id="input-titulo-prof">
+            <option value="Dr.">Dr.</option>
+            <option value="Dra.">Dra.</option>
+            <option value="Lic.">Lic.</option>
+            <option value="Tec.">Tec.</option>
+            <option value="Mg.">Mg.</option>
+            <option value="Prof.">Prof.</option>
+            <option value="Otro">Otro</option>
+          </select>
+        </div>
+        <div class="campo">
+          <label>Nombre</label>
+          <input type="text" id="input-nombre-prof" placeholder="Ej: Arian">
+        </div>
+        <div class="campo ancho-completo">
+          <label>Apellido</label>
+          <input type="text" id="input-apellido-prof" placeholder="Ej: Lorenz">
+        </div>
+        <div class="campo">
+          <label>DNI</label>
+          <input type="text" id="input-dni-prof" inputmode="numeric" placeholder="Ej: 32456789">
+        </div>
+        <div class="campo">
+          <label>Fecha de nacimiento</label>
+          <input type="date" id="input-fechanac-prof">
+        </div>
+        <div class="campo ancho-completo">
+          <label>Lugar de nacimiento</label>
+          <input type="text" id="input-lugarnac-prof" placeholder="Ej: Córdoba, Argentina">
+        </div>
+        <div class="campo ancho-completo">
+          <label>Especialidad</label>
+          <input type="text" id="input-especialidad-prof" placeholder="Ej: Fonoaudiología, Traumatología…">
+        </div>
+        <div class="campo">
+          <label>Correo electrónico</label>
+          <input type="email" id="input-email-prof" placeholder="Ej: arian@clinica.com">
+        </div>
+        <div class="campo">
+          <label>Número de celular</label>
+          <input type="text" id="input-tel-prof" inputmode="tel" placeholder="Ej: +54 9 297 123 4567">
+        </div>
+      </div>
+
+      <div class="campo" style="margin-bottom: 14px;">
+        <label>Sede(s) donde atiende</label>
+        <div id="lista-checkboxes-sedes-prof" class="lista-checkboxes-sedes"></div>
+      </div>
+
+      <div class="campo" style="margin-bottom: 14px;">
+        <label>PIN de acceso (4 números)</label>
+        <input type="text" id="input-pin-prof" inputmode="numeric" pattern="[0-9]*" maxlength="4" placeholder="Ej: 4821" class="input-pin-texto">
+      </div>
+
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>Duración de la licencia</label>
+        <select id="input-licencia-dias-prof">
+          <option value="">Indeterminada (sin vencimiento)</option>
+          <option value="7">7 días</option>
+          <option value="15">15 días</option>
+          <option value="30">30 días</option>
+          <option value="60">60 días</option>
+          <option value="90">90 días</option>
+          <option value="120">120 días</option>
+        </select>
+        <span class="ayuda">Si se vence, el profesional queda suspendido automáticamente y no puede entrar hasta que renueves la licencia.</span>
+      </div>
+
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-nuevo-profesional">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-nuevo-profesional">Crear legajo</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-nueva-administrativa">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 420px;">
+      <h3>Nueva administrativa</h3>
+      <p>Va a poder entrar al sistema con su propio PIN de 4 números, para gestionar la agenda y datos de contacto.</p>
+      <div class="campo" style="margin-bottom: 14px;">
+        <label>Nombre completo</label>
+        <input type="text" id="input-nombre-nueva-admin" placeholder="Ej: Florencia Suárez">
+      </div>
+      <div class="campo" style="margin-bottom: 14px;">
+        <label>Sede(s) donde trabaja</label>
+        <div id="lista-checkboxes-sedes-admin" class="lista-checkboxes-sedes"></div>
+      </div>
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>PIN de acceso (4 números)</label>
+        <input type="text" id="input-pin-nueva-admin" inputmode="numeric" pattern="[0-9]*" maxlength="4" placeholder="Ej: 4821" class="input-pin-texto">
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-nueva-admin">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-nueva-admin">Crear acceso</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-gestionar-sedes-usuario">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 460px;">
+      <h3>Gestionar sedes</h3>
+      <p id="texto-nombre-usuario-gestionar-sedes"></p>
+      <div class="campo" style="margin-bottom: 8px;">
+        <label>Sede(s) donde atiende</label>
+        <div id="lista-checkboxes-sedes-editar" class="lista-checkboxes-sedes"></div>
+      </div>
+      <div id="aviso-borrado-sedes" class="aviso-doble-confirmacion oculto" style="margin-top: 14px;"></div>
+      <div id="bloque-confirmar-borrado-sedes" class="oculto" style="margin-top: 14px;">
+        <p class="aviso-doble-confirmacion">Para confirmar este cambio, escribí <strong>ELIMINAR</strong> en el campo de abajo.</p>
+        <input type="text" id="input-confirmar-borrado-sedes" class="input-confirmar-texto" placeholder="Escribí ELIMINAR" autocomplete="off">
+      </div>
+      <div class="acciones-modal" style="margin-top: 20px;">
+        <button class="btn btn-secundario" id="btn-cancelar-gestionar-sedes">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-gestionar-sedes">Guardar cambios</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-tarjeta-paciente">
+  <div class="tarjeta-paciente" data-id="">
+    <div class="info-principal">
+      <div class="avatar-iniciales"></div>
+      <div>
+        <div class="nombre"></div>
+        <div class="meta"></div>
+      </div>
+    </div>
+    <div class="acciones-tarjeta"></div>
+  </div>
+</template>
+
+<template id="tpl-detalle-paciente">
+  <div class="encabezado-seccion">
+    <button class="volver" data-volver-busqueda>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+      Volver a resultados
+    </button>
+  </div>
+
+  <div class="panel">
+    <div class="ficha-cabecera">
+      <div class="ficha-identidad">
+        <div class="avatar-grande" id="detalle-avatar"></div>
+        <div>
+          <h2 id="detalle-nombre"></h2>
+          <div class="meta-linea" id="detalle-meta"></div>
+        </div>
+      </div>
+      <div style="display:flex; gap:10px; flex-wrap: wrap;">
+        <button class="btn btn-secundario btn-chico" id="btn-migrar-sede">Cambiar de sede</button>
+        <button class="btn btn-secundario btn-chico" id="btn-exportar-pdf">Exportar a PDF</button>
+        <button class="btn btn-secundario btn-chico" id="btn-editar-legajo">Editar datos</button>
+      </div>
+    </div>
+
+    <div id="aviso-legajo-recuperado" class="aviso-legajo-recuperado oculto"></div>
+
+    <div class="grilla-datos">
+      <div class="dato-box"><div class="etiqueta-dato">DNI</div><div class="valor-dato" id="dato-dni"></div></div>
+      <div class="dato-box"><div class="etiqueta-dato">Edad</div><div class="valor-dato" id="dato-edad"></div></div>
+      <div class="dato-box"><div class="etiqueta-dato">Sexo</div><div class="valor-dato" id="dato-sexo"></div></div>
+      <div class="dato-box"><div class="etiqueta-dato">Obra social</div><div class="valor-dato" id="dato-obra"></div></div>
+      <div class="dato-box"><div class="etiqueta-dato">Sede</div><div class="valor-dato" id="dato-sede"></div></div>
+    </div>
+
+    <div class="bloque-texto">
+      <h4>Motivo de consulta</h4>
+      <p id="dato-motivo"></p>
+    </div>
+    <div class="bloque-texto">
+      <h4>Patología</h4>
+      <p id="dato-patologia"></p>
+    </div>
+    <div class="bloque-texto">
+      <h4>Síntomas</h4>
+      <p id="dato-sintomas"></p>
+    </div>
+    <div class="bloque-texto">
+      <h4>Observaciones generales</h4>
+      <p id="dato-observaciones"></p>
+    </div>
+  </div>
+
+  <div class="panel">
+    <div class="encabezado-panel-accion">
+      <div>
+        <div class="panel-titulo">Próximas citas</div>
+        <p class="panel-subtitulo">Turnos agendados para este paciente.</p>
+      </div>
+      <button class="btn btn-secundario btn-chico" id="btn-agendar-cita-paciente">+ Agendar cita</button>
+    </div>
+    <div id="lista-citas-paciente" class="lista-resultados"></div>
+  </div>
+
+  <div class="panel">
+    <div class="panel-titulo">Historial de sesiones</div>
+    <p class="panel-subtitulo">Registro cronológico de cada día de atención.</p>
+    <div class="linea-tiempo" id="linea-tiempo"></div>
+    <button class="btn btn-secundario btn-chico" id="btn-nueva-sesion" style="margin-top:18px;">+ Agregar nueva sesión</button>
+  </div>
+
+  <div class="panel">
+    <div class="encabezado-panel-accion">
+      <div>
+        <div class="panel-titulo">Archivos adjuntos</div>
+        <p class="panel-subtitulo">Estudios, informes o imágenes relacionadas con este paciente (PDF o imagen, máx. 15 MB).</p>
+      </div>
+      <label class="btn btn-secundario btn-chico" for="input-subir-adjunto" style="cursor:pointer;">+ Subir archivo</label>
+      <input type="file" id="input-subir-adjunto" accept=".pdf,.jpg,.jpeg,.png,.webp" class="oculto">
+    </div>
+    <div id="lista-adjuntos" class="lista-adjuntos"></div>
+  </div>
+</template>
+
+<template id="tpl-modal-aviso-legal">
+  <div class="overlay-modal">
+    <div class="modal modal-aviso-legal">
+      <button type="button" class="cerrar-modal-x" id="btn-cerrar-aviso-legal-x" aria-label="Cerrar">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+      </button>
+      <div class="aviso-legal-icono">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
+      </div>
+      <h3>Aviso de protección de datos personales</h3>
+      <p class="aviso-legal-subtitulo">Ley N.º 25.326 — Protección de Datos Personales</p>
+      <p>
+        Los datos que se registran en este legajo están protegidos por la Ley N.º 25.326 de Protección de
+        Datos Personales. Queda prohibida su divulgación a terceros, salvo que el paciente lo autorice
+        expresamente o exista una obligación legal que lo requiera.
+      </p>
+      <p>
+        El paciente debe ser informado de que sus datos se almacenan en un sistema privado y seguro, de uso
+        exclusivo del profesional tratante, y que tiene derecho a solicitar en cualquier momento el acceso,
+        la rectificación o la eliminación de su información, conforme a los artículos 14 a 16 de dicha ley.
+      </p>
+      <div class="acciones-modal" style="justify-content:center;">
+        <button class="btn btn-primario" id="btn-cerrar-aviso-legal">Entendido</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-confirmar-borrado">
+  <div class="overlay-modal">
+    <div class="modal modal-peligro">
+      <div class="icono-alerta">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
+      </div>
+      <h3>⚠ ¿Realmente querés eliminar este legajo?</h3>
+      <p id="texto-confirmar-borrado"></p>
+      <p class="aviso-doble-confirmacion">Esta acción no se puede deshacer desde la búsqueda normal. Para confirmar, escribí <strong>ELIMINAR</strong> en el campo de abajo.</p>
+      <input type="text" id="input-confirmar-borrado" class="input-confirmar-texto" placeholder="Escribí ELIMINAR" autocomplete="off">
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-borrado">Cancelar</button>
+        <button class="btn btn-peligro" id="btn-confirmar-borrado" disabled>Sí, eliminar definitivamente</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-obra-social">
+  <div class="overlay-modal">
+    <div class="modal">
+      <h3>Agregar obra social</h3>
+      <p>Se guardará en el listado para usarla en este y futuros legajos.</p>
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>Nombre de la obra social</label>
+        <input type="text" id="input-nueva-obra" placeholder="Ej: Apross">
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-obra">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-obra">Agregar</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-nueva-sesion">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 560px;">
+      <h3>Agregar sesión</h3>
+      <p>Registrá un nuevo día de atención para este paciente.</p>
+
+      <div class="campo" style="margin-bottom: 16px;">
+        <label>Usar plantilla de evolución <span class="opcional">(opcional)</span></label>
+        <div class="fila-obra-social">
+          <select id="select-plantilla-sesion">
+            <option value="">Sin plantilla — escribir desde cero</option>
+          </select>
+          <button type="button" class="btn-agregar-obra" id="btn-gestionar-plantillas" title="Crear o editar plantillas">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+          </button>
+        </div>
+        <span class="ayuda">Elegir una plantilla completa el texto de abajo; podés editarlo libremente después.</span>
+      </div>
+
+      <div class="grilla-campos" style="margin-bottom: 20px;">
+        <div class="campo">
+          <label>Fecha de atención</label>
+          <input type="date" id="input-fecha-nueva-sesion">
+        </div>
+        <div class="campo">
+          <label>Próxima cita <span class="opcional">(opcional)</span></label>
+          <input type="date" id="input-proxima-nueva-sesion">
+        </div>
+        <div class="campo ancho-completo">
+          <label>¿Qué se trabajó?</label>
+          <textarea id="input-descripcion-nueva-sesion"></textarea>
+        </div>
+        <div class="campo ancho-completo">
+          <label>Evolución / notas <span class="opcional">(opcional)</span></label>
+          <textarea id="input-evolucion-nueva-sesion"></textarea>
+        </div>
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-nueva-sesion">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-nueva-sesion">Guardar sesión</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-editar-sesion">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 560px;">
+      <h3>Editar sesión</h3>
+      <p>Corregí los datos de este día de atención.</p>
+      <div class="grilla-campos" style="margin-bottom: 20px;">
+        <div class="campo">
+          <label>Fecha de atención</label>
+          <input type="date" id="input-fecha-editar-sesion">
+        </div>
+        <div class="campo ancho-completo">
+          <label>¿Qué se trabajó?</label>
+          <textarea id="input-descripcion-editar-sesion"></textarea>
+        </div>
+        <div class="campo ancho-completo">
+          <label>Evolución / notas <span class="opcional">(opcional)</span></label>
+          <textarea id="input-evolucion-editar-sesion"></textarea>
+        </div>
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-editar-sesion">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-editar-sesion">Guardar cambios</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-gestionar-plantillas">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 600px; max-height: 82vh; overflow-y:auto;">
+      <h3>Plantillas de evolución</h3>
+      <p>Creá textos reutilizables para agilizar el registro de sesiones.</p>
+
+      <div id="lista-plantillas" class="lista-plantillas"></div>
+
+      <div class="panel-plantilla-nueva">
+        <div class="campo" style="margin-bottom: 12px;">
+          <label>Nombre de la plantilla</label>
+          <input type="text" id="input-nombre-plantilla" placeholder="Ej: Control de rutina">
+        </div>
+        <div class="campo" style="margin-bottom: 16px;">
+          <label>Contenido</label>
+          <textarea id="input-contenido-plantilla" placeholder="Escribí el texto base que querés reutilizar..." style="min-height: 110px;"></textarea>
+        </div>
+        <button class="btn btn-secundario btn-chico" id="btn-guardar-plantilla">+ Guardar como nueva plantilla</button>
+      </div>
+
+      <div class="acciones-modal">
+        <button class="btn btn-primario" id="btn-cerrar-gestionar-plantillas">Listo</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-papelera">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 640px; max-height: 80vh; overflow-y:auto;">
+      <h3>Base histórica de legajos eliminados</h3>
+      <p>Estos legajos ya no están en el sistema activo, pero quedan resguardados acá para tu consulta.</p>
+      <div id="lista-papelera" class="lista-resultados"></div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cerrar-papelera">Cerrar</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-modal-descripcion-adjunto">
+  <div class="overlay-modal">
+    <div class="modal" style="max-width: 440px;">
+      <h3>Subir archivo</h3>
+      <p id="texto-nombre-archivo-subir"></p>
+      <div class="campo" style="margin-bottom: 20px;">
+        <label>Descripción <span class="opcional">(opcional)</span></label>
+        <input type="text" id="input-descripcion-adjunto" placeholder="Ej: Radiografía de tórax, control mayo 2026">
+      </div>
+      <div class="acciones-modal">
+        <button class="btn btn-secundario" id="btn-cancelar-subir-adjunto">Cancelar</button>
+        <button class="btn btn-primario" id="btn-confirmar-subir-adjunto">Subir archivo</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="assets/js/app.js"></script>
+</body>
+</html>
