Carpeta css
This commit is contained in:
Axel Axt
@@ -0,0 +1,975 @@
|
||||
/* ===== BASE GLOBAL ===== */
|
||||
|
||||
/* Fondo vive en html */
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#667e8e 0%,
|
||||
#425870 25%,
|
||||
#24344d 65%,
|
||||
#0f172a 100%
|
||||
);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Body solo contenido */
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Evita selección de imágenes */
|
||||
img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ===== NAVBAR ===== */
|
||||
|
||||
.navbar-dark {
|
||||
/* Sombra para separar del contenido */
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== COMPONENTES (cards, headers, titulos ===== */
|
||||
|
||||
/* Cards */
|
||||
|
||||
.card-rounded {
|
||||
/* Bordes redondeados */
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
/* Sombra mas profunda */
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.438);
|
||||
}
|
||||
|
||||
.card {
|
||||
/* Evita desbordes internos */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
|
||||
.header-dark {
|
||||
background-color: #212529;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
|
||||
/* Títulos */
|
||||
|
||||
.title-shadow {
|
||||
/* Sombra */
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== BOTONES ===== */
|
||||
|
||||
.btn-soft-secondary {
|
||||
background-color: #6c757d;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-soft-secondary:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Animación global de botones */
|
||||
|
||||
.btn {
|
||||
/* Transiciones suaves para hover y click */
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
/* Efecto elevación */
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== FORMULARIOS – COMPACTO Y SIN NEGRITA ===== */
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
font-size: 13.5px;
|
||||
padding: 5px 8px;
|
||||
border: 1.5px solid #b6c2cf;
|
||||
border-radius: 10px;
|
||||
|
||||
/* No usa negrita */
|
||||
font-weight: 400;
|
||||
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
/* Labels sin negrita */
|
||||
|
||||
.form-label {
|
||||
font-size: 12.8px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Focus sutil */
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #b6c2cf;
|
||||
box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== HOME - INICIO ===== */
|
||||
|
||||
.title-presence {
|
||||
font-size: 2.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
|
||||
/* Sombra para destacar sobre fondo */
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
|
||||
|
||||
margin-bottom: 0.5rem !important;
|
||||
|
||||
/* Centrado manual */
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.custom-margin-top {
|
||||
margin-top: 5rem !important;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
|
||||
.action-card {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.45);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/* Compacto */
|
||||
.card-body-compact {
|
||||
padding: 1rem 0.9rem;
|
||||
}
|
||||
|
||||
/* Tipografía */
|
||||
.card-title {
|
||||
font-size: 1.1rem;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ICONO SOFT (solo vista principal) */
|
||||
.icon-box-soft {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* colores suaves */
|
||||
.bg-primary-soft { background-color: rgba(13,110,253,0.15); }
|
||||
.bg-success-soft { background-color: rgba(25,135,84,0.15); }
|
||||
.bg-warning-soft { background-color: rgba(255,193,7,0.2); }
|
||||
.bg-danger-soft { background-color: rgba(220,53,69,0.15); }
|
||||
.bg-info-soft { background-color: rgba(13,202,240,0.15); }
|
||||
.bg-secondary-soft { background-color: rgba(108,117,125,0.15); }
|
||||
|
||||
/* ICONO SOLIDO (vista negocio) */
|
||||
.icon-box {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.icon-box i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* colores por modulo */
|
||||
.bg-clientes { background: #0d6efd; }
|
||||
.bg-ventas { background: #198754; }
|
||||
.bg-servicios { background: #fd7e14; }
|
||||
.bg-presupuestos { background: #6f42c1; }
|
||||
.bg-productos { background: #20c997; }
|
||||
.bg-proveedores { background: #dc3545; }
|
||||
.bg-pedidos { background: #0dcaf0; }
|
||||
|
||||
/* animacion */
|
||||
.action-card:hover .icon-box {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.action-card:hover .icon-box-soft {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
/* ===== LOGIN ===== */
|
||||
|
||||
.bytecenter-gradient {
|
||||
/* Gradiente lateral decorativo */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#0f172a,
|
||||
#1e3a5f,
|
||||
#3b82b8
|
||||
);
|
||||
|
||||
border-radius: 16px 0 0 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
/* Se achica en pantallas angostas */
|
||||
max-width: min(1100px, 90vw);
|
||||
/* Se adapta a la altura disponible */
|
||||
min-height: min(600px, 80vh);
|
||||
width: 100%;
|
||||
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.438);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.login-box h1 a.fw-semibold {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.shadow-heading {
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.input-lg {
|
||||
font-size: 1.0rem;
|
||||
height: 3.2rem;
|
||||
}
|
||||
|
||||
.form-floating > label {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== TOAST (mensajes) ===== */
|
||||
|
||||
.toast-flotante {
|
||||
position: fixed !important;
|
||||
|
||||
bottom: 25px !important;
|
||||
left: 25px !important;
|
||||
|
||||
z-index: 1055;
|
||||
|
||||
min-width: 320px;
|
||||
max-width: 420px;
|
||||
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
|
||||
/* Sombra más fuerte */
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0,0,0,.25),
|
||||
0 20px 50px rgba(0,0,0,.35);
|
||||
|
||||
animation: toastIn .35s ease forwards;
|
||||
}
|
||||
|
||||
/* Animación de ENTRADA desde la izquierda */
|
||||
|
||||
@keyframes toastIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animación de SALIDA hacia la izquierda */
|
||||
|
||||
.toast-out {
|
||||
animation: toastOut .3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes toastOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(-60px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== FORMULARIO DE CREACIÓN DE VENTA ===== */
|
||||
|
||||
/* Labels más chicos */
|
||||
|
||||
.label-formventa {
|
||||
font-size: 12px;
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Inputs más compactos */
|
||||
|
||||
.card-body-scroll .form-control {
|
||||
font-size: 0.85rem;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.card-body-scroll .form-control-sm {
|
||||
font-size: 0.8rem;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* Input de precio con símbolo $ */
|
||||
|
||||
.input-precio .input-group-text,
|
||||
.input-precio .form-control {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.input-precio .input-group-text {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-precio .form-control {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== CHECKBOX DE VENTA ===== */
|
||||
|
||||
.form-check-input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1.5px solid #b6c2cf;
|
||||
border-radius: 6px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Estado hover */
|
||||
|
||||
.form-check-input:hover {
|
||||
border-color: #86b7fe;
|
||||
}
|
||||
|
||||
/* Estado focus */
|
||||
|
||||
.form-check-input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
/* Estado checked */
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== LISTAS ===== */
|
||||
|
||||
/* Card */
|
||||
|
||||
.card-viewport > form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.card-viewport {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
/* Body flexible */
|
||||
|
||||
.card-body-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Zona que scrollea solo si hace falta */
|
||||
|
||||
.table-scroll {
|
||||
max-height: clamp(100px, 14vh, 400px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-scroll-backup {
|
||||
max-height: clamp(120px, 40vh, 400px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-scroll-crear {
|
||||
max-height: clamp(120px, 21vh, 400px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
/* ===== LOADER (pantalla de carga) ===== */
|
||||
|
||||
/* Overlay principal del loader */
|
||||
|
||||
#page-loader {
|
||||
|
||||
/* Lo fija a toda la pantalla (top, right, bottom, left = 0) */
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
||||
/* Fondo oscuro que bloquea interacción */
|
||||
background: #0f172a;
|
||||
|
||||
/* Centrado del contenido interno (spinner) */
|
||||
display: flex;
|
||||
align-items: center; /* centra vertical */
|
||||
justify-content: center; /* centra horizontal */
|
||||
|
||||
/* Se asegura de estar por encima de todo */
|
||||
z-index: 9999;
|
||||
|
||||
/* Estado inicial visible */
|
||||
opacity: 1;
|
||||
|
||||
/* Permite transición suave al ocultarse */
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* Estado cuando el loader se está ocultando */
|
||||
|
||||
#page-loader.fade-out {
|
||||
|
||||
/* Lo hace transparente (fade visual) */
|
||||
opacity: 0;
|
||||
|
||||
/* Permite interactuar con la UI aunque el loader aún exista */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
|
||||
.spinner {
|
||||
|
||||
/* Tamaño del loader */
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
/* Borde circular base (semi transparente) */
|
||||
border: 4px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
/* Borde circular base (semi transparente) */
|
||||
border-top-color: #ffffff;
|
||||
|
||||
/* Hace que sea un círculo perfecto */
|
||||
border-radius: 50%;
|
||||
|
||||
/* Animación continua de rotación */
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* Animación de rotación */
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
/* Rota 360 grados constantemente */
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== DATATABLES ===== */
|
||||
|
||||
/* Quitar resaltado azul al hacer click en el paging */
|
||||
|
||||
.dataTables_wrapper .pagination .page-link:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Ajustar colores del item activo */
|
||||
|
||||
.dataTables_wrapper .pagination .page-item.active .page-link {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Hover más suave */
|
||||
|
||||
.dataTables_wrapper .pagination .page-link:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.dataTables_info {
|
||||
font-size: 13px;
|
||||
color: #6c757d;
|
||||
padding-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.dataTables_paginate {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== INPUT DE PRESUPUESTO ===== */
|
||||
|
||||
/* Input porcentaje (recargo / descuento) */
|
||||
|
||||
.input-porcentaje {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-porcentaje .form-control {
|
||||
font-size: 0.85rem;
|
||||
padding: 4.5px 8px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.input-porcentaje .input-group-text {
|
||||
font-size: 0.85rem;
|
||||
padding: 4.5px 8px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===== INPUT DE SERVICIO ===== */
|
||||
|
||||
.input-moneda .form-control {
|
||||
font-size: 0.85rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.input-moneda .input-group-text {
|
||||
font-size: 0.85rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SELECT INFORMES */
|
||||
|
||||
.form-select.custom-select.select-informe {
|
||||
font-size: 14px;
|
||||
padding: 6px 10px;
|
||||
padding-right: 1.6rem;
|
||||
border-radius: 8px;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
background-position: right 0.5rem center;
|
||||
background-size: 12px 12px;
|
||||
|
||||
min-width: 150px;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.form-select.custom-select.select-informe:focus {
|
||||
outline: none;
|
||||
border-color: #2c2f48;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TABLAS */
|
||||
|
||||
table.dataTable {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
table.dataTable thead th {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
table.dataTable tbody td {
|
||||
padding-top: 0.55rem;
|
||||
padding-bottom: 0.55rem;
|
||||
}
|
||||
|
||||
table.dataTable tbody tr:hover {
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
/* Texto Buscar */
|
||||
|
||||
.dataTables_filter label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Input de búsqueda */
|
||||
|
||||
.dataTables_filter input {
|
||||
font-size: 13px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
/* Select de columnas */
|
||||
|
||||
#columnFilter {
|
||||
font-size: 13px;
|
||||
padding: 4px 35px 4px 8px;
|
||||
}
|
||||
|
||||
.dataTables_filter input:focus,
|
||||
#columnFilter:focus {
|
||||
outline: none;
|
||||
border-color: #2c2f48;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TABLA RESUMEN VENTA */
|
||||
|
||||
.table-resumen-venta {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table-resumen-venta thead th {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-resumen-venta tbody td {
|
||||
padding-top: 0.35rem;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* README */
|
||||
|
||||
.readme-scroll{
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Titulos dentro del readme */
|
||||
|
||||
.readme-container h1,
|
||||
.readme-container h2,
|
||||
.readme-container h3{
|
||||
margin-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Párrafos */
|
||||
|
||||
.readme-container p{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Listas */
|
||||
|
||||
.readme-container ul{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Scroll */
|
||||
|
||||
.readme-scroll::-webkit-scrollbar{
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.readme-scroll::-webkit-scrollbar-thumb{
|
||||
background: #6c757d;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CONTENIDO README */
|
||||
|
||||
.readme-scroll h1{
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.readme-scroll h2{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Borde izquierdo en h3 para darle estructura */
|
||||
.readme-scroll h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 8px;
|
||||
border-left: 3px solid #3b82b8;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* h4 con color para diferenciarlo del h3 */
|
||||
.readme-scroll h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-top: 15px;
|
||||
color: #1e3a5f;
|
||||
}
|
||||
|
||||
.readme-index {
|
||||
background: #f0f4ff; /* azulado suave */
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #3b82b8; /* borde izquierdo de color */
|
||||
}
|
||||
|
||||
.readme-index ul{
|
||||
margin:0;
|
||||
padding-left:18px;
|
||||
}
|
||||
|
||||
/* Más aire en el texto */
|
||||
.readme-scroll p,
|
||||
.readme-scroll li {
|
||||
line-height: 1.75;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.readme-index a{
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.readme-index a:hover{
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.readme-scroll{
|
||||
max-height:70vh;
|
||||
overflow-y:auto;
|
||||
scroll-behavior:smooth;
|
||||
}
|
||||
|
||||
.readme-index h5{
|
||||
color:#000;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.readme-index > ul > li{
|
||||
margin-bottom:8px;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.readme-index ul ul{
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
.readme-index ul ul li{
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* MODALES */
|
||||
|
||||
.modal-content{
|
||||
border-radius:14px;
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
box-shadow:0 10px 30px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
font-size:0.95rem;
|
||||
color:#4b5563;
|
||||
}
|
||||
|
||||
/* Animación de apertura */
|
||||
|
||||
.modal.fade .modal-dialog{
|
||||
transform:scale(0.95);
|
||||
transition:transform .2s ease;
|
||||
}
|
||||
|
||||
.modal.show .modal-dialog{
|
||||
transform:scale(1);
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
|
||||
transform: scale(1.25);
|
||||
transform-origin: center;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Acomoda layout en pantallas con otras resoluciónes */
|
||||
|
||||
/* Pantallas chicas */
|
||||
@media (max-height: 750px) {
|
||||
body {
|
||||
zoom: 0.9;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: -10vh;
|
||||
left: -10vw;
|
||||
width: 120vw;
|
||||
height: 120vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pantallas más chicas */
|
||||
@media (max-height: 650px) {
|
||||
body {
|
||||
zoom: 0.8;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: -10vh;
|
||||
left: -10vw;
|
||||
width: 120vw;
|
||||
height: 120vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* INPUTS NO EDITABLES */
|
||||
|
||||
/* Campo no editable */
|
||||
.campo-readonly {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Color input desactivado */
|
||||
select:disabled {
|
||||
background-color: #fff !important;
|
||||
color: #212529;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.campo-readonly:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* OJO DE CONTRASENIA */
|
||||
.btn-toggle-password {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
color: #6c757d;
|
||||
font-size: 15px;
|
||||
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-toggle-password:hover {
|
||||
color: #0d6efd;
|
||||
}
|
||||
Reference in New Issue
Block a user