:root { --kokoro-bg: #FBF7EC; --kokoro-card: #FFFFFF; --kokoro-border: #E4DBC5; --kokoro-text: #2C2A22; --kokoro-text-dim: #8A8168; --kokoro-green: #2E7D32; --kokoro-green-dark: #1B5E20; --kokoro-green-dim: #E3EFDD; --kokoro-red: #C0392B; } * { box-sizing: border-box; } /* El scroll de la página en muchos navegadores (sobre todo mobile) lo maneja , no — poner overflow:hidden solo en body no alcanza para evitar que la página entera se desplace cuando algo adentro mide más que la pantalla. Por eso html también necesita altura fija + overflow:hidden: así el único scroll posible es el de .panel-content, que es el que realmente queremos. */ html { height: 100%; height: 100dvh; margin: 0; overflow: hidden; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--kokoro-bg); color: var(--kokoro-text); height: 100vh; height: 100dvh; overflow: hidden; } body.standalone-page { height: auto; min-height: 100vh; min-height: 100dvh; overflow: auto; } /* Login/registro (standalone) sí necesitan poder scrollear la página entera si el contenido no entra — reviertan la restricción que le pusimos a arriba, solo para esos casos. */ html:has(body.standalone-page) { height: auto; overflow: auto; } .app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 480px; margin: 0 auto; position: relative; background: var(--kokoro-bg); } /* ---- Menú superior (mismo patrón que kokoro-app: saludo + acciones) ---- */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--kokoro-bg); border-bottom: 1px solid var(--kokoro-border); flex-shrink: 0; } .app-header .saludo { font-size: 15px; color: var(--kokoro-text-dim); } .app-header .saludo strong { display: block; font-size: 18px; color: var(--kokoro-text); font-weight: 700; } .header-actions { display: flex; align-items: center; gap: 10px; } .icon-button { position: relative; background: var(--kokoro-green-dim); border: none; border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } .header-actions a.icon-button { text-decoration: none; color: inherit; } .badge-count { position: absolute; top: -4px; right: -4px; background: #E65100; color: white; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; min-width: 16px; text-align: center; } .help-button { background: var(--kokoro-green-dim); color: var(--kokoro-green-dark); border: none; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; text-decoration: none; } /* ---- Autenticación ---- */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 24px; } .auth-card { width: 100%; max-width: 400px; background: var(--kokoro-card); border: 1px solid var(--kokoro-border); border-radius: 20px; padding: 32px 24px; } .auth-title { color: var(--kokoro-green); text-align: center; margin: 0 0 8px; font-size: 22px; } .auth-subtitle { color: var(--kokoro-text-dim); text-align: center; font-size: 13px; margin: 0 0 20px; } .auth-form { display: flex; flex-direction: column; gap: 4px; } .auth-form label { font-size: 13px; color: var(--kokoro-text-dim); margin-top: 12px; } .auth-form input { background: var(--kokoro-bg); border: 1px solid var(--kokoro-border); border-radius: 10px; padding: 12px; color: var(--kokoro-text); font-size: 15px; } .auth-button { margin-top: 20px; background: var(--kokoro-green); color: #FBF7EC; border: none; border-radius: 999px; padding: 14px; font-weight: 700; font-size: 15px; cursor: pointer; } .auth-error { background: rgba(192, 57, 43, 0.1); border: 1px solid var(--kokoro-red); color: #A6362A; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 8px; } .auth-success { color: var(--kokoro-green); font-size: 13px; } .auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--kokoro-text-dim); } .auth-footer a { color: var(--kokoro-green); text-decoration: none; font-weight: 600; } /* ---- Navegación inferior de 4 íconos ---- */ .bottom-nav { display: flex; border-top: 1px solid var(--kokoro-border); background: var(--kokoro-card); flex-shrink: 0; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: none; border: none; color: var(--kokoro-text-dim); font-size: 11px; cursor: pointer; } .bottom-nav-item .icono { font-size: 20px; } .bottom-nav-item.active { color: var(--kokoro-green); font-weight: 700; } /* ---- Paneles (header fijo + contenido con scroll real) ---- */ .tab-panel { display: none; height: 100%; width: 100%; } .tab-panel.active { display: flex; flex-direction: column; /* Sin esto, el panel crece según su contenido en vez de ocupar el espacio fijo entre el header y el bottom-nav — y entonces .panel-content nunca llega a necesitar su propio scroll interno: en vez de eso, es TODO el .app-shell el que se pasa de alto, y como body tiene overflow:hidden, lo que sobra (el bottom-nav incluido) queda recortado e inalcanzable. */ flex: 1; min-height: 0; } .panel-header { padding: 16px 20px; border-bottom: 1px solid var(--kokoro-border); flex-shrink: 0; } .panel-header h2 { margin: 0; font-size: 18px; color: var(--kokoro-text); } .panel-content { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; } /* ---- Tarjetas de lista (pacientes, pendientes, documentos) ---- */ .item-card { display: flex; align-items: center; gap: 12px; background: var(--kokoro-card); border: 1px solid var(--kokoro-border); border-radius: 14px; padding: 12px; margin-bottom: 10px; cursor: pointer; } .item-card-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--kokoro-green-dim); flex-shrink: 0; } .item-card-foto-placeholder { width: 48px; height: 48px; border-radius: 50%; background: var(--kokoro-green-dim); display: flex; align-items: center; justify-content: center; color: var(--kokoro-green); font-weight: 700; flex-shrink: 0; } .item-card-nombre { font-weight: 600; font-size: 15px; } .item-card-acciones { display: flex; gap: 8px; margin-left: auto; } .boton-chico { border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--kokoro-bg); border: 1px solid var(--kokoro-border); color: var(--kokoro-text); text-decoration: none; display: inline-block; } .boton-chico.aceptar { background: var(--kokoro-green); border-color: var(--kokoro-green); color: #FBF7EC; } .boton-chico.rechazar { background: transparent; border: 1px solid var(--kokoro-red); color: var(--kokoro-red); } /* ---- Formulario de subida de documentos (Mi cuenta) ---- */ .documento-form { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--kokoro-border); } .documento-form label { font-size: 13px; color: var(--kokoro-text-dim); margin-top: 12px; } .documento-form select, .documento-form input[type="file"] { background: var(--kokoro-bg); border: 1px solid var(--kokoro-border); border-radius: 10px; padding: 12px; color: var(--kokoro-text); font-size: 15px; } .estado-vacio { color: var(--kokoro-text-dim); text-align: center; margin-top: 40px; font-size: 14px; } /* ---- Vincular ---- */ .codigo-terapeuta { font-size: 28px; font-weight: 700; letter-spacing: 4px; text-align: center; color: var(--kokoro-green-dark); background: var(--kokoro-green-dim); border-radius: 14px; padding: 20px; margin: 16px 0; } .qr-wrapper { display: flex; justify-content: center; background: white; border: 1px solid var(--kokoro-border); border-radius: 14px; padding: 16px; margin-bottom: 16px; } .pendiente-verificacion { background: var(--kokoro-green-dim); border: 1px solid var(--kokoro-green); color: var(--kokoro-green-dark); border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.5; } .pendiente-verificacion.rechazado { background: rgba(192, 57, 43, 0.1); border: 1px solid var(--kokoro-red); color: #A6362A; }