From 3eaa60224cdf48a6f709f035077e41c03d795097 Mon Sep 17 00:00:00 2001 From: adevopg Date: Mon, 13 Jul 2026 10:17:48 +0000 Subject: [PATCH] web-next: revertir el reset de Tailwind que aplastaba los campos del tema MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit El tema nw-ryu se diseño para los defaults del navegador (la web Django no usa Tailwind). El preflight de Tailwind rompia el layout de los formularios: - box-sizing:border-box hacia que la height fija de los inputs (24px) incluyera el padding → campos finos/aplastados. Se vuelve a content-box en los inputs/select del tema (.admin-form conserva border-box). - table{border-collapse:collapse} anulaba el border-spacing de las tablas del tema (middle-center-table, max-center-table...) → filas pegadas sin separacion. Se vuelve a border-collapse:separate. Reglas sin @layer → ganan al preflight (que va en @layer base). Verificado por captura: los campos de /login ahora coinciden pixel a pixel con Django. Co-Authored-By: Claude Opus 4.8 (1M context) --- web-next/app/globals.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/web-next/app/globals.css b/web-next/app/globals.css index 72617c6..538cac1 100644 --- a/web-next/app/globals.css +++ b/web-next/app/globals.css @@ -20,6 +20,26 @@ los controla el tema real nw-ryu (novawow-style.css), cargado en el del layout. No los redefinimos aquí para que el tema Django quede idéntico. */ +/* El tema nw-ryu se diseñó para los defaults del navegador (igual que la web + Django, que NO usa Tailwind). El preflight de Tailwind rompe dos cosas: + 1) box-sizing:border-box hace que la height fija de los inputs incluya el + padding → campos aplastados. Volvemos a content-box en los inputs/select + que estiliza el tema (los de .admin-form conservan border-box por su + mayor especificidad). + 2) border-collapse:collapse anula el border-spacing de las tablas del tema + (middle-center-table, etc.) → filas pegadas. Volvemos a separate. + Reglas SIN capa: ganan al preflight de Tailwind (que va en @layer base). */ +input[type='text'], +input[type='email'], +input[type='password'], +input[type='number'], +select { + box-sizing: content-box; +} +table { + border-collapse: separate; +} + /* Componentes reutilizables */ @layer components { .nw-btn {