body {
  background-image: url("../Backend/img/img_fondo/img.webp");
  background-size: 100% 100%;
  background-attachment: fixed;
  background-repeat: no-repeat; 
  font-family: sans-serif;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  gap: 20px;
  }

.card { 
  /* text-align: center; */
  background: rgba(255, 255, 255, 0.263); 
  padding: 20px; 
  border-radius: 8px; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

#vistaPrevia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  width: auto; 
  margin-top: 10px; 
  border-radius: 5px; 
}


button { 
  background: #28a745; 
  color: white; 
  border: none; 
  padding: 10px 15px; 
  cursor: pointer; 
  border-radius: 4px; 
}

/* // Galeria // */
 #bodyGaleria {
  font-family: sans-serif;
  background: linear-gradient(rgba(0, 255, 255, 0.414), rgba(2, 253, 102, 0.427)),
    url("img/img.webp");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: 20px;
 }

 .galeria {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 20px;
 }

 .item-foto {
   background: rgba(155, 247, 228, 0.21);
   padding: 10px;
   border-radius: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   text-align: center;
   overflow-wrap: break-word;
 }

 .item-foto img {
   max-width: 100%;
   height: 30vh;
   object-fit:contain;
   border-radius: 4px;
 }

 #h2Galeria {
   border-bottom: 2px solid #333;
   padding-bottom: 10px;
 }

 .btn-volver {
   display: inline-block;
   margin-bottom: 20px;
   text-decoration: none;
   color: blue;
 }
 #p-Galeria{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp:1;
    margin:2px 0;
    /* Número de líneas antes de los puntos */
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #025115;
 }


 /* boton de seleccionar foto */
 /* Escondemos el input original pero que siga siendo funcional */
 #imagen {
   display: none;
 }

 /* Diseñamos el nuevo botón */
 .btn-personalizado {
   display: inline-block;
   padding: 10px 20px;
   background-color: #008080;
   /* Un verde agua/mar como la temática */
   color: rgba(255, 255, 255, 0.485);
   border-radius: 25px;
   cursor: pointer;
   font-family: 'Arial', sans-serif;
   transition: background 0.3s ease;
   border: 2px solid transparent;
 }

 .btn-personalizado:hover {
   background-color: #005f5f;
   border-color: #ffffff74;
 }

 /* Estilo para el texto del nombre del archivo */
 #file-name {
   margin-left: 10px;
   font-size: 14px;
   color: #555;
   font-style: italic;
 }

 /* input de bloqueo de activacion de eliminar */
 .admin-access {
   max-width: 300px;
  display: grid;
  place-items: center;
   margin: 5px auto;
   padding: 10px;
   background: #fcfcfc65;
   border-radius: 15px;
   box-shadow: 0 4px 6px rgba(4, 243, 115, 0.588);
 }

 .pass-form {
  background-color: #fcfdfd43;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: center;
 }

 .input-group {
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, 0.548);
   border: 2px solid #e0e0e08d;
   border-radius: 10px;
   padding: 5px 12px;
   transition: border-color 0.3s;
 }

 .input-group:focus-within {
   border-color: #00b4db;
   /* Cambia al color de tu temática */
 }

 .pass-input {
   border: none;
   outline: none;
   padding: 2px;
   font-size: .8em;
   width: 5rem;
 }

 .pass-icon {
   font-size: 14px;
 }

 .btn-activate {
   background: #343a4077;
   color: white;
   border: none;
   padding: 5px 10px;
   border-radius: 10px;
   cursor: pointer;
   font-weight: 400;
   transition: background 0.3s;
 }

 .btn-activate:hover {
   background: #000;
 }