* {

 box-sizing: border-box;
 margin: 0;

 padding: 0;

}



:root {

 --text: #eb5013;

 --muted: rgb(102, 112, 133);

 --primary: #172033;

 --primary-hover: #2b3852;

 --border: rgba(255, 255, 255, 0.55);

 --radius: 22px;

}



html {

 min-height: 100%;

}



body {

 font-family: Arial, Helvetica, sans-serif;

 color: var(--text);

 min-height: 100vh;



 /* FOTO DE FONDO */

 background-image:

 linear-gradient(

 rgba(0, 0, 0, 0.28),

 rgba(0, 0, 0, 0.28)

 ),

 url("imagen/fondo.jpg");



 background-size: cover;



 /* CENTRAR LA FOTO */

 background-position: center center;



 background-repeat: no-repeat;



 /* Mantiene la imagen fija al desplazarse */

 background-attachment: fixed;

}



/* =====================================================

   CONTENEDOR PRINCIPAL

\===================================================== */



.public-page,

.admin-page {

    width: 100%;

 max-width: 1100px;

 margin: 0 auto;



 padding: 35px 20px 60px;

}



/* =====================================================

   ENCABEZADO

\===================================================== */



.hero {

 text-align: center;



 padding: 35px 15px 30px;



 color: white;



 text-shadow:

 0 2px 8px rgba(0, 0, 0, 0.75);

}



.hero-icon {

 font-size: 55px;

 margin-bottom: 8px;

}



.hero h1 {

 font-size: clamp(30px, 5vw, 48px);

 font-weight: 800;

 letter-spacing: -0.5px;

}



.hero p {

 margin-top: 5px;

 font-size: 17px;

}



/* =====================================================

   TARJETAS DE VIDRIO

\===================================================== */



.card {

 background: rgba(255, 255, 255, 0);



 /* Transparencia */

 backdrop-filter: blur(12px);

 -webkit-backdrop-filter: blur(12px);



 border: 1px solid rgba(255, 255, 255, 0.65);



 border-radius: 22px;



 box-shadow:

 0 15px 45px rgba(0, 0, 0, 0.20);



 padding: 28px;

}



/* =====================================================

   CAJA PARA SUBIR FOTOS

\===================================================== */



.upload-card {

 width: 100%;

 max-width: 720px;



 /* CENTRADA */

 margin: 0 auto 30px;

}



.upload-card h2 {

 font-size: 25px;

 margin-bottom: 7px;

}



.muted {

 color: #f1e20f;

}



/* =====================================================

   ÁREA DE SELECCIONAR ARCHIVOS

\===================================================== */



.dropzone {

 margin-top: 22px;



 min-height: 190px;



 border: 2px dashed rgba(255, 255, 255, 0.85);



 border-radius: 18px;



 display: flex;

 flex-direction: column;



 justify-content: center;

 align-items: center;



 gap: 9px;



 text-align: center;



 padding: 25px;



 cursor: pointer;



 /* Transparencia */

 background: rgba(255, 255, 255, 0.38);



 /* Desenfoque */

 backdrop-filter: blur(6px);

 -webkit-backdrop-filter: blur(6px);



 transition:

 background 0.25s ease,

 border-color 0.25s ease,

 transform 0.2s ease;

}



.dropzone:hover {

 background: rgba(255, 255, 255, 0.58);



 border-color: white;



 transform: translateY(-2px);

}




.dropzone .drop-icon {

font-size: 45px;



 color: #172033;



 font-weight: 300;

}



.dropzone strong {

 font-size: 16px;



 color: #172033;

}



.dropzone span:last-child {

 color: #596579;



 font-size: 13px;

}



#fileInput {

 display: none;

}



/* =====================================================

   ARCHIVOS SELECCIONADOS

\===================================================== */



.selected-files {

 display: grid;



 gap: 8px;



 margin: 18px 0;

}



.file-item {

 display: flex;



 align-items: center;



 justify-content: space-between;



 gap: 10px;



 border: 1px solid rgba(255, 255, 255, 0.8);



 border-radius: 12px;



 padding: 10px 12px;



 background: rgba(255, 255, 255, 0.65);



 font-size: 14px;

}



.file-name {

 overflow: hidden;



 text-overflow: ellipsis;



 white-space: nowrap;

}



.file-size {

 color: var(--muted);



 white-space: nowrap;

}



/* =====================================================

   BOTONES

\===================================================== */



.btn {

 border: 0;



 border-radius: 12px;



 padding: 12px 18px;



 font-weight: 700;



 transition:

 transform 0.15s ease,

 background 0.15s ease,

 box-shadow 0.15s ease;

}



.btn:hover:not(:disabled) {

 transform: translateY(-1px);

}



.btn:disabled {

 opacity: 0.5;



 cursor: not-allowed;

}



.primary {

 background: #172033;



 color: white;



 box-shadow:

 0 5px 15px rgba(23, 32, 51, 0.25);

}



.primary:hover:not(:disabled) {

 background: #2b3852;

}



.secondary {

 background: rgba(255, 255, 255, 0.72);



 color: #172033;



 border: 1px solid rgba(255, 255, 255, 0.7);

}



.secondary:hover:not(:disabled) {

 background: rgba(255, 255, 255, 0.95);

}



.full {

 width: 100%;



 margin-top: 18px;

}



/* =====================================================

   PROGRESO

\===================================================== */



.progress-box {

 margin-top: 18px;

}



