/* /css/create-memorial.css */ /* --- Importación de Google Fonts (Asume que ya está en de HTML) --- */ /* Debes tener esta línea en el de tu create-memorial.html: */ /* --- Variables CSS (Tomadas de memorial.css para consistencia) --- */ :root { --body-bg-start: #17153b; /* Degradado de fondo */ --body-bg-end: #0d0c26; /* Degradado de fondo */ --body-text-color: #ffffff; /* Texto general del cuerpo */ --title-font: "Playfair Display", Georgia, serif; --body-font: "Open Sans", Arial, sans-serif; --heading-color: #acacd6; /* Color de tus títulos y nombres principales */ --card-bg: #2e236c; /* Color de fondo de tus tarjetas (para contenedores de formulario) */ --card-border: rgba( 255, 255, 255, 0.08 ); /* Borde sutil luminoso de tarjeta */ --card-shadow-main: rgba(0, 0, 0, 0.4); /* Sombra principal de tarjeta */ --card-shadow-hover: rgba(0, 0, 0, 0.6); /* Sombra de tarjeta al hover */ --card-border-hover: rgba(255, 255, 255, 0.15); /* Borde luminoso al hover */ --muted-text-color: #c0c0e0; /* Tu color de texto mutado */ --profile-border: #433d8b; /* Borde de imagen de perfil y elementos interactivos */ --symbol-color: #ffd700; /* Color de oro para símbolos */ --light-text-color: #fefcf7; /* Beige suave para texto de biografía/timeline */ /* Colores para el nav (si create-memorial.html tiene un nav) */ --nav-bg: #2e236c; --nav-item-color: #c0c0e0; --nav-item-active-color: #acacd6; --nav-item-hover-bg: rgba(67, 61, 139, 0.2); /* Colores para el estado de error/alerta */ --error-bg: #3f2e6e; --error-text: #ffe0b2; --error-border: #f5c6cb; /* Puedes ajustar a un color que contraste pero dentro de la paleta */ --error-button-bg: #acacd6; --error-button-text: #17153b; /* Nuevas variables para el navbar superior (si create-memorial.html tiene un navbar) */ --navbar-bg-color: rgba(13, 12, 38, 0.9); --navbar-link-color: var(--muted-text-color); --navbar-link-hover-bg: rgba(67, 61, 139, 0.2); --navbar-brand-color: var(--heading-color); --offcanvas-bg-color: var(--card-bg); --offcanvas-border-color: var(--profile-border); /* --- Variables específicas para formularios y elementos de entrada --- */ --input-bg: #3a317a; /* Fondo de inputs, un tono de morado oscuro */ --input-text-color: var( --body-text-color ); /* Color del texto dentro de inputs */ --input-border: var(--profile-border); /* Borde de inputs */ --input-focus-border: var(--heading-color); /* Borde al enfocar input */ --input-placeholder-color: #c0c0e0; /* Color de placeholder */ --button-primary-bg: #433d8b; /* Fondo de botón primario (el morado más intenso) */ --button-primary-hover-bg: #5a529e; /* Fondo de botón primario al hover */ --button-text-color: #ffffff; /* Color de texto de botones */ --button-outline-color: #acacd6; /* Color de borde y texto para botones outline */ --button-outline-hover-bg: rgba( 172, 172, 214, 0.1 ); /* Fondo de botón outline al hover */ /* Colores de iconos de Bootstrap */ --bs-icon-color: var(--heading-color); /* Usado para iconos de Bootstrap */ --bs-icon-hover-color: var(--profile-border); } @font-face { font-family: "bootstrap-icons"; src: url("/css/fonts/bootstrap-icons.woff2") format("woff2"), url("/css/fonts/bootstrap-icons.woff") format("woff"); font-display: swap; font-weight: normal; font-style: normal; } /* --- Base Body Styles --- */ body { background: radial-gradient( circle at top left, var(--body-bg-start) 0%, var(--body-bg-end) 100% ); background-attachment: fixed; color: var(--body-text-color); font-family: var(--body-font); line-height: 1.6; } /* --- Contenedor principal de la página (similar a memorial-container) --- */ .container-create-memorial { max-width: 900px; /* Un poco más ancho para formularios */ margin: 40px auto; /* Centrado y con margen superior/inferior */ padding: 20px; background-color: var(--card-bg); /* Usa el color de tus tarjetas */ border-radius: 10px; box-shadow: 0 8px 16px var(--card-shadow-main), 0 0 0 1px var(--card-border); } /* --- Estilo para Títulos y Encabezados --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--title-font); color: var(--heading-color); font-weight: 700; margin-bottom: 1.5rem; /* Más espacio para títulos de sección */ } h2 { font-size: 2.5rem; text-align: center; border-bottom: 2px solid var(--profile-border); padding-bottom: 15px; margin-bottom: 30px; } /* --- Estilo general para las tarjetas (card), si se usan como secciones --- */ .card { background-color: var(--card-bg); border-radius: 10px; box-shadow: 0 6px 12px var(--card-shadow-main), 0 0 0 1px var(--card-border); transition: transform 0.3s ease, box-shadow 0.3s ease; margin-bottom: 20px; border: none; } .card:hover { transform: translateY(-3px); /* Menos movimiento al hover para formularios */ box-shadow: 0 8px 16px var(--card-shadow-hover), 0 0 0 1px var(--card-border-hover); } .card-header { background-color: var(--profile-border); /* Un color que resalte */ color: var(--body-text-color); font-family: var(--title-font); font-weight: 600; font-size: 1.25rem; border-bottom: 1px solid var(--card-border); border-top-left-radius: 10px; border-top-right-radius: 10px; } .card-body { color: var(--light-text-color); } /* --- Estilos para elementos de formulario --- */ .form-label { color: var(--muted-text-color); /* Color para las etiquetas de los campos */ font-weight: 600; margin-bottom: 0.5rem; display: block; /* Asegura que la etiqueta esté en su propia línea */ } /* Estilo para campos requeridos */ label[required]::after { content: " *"; color: #ff6b6b; /* Un rojo más suave para el asterisco */ font-weight: normal; } .form-control, .form-select, .form-control[type="date"] { background-color: var(--input-bg); color: var(--input-text-color); border: 1px solid var(--input-border); border-radius: 5px; padding: 0.75rem 1rem; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-control:focus, .form-select:focus { background-color: var(--input-bg); /* Mantener color de fondo al enfocar */ color: var(--input-text-color); border-color: var(--input-focus-border); /* Nota: para usar rgba con variables CSS en box-shadow de Bootstrap, necesitas definir una versión RGB de la variable. Por ejemplo: --heading-color-rgb: 172, 172, 214; Y luego usar: box-shadow: 0 0 0 0.25rem rgba(var(--heading-color-rgb), 0.25); Por ahora, usamos un rgba fijo o puedes definir esa variable en :root. */ box-shadow: 0 0 0 0.25rem rgba(172, 172, 214, 0.25); /* Resaltado de foco Bootstrap */ outline: none; } .form-control::placeholder { color: var(--input-placeholder-color); opacity: 0.8; } /* Estilo para el input de tipo file (subida de imágenes) */ .form-control[type="file"] { padding: 0.5rem 1rem; background-color: var(--input-bg); color: var(--input-text-color); border: 1px solid var(--input-border); } .form-control[type="file"]::file-selector-button { background-color: var(--button-primary-bg); color: var(--button-text-color); border: none; padding: 0.75rem 1rem; margin-right: 1rem; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; } .form-control[type="file"]::file-selector-button:hover { background-color: var(--button-primary-hover-bg); } /* --- Estilos para botones --- */ .btn-primary { background-color: var(--button-primary-bg); border-color: var(--button-primary-bg); color: var(--button-text-color); padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 5px; transition: background-color 0.2s ease, transform 0.2s ease; } .btn-primary:hover { background-color: var(--button-primary-hover-bg); border-color: var(--button-primary-hover-bg); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .btn-secondary { background-color: var( --card-bg ); /* Usa un color similar al de tus tarjetas */ border-color: var(--input-border); /* Borde sutil */ color: var(--muted-text-color); padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 5px; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn-secondary:hover { background-color: var(--nav-item-hover-bg); border-color: var(--heading-color); color: var(--heading-color); transform: translateY(-2px); } .btn-danger { background-color: #dc3545; /* Rojo estándar de Bootstrap, puedes ajustarlo */ border-color: #dc3545; color: white; padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 5px; transition: background-color 0.2s ease, transform 0.2s ease; } .btn-danger:hover { background-color: #c82333; border-color: #bd2130; transform: translateY(-2px); } .btn-outline-primary { color: var(--button-outline-color); border-color: var(--button-outline-color); background-color: transparent; transition: all 0.2s ease; } .btn-outline-primary:hover { background-color: var(--button-outline-hover-bg); color: var(--heading-color); border-color: var(--heading-color); } /* --- Estilos para la previsualización de imágenes y videos --- */ .photos-preview, .videos-preview, .timeline-preview-container { /* Renombrado para consistencia con tu nueva estructura */ display: flex; flex-wrap: wrap; gap: 15px; /* Más espacio entre los elementos de la previsualización */ margin-top: 20px; padding: 15px; background-color: rgba( 0, 0, 0, 0.1 ); /* Un fondo ligero para la zona de preview */ border-radius: 8px; border: 1px dashed var(--muted-text-color); /* Borde punteado para indicar zona de drop */ min-height: 100px; /* Asegura visibilidad si está vacío */ align-items: center; /* Centra verticalmente el contenido */ justify-content: center; /* Centra horizontalmente el contenido */ text-align: center; color: var(--muted-text-color); } /* Base para todas las imágenes de previsualización */ .preview-image { max-width: 200px; max-height: 150px; object-fit: cover; border-radius: 8px; border: 2px solid var(--profile-border); /* Añadido borde de tema */ box-shadow: 0 2px 8px var(--card-shadow-main); /* Usado sombra de tema */ margin-top: 10px; display: block; transition: transform 0.2s ease, box-shadow 0.2s ease; /* Añadida transición para hover */ } .preview-image:hover { transform: scale(1.03); /* Ligeramente más grande al hover */ box-shadow: 0 4px 10px var(--card-shadow-hover); } /* Imagen de perfil (más pequeña y circular) */ #profilePreview { max-width: 150px; max-height: 150px; border-radius: 50%; /* Circular */ object-fit: cover; box-shadow: 0 2px 10px var(--card-shadow-main); /* Sombra de tema */ border: 3px solid var(--profile-border); /* Borde más pronunciado para perfil */ } #profilePreview:hover { /* Hover para perfil también */ transform: scale(1.05); box-shadow: 0 4px 15px var(--card-shadow-hover); } /* Imagen de banner (más ancha y menos alta) */ #bannerPreview { max-width: 100%; max-height: 120px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 10px var(--card-shadow-main); /* Sombra de tema */ border: 2px solid var(--profile-border); /* Borde de tema */ } #bannerPreview:hover { /* Hover para banner también */ transform: scale(1.01); box-shadow: 0 3px 12px var(--card-shadow-hover); } /* Estilos para los items de video */ .youtube-video-item { /* Esta clase es probable que sea el contenedor del video en la lista */ transition: all 0.3s ease; background-color: var(--input-bg); /* Un fondo para el item de video */ border-radius: 8px; border: 1px solid var(--input-border); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding: 10px; /* Padding interno para el iframe */ } .youtube-video-item:hover { box-shadow: 0 5px 15px var(--card-shadow-hover); /* Sombra de tema al hover */ transform: translateY(-3px); } /* Estilos para la galería de fotos (en el formulario, si es un contenedor general) */ .photos-preview { background-color: rgba( 0, 0, 0, 0.15 ); /* Slightly darker background just for the photos preview */ padding: 20px; /* More padding */ border-radius: 12px; /* Slightly more rounded corners */ } .photos-preview img { /* Las imágenes individuales dentro del contenedor de la galería */ width: 120px; /* Tamaño más consistente para miniaturas */ height: 120px; object-fit: cover; border-radius: 8px; border: 2px solid var(--profile-border); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .photos-preview img:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } /* Estilos para los items de video (si son elementos individuales en una lista) */ .youtube-preview-item, /* Contenedor del video embed en la previsualización */ .gallery-preview-item { /* Contenedor de la imagen en la previsualización */ position: relative; border-radius: 10px; /* Bordes más redondeados */ overflow: hidden; box-shadow: 0 4px 8px var(--card-shadow-main); transition: all 0.3s ease; background-color: var(--input-bg); /* Fondo sutil para los ítems de preview */ } .youtube-preview-item:hover, .gallery-preview-item:hover { transform: translateY(-3px); box-shadow: 0 6px 12px var(--card-shadow-hover); } .youtube-preview-item iframe { width: 100%; height: 100%; aspect-ratio: 16/9; border-radius: 8px; /* Aplica el border-radius al iframe también */ } .gallery-preview-item img { width: 100%; height: 180px; /* Altura más grande para una mejor previsualización */ object-fit: cover; border-radius: 8px; } .youtube-preview-item .remove-btn, .gallery-preview-item .remove-btn { position: absolute; top: 8px; right: 8px; background: rgba(220, 53, 69, 0.9); /* Un rojo más oscuro y opaco */ color: white; border: none; border-radius: 50%; width: 36px; /* Botón un poco más grande */ height: 36px; display: flex; justify-content: center; align-items: center; font-size: 1.35rem; /* Icono más grande */ cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; z-index: 5; /* Asegura que esté sobre la imagen/video */ } .youtube-preview-item .remove-btn:hover, .gallery-preview-item .remove-btn:hover { background-color: #c82333; transform: scale(1.1); } /* --- Estilos para la línea de tiempo en el formulario (si tiene preview) --- */ .timeline-preview-container .list-group { padding: 0; position: relative; border-left: 2px solid var(--profile-border); margin-left: 25px; } .timeline-preview-container .list-group-item { background-color: var( --input-bg ); /* Fondo de input para los ítems de timeline */ color: var(--body-text-color); border: 1px solid var(--input-border); padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); position: relative; margin-bottom: 15px; margin-left: 20px; /* Espacio para el punto */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .timeline-preview-container .list-group-item:hover { transform: translateX(5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } .timeline-preview-container .list-group-item::before { content: ""; position: absolute; left: -35px; /* Ajustado para el punto */ top: 20px; width: 15px; height: 15px; background-color: var(--heading-color); border-radius: 50%; border: 3px solid var(--body-bg-start); z-index: 1; } .timeline-preview-container .list-group-item h5 { color: var(--heading-color); /* Título del evento */ margin-bottom: 5px; } .timeline-preview-container .list-group-item small { color: var(--muted-text-color); display: block; margin-bottom: 10px; } /* Imágenes en los items de timeline (más pequeñas y con separación) */ .timeline-preview-item .preview-image { /* Uso la clase base de preview-image aquí */ max-width: 120px; max-height: 90px; border-radius: 6px; object-fit: cover; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* Sombra más suave */ margin-top: 10px; /* Ajustado para separación del texto */ margin-bottom: 5px; /* Espacio si hay elementos debajo */ } .timeline-preview-item .remove-btn { position: absolute; top: 5px; right: 5px; background: rgba(220, 53, 69, 0.8); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; cursor: pointer; z-index: 5; transition: background-color 0.2s ease, transform 0.2s ease; } .timeline-preview-item .remove-btn:hover { background-color: #c82333; transform: scale(1.1); } /* --- Estilos para la barra de navegación de regreso (si existe en create-memorial.html) --- */ .navbar.bg-light { /* Esto sobreescribe el bg-light de Bootstrap */ background-color: var(--navbar-bg-color) !important; border-bottom: 1px solid var(--profile-border); padding-top: 0.75rem; padding-bottom: 0.75rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Agrega una sombra al navbar */ } .navbar-brand { color: var(--navbar-brand-color); font-family: var(--title-font); /* Usamos el font de título para la marca */ font-weight: 700; transition: color 0.2s ease, transform 0.2s ease; display: flex; /* Para alinear el icono con el texto */ align-items: center; } .navbar-brand:hover { color: var(--nav-item-active-color); transform: translateX(-3px); } .navbar-brand i { font-size: 1.75rem; /* Icono más grande */ color: var(--nav-item-active-color); margin-right: 0.5rem; /* Espacio entre icono y texto */ transition: color 0.2s ease; } .navbar-brand:hover i { color: var(--heading-color); } /* --- Estilos de alertas y toasts --- */ .alert { background-color: var(--card-bg); /* Fondo de alerta similar a tus tarjetas */ color: var(--body-text-color); border-color: var(--profile-border); font-family: var(--body-font); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .alert-success { background-color: #3f2e6e; /* Un morado más oscuro para el éxito */ border-color: #433d8b; color: #e0ffe0; /* Un verde muy suave */ } .alert-danger { background-color: var(--error-bg); border-color: var(--error-border); color: var(--error-text); } .btn-close { filter: invert( 1 ); /* Para que el botón de cerrar sea blanco en fondos oscuros */ opacity: 0.8; } .btn-close:hover { opacity: 1; } .toast { min-width: 300px; background-color: var(--card-bg); color: var(--body-text-color); border: 1px solid var(--profile-border); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } .toast-header { background-color: var(--profile-border); color: var(--body-text-color); border-bottom: 1px solid var(--card-border); font-family: var(--title-font); font-weight: 600; } .toast-body { color: var(--light-text-color); } /* --- Estilo para usuarios admin (si aplica en este formulario) --- */ body.is-admin .admin-only { display: block !important; } .admin-only { display: none; } /* --- Spinner --- */ .spinner-border { vertical-align: middle; color: var(--heading-color); /* Color de tu tema */ } /* --- Botones de acción (Submit, Cancel) --- */ .action-buttons { display: flex; gap: 15px; /* Espacio entre botones */ margin-top: 30px; justify-content: flex-end; /* Alinea los botones a la derecha */ } /* --- Responsive Adjustments --- */ @media (max-width: 768px) { .container-create-memorial { margin: 20px auto; padding: 15px; } h2 { font-size: 2rem; margin-bottom: 20px; } .form-control, .form-select { padding: 0.6rem 0.8rem; } .btn-primary, .btn-secondary, .btn-danger, .btn-outline-primary { padding: 0.6rem 1rem; font-size: 0.9rem; } .action-buttons { flex-direction: column; /* Apila los botones en móviles */ gap: 10px; } .action-buttons button { width: 100%; } .photos-preview img, .gallery-preview-item img { width: 100px; height: 100px; } .youtube-preview-item .remove-btn, .gallery-preview-item .remove-btn, .timeline-preview-item .remove-btn { width: 30px; height: 30px; font-size: 1.1rem; } .timeline-preview-container .list-group-item { padding: 10px 15px; margin-left: 15px; } .timeline-preview-container .list-group-item::before { left: -25px; width: 12px; height: 12px; } } /* --- Variables CSS (Asegúrate de que estas estén en la parte superior de tu archivo CSS) --- */ :root { /* ... tus otras variables ... */ --light-text-color: #fefcf7; /* Tu beige suave para texto de biografía/timeline */ --muted-text-color: #c0c0e0; /* Tu color de texto mutado */ --body-text-color: #ffffff; /* Texto general del cuerpo, blanco puro */ /* ... */ } /* --- Estilos para texto oscuro ilegible --- */ .form-instruction-text { color: var(--light-text-color); /* Usa el color beige suave */ font-size: 1.05rem; /* Un poco más grande para mejor legibilidad */ font-weight: 400; /* Asegura un peso de fuente estándar, no muy fino */ margin-bottom: 15px; /* Espacio debajo del mensaje */ text-align: center; /* Si quieres que el texto esté centrado */ } /* También puedes aplicar un estilo más general si tienes muchos divs de ayuda: */ .form-group .text-muted { /* Si es un div con la clase 'text-muted' de Bootstrap */ color: var( --light-text-color ) !important; /* Sobrescribe Bootstrap con tu color claro */ } .form-group div { /* Si es un div genérico dentro de un form-group */ color: var(--muted-text-color); /* Prueba con muted-text-color primero */ } /* Si el div está dentro de un 'card-body' y es texto general */ .card-body div { color: var(--light-text-color); } #memorial-form { display: none; /* Inicialmente oculto */ }