/* ============================================================ TurboTubo — sistema de diseño (6 paletas) Por defecto: azul-claro. Cambia con [data-theme] en . ============================================================ */ :root, html[data-theme="azul-claro"] { --bg-page: #EEF4FB; --surface: #FFFFFF; --surface-alt: #DCEAF9; --surface-alt-hover: #CBE0F5; --border: #B9D3EC; --text: #12283F; --text-muted: #55738C; --accent: #1E6FBE; --accent-contrast: #FFFFFF; --accent-hover: #185C9E; /* campos de formulario: papel blanco con texto oscuro en TODAS las paletas */ --field-bg: #FFFFFF; --field-text: #12283F; --field-border: #C7D8EA; --field-placeholder: #8199AF; --field-label: var(--text); --nav-bg: #FFFFFF; --nav-text: #12283F; --nav-text-muted: #55738C; --nav-active-bg: #CFE4F8; --danger: #C0392B; --danger-contrast: #FFFFFF; --danger-hover: #A5301F; --success: #1C7A4A; --success-contrast: #FFFFFF; --success-hover: #166139; } html[data-theme="azul-oscuro"] { --bg-page: #0E2038; --surface: #16324F; --surface-alt: #1C3E5F; --surface-alt-hover: #23507C; --border: rgba(255, 255, 255, 0.12); --text: #F3F8FD; --text-muted: #93AEC6; --accent: #4FA8F5; --accent-contrast: #0E2038; --accent-hover: #6FBBFB; /* en paleta oscura los campos siguen siendo papel claro: texto oscuro legible */ --field-bg: #FFFFFF; --field-text: #12283F; --field-border: #B9CBDD; --field-placeholder: #7C93A8; --field-label: var(--text); --nav-bg: #163350; --nav-text: #F3F8FD; --nav-text-muted: #93AEC6; --nav-active-bg: #23507C; --danger: #E56B5A; --danger-contrast: #34120C; --danger-hover: #EF8B7C; --success: #6FCF97; --success-contrast: #0B2E1B; --success-hover: #8FE0AF; } html[data-theme="oliva-claro"] { --bg-page: #F1F2E6; --surface: #FFFFFF; --surface-alt: #E2E6D0; --surface-alt-hover: #D3D9BC; --border: #C7CFAE; --text: #2B3324; --text-muted: #5C644A; --accent: #5C7A2E; --accent-contrast: #FFFFFF; --accent-hover: #4A6424; --field-bg: #FFFFFF; --field-text: #2B3324; --field-border: #CFD6BB; --field-placeholder: #8A916F; --field-label: var(--text); --nav-bg: #FFFFFF; --nav-text: #2B3324; --nav-text-muted: #5C644A; --nav-active-bg: #D3D9BC; --danger: #B4442E; --danger-contrast: #FFFFFF; --danger-hover: #973824; --success: #4A6B1C; --success-contrast: #FFFFFF; --success-hover: #3C5717; } html[data-theme="oliva-oscuro"] { --bg-page: #262E1F; --surface: #313B27; --surface-alt: #3B472E; --surface-alt-hover: #4C5934; --border: rgba(255, 255, 255, 0.12); --text: #F5F6EA; --text-muted: #B3B89B; --accent: #AAC240; --accent-contrast: #262E1F; --accent-hover: #BFD766; --field-bg: #FFFFFF; --field-text: #2B3324; --field-border: #C2CBA4; --field-placeholder: #82895F; --field-label: var(--text); --nav-bg: #313B27; --nav-text: #F5F6EA; --nav-text-muted: #B3B89B; --nav-active-bg: #4C5934; --danger: #E08A6E; --danger-contrast: #34160C; --danger-hover: #EBA48C; --success: #A9D18E; --success-contrast: #17300C; --success-hover: #C2E0AC; } html[data-theme="rosado"] { --bg-page: #FBF0F2; --surface: #FFFFFF; --surface-alt: #F6DEE4; --surface-alt-hover: #F0CBD5; --border: #E8B9C6; --text: #3F1E28; --text-muted: #8C5C6A; --accent: #C2447A; --accent-contrast: #FFFFFF; --accent-hover: #A5335F; --field-bg: #FFFFFF; --field-text: #3F1E28; --field-border: #E3B7C4; --field-placeholder: #B98598; --field-label: var(--text); --nav-bg: #FFFFFF; --nav-text: #3F1E28; --nav-text-muted: #8C5C6A; --nav-active-bg: #F0CBD5; /* danger/success quedan semanticos (rojo/verde reales) aunque el acento sea rosado, para que un error o un exito nunca se confunda con el color de marca. */ --danger: #B33A3A; --danger-contrast: #FFFFFF; --danger-hover: #96302F; --success: #21804C; --success-contrast: #FFFFFF; --success-hover: #186640; } html[data-theme="gris"] { --bg-page: #F2F2F2; --surface: #FFFFFF; --surface-alt: #E4E4E4; --surface-alt-hover: #D6D6D6; --border: #C7C7C7; --text: #1F1F1F; --text-muted: #6B6B6B; --accent: #2B2B2B; --accent-contrast: #FFFFFF; --accent-hover: #000000; --field-bg: #FFFFFF; --field-text: #1F1F1F; --field-border: #CCCCCC; --field-placeholder: #999999; --field-label: var(--text); --nav-bg: #FFFFFF; --nav-text: #1F1F1F; --nav-text-muted: #6B6B6B; --nav-active-bg: #DDDDDD; /* escala de grises a proposito hasta en el acento -- pero danger/success se dejan cromaticos: un estado de error/exito en gris puro es dificil de distinguir de un dato normal. */ --danger: #C0392B; --danger-contrast: #FFFFFF; --danger-hover: #A5301F; --success: #1C7A4A; --success-contrast: #FFFFFF; --success-hover: #166139; } html[data-theme="rosado-oscuro"] { --bg-page: #2B1620; --surface: #3A1E2A; --surface-alt: #472634; --surface-alt-hover: #5A2F42; --border: rgba(255, 255, 255, 0.12); --text: #FBEEF2; --text-muted: #C79AA9; --accent: #E86A9C; --accent-contrast: #2B1620; --accent-hover: #F186B0; --field-bg: #FFFFFF; --field-text: #3F1E28; --field-border: #D8B7C2; --field-placeholder: #A5788A; --field-label: var(--text); --nav-bg: #3A1E2A; --nav-text: #FBEEF2; --nav-text-muted: #C79AA9; --nav-active-bg: #5A2F42; /* danger/success cromaticos ajustados a fondo oscuro (mismos que las otras paletas oscuras). */ --danger: #E56B5A; --danger-contrast: #34120C; --danger-hover: #EF8B7C; --success: #6FCF97; --success-contrast: #0B2E1B; --success-hover: #8FE0AF; } html[data-theme="gris-oscuro"] { --bg-page: #1C1C1C; --surface: #262626; --surface-alt: #303030; --surface-alt-hover: #3D3D3D; --border: rgba(255, 255, 255, 0.12); --text: #F1F1F1; --text-muted: #A8A8A8; --accent: #E0E0E0; --accent-contrast: #1C1C1C; --accent-hover: #FFFFFF; --field-bg: #FFFFFF; --field-text: #1F1F1F; --field-border: #CCCCCC; --field-placeholder: #999999; --field-label: var(--text); --nav-bg: #262626; --nav-text: #F1F1F1; --nav-text-muted: #A8A8A8; --nav-active-bg: #3D3D3D; /* escala de grises hasta el acento, pero danger/success cromaticos (un error/exito en gris puro no se distingue de un dato normal). */ --danger: #E56B5A; --danger-contrast: #34120C; --danger-hover: #EF8B7C; --success: #6FCF97; --success-contrast: #0B2E1B; --success-hover: #8FE0AF; } /* ---------------- base ---------------- */ html, body { height: 100%; } body { background: var(--bg-page); color: var(--text); transition: background-color .15s ease, color .15s ease; } /* Footer siempre al fondo del viewport, aunque el contenido de la página sea corto. */ body.site-body { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1 0 auto; } .site-footer { flex-shrink: 0; } /* ---------------- top nav ---------------- */ .topnav { background: var(--nav-bg); color: var(--nav-text); border-bottom: 1px solid var(--border); } .nav-brand { font-weight: 800; font-size: 1.05rem; color: var(--accent); text-decoration: none; } .nav-link { color: var(--nav-text-muted); padding: .55rem 1rem; border-radius: .7rem; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-block; } .nav-link:hover { background: var(--surface-alt-hover); color: var(--nav-text); } .nav-link.is-active { background: var(--nav-active-bg); color: var(--accent); } /* ---------------- buttons ---------------- */ :root { /* Una sola altura para todo control de una linea (boton, campo, medio-btn, resumen cerrado de un
) -- que un formulario se vea "parejo" depende de esto mas que de cualquier otra regla suelta. Cambiar este valor cambia la altura de TODO a la vez. */ --field-height: 2.6rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .62rem 1.25rem; border-radius: .75rem; font-weight: 600; font-size: .9rem; line-height: 1.2; min-height: var(--field-height); box-sizing: border-box; align-self: center; /* evita que se estiren dentro de filas flex (form + input) */ border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-alt); } .btn-danger { background: var(--danger); color: var(--danger-contrast); } .btn-danger:hover { background: var(--danger-hover); } .btn-success { background: var(--success); color: var(--success-contrast); } .btn-success:hover { background: var(--success-hover); } /* ---------------- form fields ---------------- Los campos de formulario son "papel": fondo claro con texto oscuro en las 4 paletas, para que nunca queden letras claras sobre fondo blanco. Se distinguen a propósito del resto de las cajas (.card, nav) que sí siguen la paleta. */ input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea { background-color: var(--field-bg); color: var(--field-text); border: 1px solid var(--field-border); border-radius: .55rem; padding: .5rem .65rem; box-sizing: border-box; font-size: .9rem; } /* Misma altura que .btn/.medio-btn en TODO campo de una sola linea -- textarea queda afuera a proposito (necesita poder crecer verticalmente para el texto). */ input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select { height: var(--field-height); } select option { color: var(--field-text); background-color: var(--field-bg); } input::placeholder, textarea::placeholder { color: var(--field-placeholder); opacity: 1; } input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input:not([type]):focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } /* labels: heredan el color de texto de la paleta (legibles sobre el fondo del form) */ label { color: var(--field-label); } /* ---------------- input type=file ---------------- El navegador arma un boton "Seleccionar archivo" nativo (gris de sistema, no toma la paleta) seguido del nombre del archivo. ::file-selector-button SI se puede estilizar (soportado en Chrome/Edge/Firefox/Safari modernos) sin recurrir a esconder el input real y fingir un boton con JS -- sigue siendo el input real, con su teclado/foco/lector de pantalla nativos. */ input[type="file"] { height: auto; padding: 0; border: 0; background: none; color: var(--field-placeholder); font-size: .85rem; } input[type="file"]::file-selector-button { display: inline-flex; align-items: center; gap: .4rem; height: var(--field-height); margin-right: .75rem; padding: 0 1.1rem; border: 1px solid transparent; border-radius: .75rem; background: var(--accent); color: var(--accent-contrast); font-weight: 600; font-size: .85rem; cursor: pointer; transition: background-color .15s ease; } input[type="file"]::file-selector-button:hover { background: var(--accent-hover); } input[type="file"]::file-selector-button::before { content: ''; display: inline-block; width: 15px; height: 15px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='M9 15l3 -3l3 3'/%3E%3Cpath d='M12 12l0 9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1'/%3E%3Cpath d='M9 15l3 -3l3 3'/%3E%3Cpath d='M12 12l0 9'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* ---------------- formularios largos (varios campos) ---------------- Para form.as_p() con muchos campos (ej. Agregar cliente, Mi cuenta): cada

que Django genera pasa a ser una celda de grilla, en vez de apilarse en una sola columna angosta. */ .grid-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; } .grid-form p { margin: 0 0 14px; } .grid-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; } .grid-form .helptext { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; } .grid-form ul.errorlist { color: var(--danger); font-size: 12px; margin: 2px 0 4px; padding-left: 18px; } /* A diferencia del resto de la app (donde los inputs se dejan angostos a proposito, ej. las barras de filtro en flex-row), un formulario largo en grilla si necesita que cada campo ocupe su celda completa. */ .grid-form input, .grid-form select, .grid-form textarea { width: 100%; box-sizing: border-box; } @media (max-width: 640px) { .grid-form { grid-template-columns: 1fr; } } /* ---------------- medio picker (multistep gestion) ---------------- */ .medio-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--field-height); width: var(--field-height); /* solo icono: cuadrado, mismo lado que el alto */ padding: 0; border-radius: .75rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; box-sizing: border-box; } .medio-btn:hover { background: var(--surface-alt); } .medio-btn.is-selected { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } /* WhatsApp sin numero activo: mismo tamano, pero necesita lugar para el triangulo de aviso al lado del logo -- unico caso que no es un cuadrado de un solo icono. */ .medio-btn.medio-btn-wide { width: auto; padding: 0 .85rem; gap: .3rem; } /* ---------------- selector de contacto (Telefono/Correo, multistep paso 2) ---------- Boton + panel desplegable con las opciones (radio) de ese tipo -- reemplaza el