.progress-top {

 display: flex;



 justify-content: space-between;



 font-size: 13px;


 margin-bottom: 7px;

}



.progress {

 height: 10px;



 background: rgba(255, 255, 255, 0.55);



 border-radius: 999px;



 overflow: hidden;

}



.progress div {

 height: 100%;



 width: 0;



 background: #172033;



 transition: width 0.15s;

}



.message {

 margin-top: 14px;



 min-height: 20px;



 font-size: 14px;

}



.message.success {

 color: #166534;

}



.message.error {

 color: #b91c1c;

}



/* =====================================================

   GALERÍA

\===================================================== */



.gallery-card {

 margin-top: 20px;

}



.section-head {

 display: flex;



 align-items: center;



 justify-content: space-between;



 gap: 15px;



 margin-bottom: 20px;

}



.gallery {

 display: grid;



 grid-template-columns:

 repeat(auto-fill, minmax(190px, 1fr));



 gap: 15px;

}



.media-card {

 border: 1px solid rgba(255, 255, 255, 0.65);



 border-radius: 15px;



 overflow: hidden;



 background: rgba(255, 255, 255, 0.85);



box-shadow:

 0 8px 25px rgba(0, 0, 0, 0.10);

}



.media-preview {

 aspect-ratio: 1 / 1;



 background: #111827;


 display: flex;



 align-items: center;



 justify-content: center;



 overflow: hidden;

}



.media-preview img,

.media-preview video {

 width: 100%;



 height: 100%;



 object-fit: cover;

}



.media-info {

 padding: 10px;

}



.media-name {

 font-size: 13px;



 font-weight: 700;



 overflow: hidden;



 text-overflow: ellipsis;



 white-space: nowrap;

}



.media-date {

 color: var(--muted);



 font-size: 11px;



 margin-top: 4px;

}



/* =====================================================

   ADMINISTRADOR

\===================================================== */



.auth-wrap {

 min-height: 100vh;



 display: grid;



 place-items: center;



 padding: 20px;

}



.auth-card {

 width: min(430px, 100%);

}



.auth-card input {

 width: 100%;



 padding: 13px;



 border: 1px solid rgba(255, 255, 255, 0.8);



 border-radius: 12px;



 outline: none;



 background: rgba(255, 255, 255, 0.75);

}



.auth-card input:focus {

 border-color: #172033;



 background: rgba(255, 255, 255, 0.95);

}



.auth-card label {

 display: block;



 font-size: 13px;



 font-weight: 700;



 margin-top: 18px;



 margin-bottom: 7px;

}



.back-link {

 display: inline-block;



 margin-top: 22px;



 color: white;



 text-decoration: none;



 text-shadow:

 0 2px 7px rgba(0, 0, 0, 0.8);

}



/* =====================================================

   ESTADÍSTICAS

\===================================================== */



.stats {

 display: grid;



 grid-template-columns: repeat(3, 1fr);



 gap: 15px;



 margin-bottom: 24px;

}



.stat strong {

 display: block;



 font-size: 30px;



 margin-top: 8px;
}



/* =====================================================

   ADMIN HEADER

\===================================================== */



.admin-header {

 display: flex;



 justify-content: space-between;



 align-items: center;


 gap: 15px;



 margin-bottom: 24px;



 color: white;



 text-shadow:

 0 2px 8px rgba(0, 0, 0, 0.7);

}



.admin-header h1 {

 font-size: 30px;

}



/* =====================================================

   ADMIN GALERÍA

\===================================================== */



.actions {

 display: flex;



 flex-wrap: wrap;



 gap: 8px;

}



.admin-gallery {

 display: grid;



 grid-template-columns:

repeat(auto-fill, minmax(220px, 1fr));


 gap: 15px;

}



.admin-item {

 border: 1px solid rgba(255, 255, 255, 0.7);



 border-radius: 14px;



 overflow: hidden;



 background: rgba(255, 255, 255, 0.9);

}



.admin-preview {

 aspect-ratio: 4 / 3;



 background: #111827;



 position: relative;



 overflow: hidden;

}



.admin-preview img,

.admin-preview video {

 width: 100%;



 height: 100%;



 object-fit: cover;

}



.check {

 position: absolute;



 top: 10px;



 left: 10px;



 width: 23px;



 height: 23px;



 accent-color: #172033;



 z-index: 2;

}



.admin-info {

 padding: 10px;

}



.admin-name {

 font-size: 13px;



 font-weight: 700;



 overflow: hidden;



 text-overflow: ellipsis;



 white-space: nowrap;

}



.admin-meta {

 color: var(--muted);



 font-size: 11px;



 margin: 5px 0 9px;

}



.small-actions {

 display: flex;


 gap: 6px;

}



/* =====================================================

   CELULAR

\===================================================== */



@media (max-width: 700px) {



 body {

 background-position: center center;



 background-attachment: scroll;

 }



 .public-page,

 .admin-page {

 padding: 18px 12px 40px;

 }



 .hero {

 padding-top: 25px;

 }



 .hero h1 {

font-size: 32px;

 }



 .card {

 padding: 20px;

 }



 .section-head,

 .admin-header {

 align-items: flex-start;



 flex-direction: column;

 }



 .stats {

grid-template-columns: 1fr;

 }



 .gallery {

 grid-template-columns: repeat(2, 1fr);

 }



 .admin-gallery {

 grid-template-columns: 1fr;

 }



 .actions {

 width: 100%;

 }



 .actions .btn {

 flex: 1;

 }

}
.hidden { display: none !important; }