/* =========================================== */
/* ESTILOS GENERALES */
/* =========================================== */
:root{
      --color-principal: #c62828;   /* rojo */
      --color-secundario: #1b1b1b;  /* negro */
      --color-acento: #f4c20d;      /* dorado */
      --color-texto: #ffffff;      /* blanco */
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, var(--color-principal), var(--color-secundario));
      color: var(--color-texto);
      text-align: center;
    }

    header {
      padding: 20px 10px 10px 10px;
    }

    header h1 {
      margin: 10px 0 5px 0;
      font-size: 2rem;
      color: var(--color-acento);
      text-shadow: 1px 1px 3px black;
    }

    header h2 {
      margin: 5px 0 20px 0;
      font-weight: normal;
      font-size: 1.1rem;
      opacity: 0.95;
    }

    .escudo {
      width: 140px;
      margin: 10px auto 20px auto;
      display: block;
      filter: drop-shadow(0 0 8px black);
    }

    .webcams {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 15px;
      padding: 20px;
      max-width: 1100px;
      margin: auto;
    }

    .webcams img {
      width: 100%;
      border-radius: 12px;
      cursor: pointer;
      border: 3px solid var(--color-acento);
      box-shadow: 0 6px 15px rgba(0,0,0,0.6);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .webcams img:hover {
      transform: scale(1.02);
      box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    }

    footer {
      margin-top: 20px;
      padding: 15px;
      font-size: 0.95rem;
      background: rgba(0,0,0,0.4);
    }

    .contador {
      margin-top: 8px;
      font-weight: bold;
      color: var(--color-acento);
    }

    .btn-galeria {
      display: inline-block;
      padding: 10px 18px;
      background: var(--color-acento);
      color: black;
      font-weight: bold;
      border-radius: 8px;
      text-decoration: none;
      box-shadow: 0 4px 10px rgba(0,0,0,0.6);
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: inherit;
      transition: all 0.2s ease;
    }

    .btn-galeria:hover {
      background: #ffd700;
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.7);
    }

    /* MODAL MEJORADO CON ZOOM Y ARRASTRE */
    .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.98);
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .contenedor-imagen-modal {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    #imagenModal {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      cursor: pointer;
      border-radius: 8px;
      transition: transform 0.3s ease;
      transform-origin: center center;
    }

    #imagenModal.zoom-activado {
      cursor: move;
    }

    .cerrar {
      position: absolute;
      top: 20px;
      right: 25px;
      font-size: 30px;
      font-weight: bold;
      color: var(--color-texto);
      cursor: pointer;
      background: rgba(244, 194, 13, 0.9);
      color: #000;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10001;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }

    .cerrar:hover {
      background: #ffd700;
      transform: scale(1.1);
    }

    .controles-zoom {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.8);
      padding: 10px 20px;
      border-radius: 8px;
      display: flex;
      gap: 15px;
      z-index: 10001;
      backdrop-filter: blur(10px);
      border: 2px solid var(--color-acento);
    }

    .btn-zoom {
      background: var(--color-acento);
      color: #000;
      border: none;
      border-radius: 6px;
      padding: 8px 15px;
      font-weight: bold;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s ease;
    }

    .btn-zoom:hover {
      background: #ffd700;
      transform: translateY(-2px);
    }

    .info-zoom {
      color: var(--color-acento);
      font-weight: bold;
      display: flex;
      align-items: center;
      padding: 0 10px;
      min-width: 80px;
      justify-content: center;
    }

    /* Indicador de zoom */
    .indicador-zoom {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(0,0,0,0.8);
      color: var(--color-acento);
      padding: 8px 15px;
      border-radius: 8px;
      font-size: 0.9rem;
      z-index: 10001;
      backdrop-filter: blur(10px);
      border-left: 4px solid var(--color-acento);
      display: none;
    }
	
	.btn-galeria[href="admin/index.php"] {
    background: #4CAF50;
    position: relative;
    padding-left: 40px;
}

	.btn-galeria[href="admin/index.php"]:before {
		content: "🔧";
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

	.btn-galeria[href="admin/index.php"]:hover {
		background: #45a049;
	}