/* === Estilos específicos para acceder.jsp === */

/* Caja de salida (#out) */
#out,
.out {
  display: block;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(7,19,43,.72);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  word-break: break-word;
  z-index: 2;
}

/* Ocultar si está vacío */
#out:empty,
.out:empty {
  display: none !important;
}

/* Estados de mensaje */
#out.error,
.out--error {
  background: rgba(255, 107, 107, .12);
  border-color: rgba(255, 107, 107, .45);
  color: #FFE9EA;
}

#out.ok,
.out--ok {
  background: rgba(35, 208, 181, .12);
  border-color: rgba(35, 208, 181, .45);
  color: #E9FFFB;
}

/* Enlaces dentro del mensaje */
#out a,
.out a {
  color: var(--accent);
  text-decoration: underline;
}

#out a:hover,
.out a:hover {
  text-shadow: 0 0 8px rgba(46,247,209,.35);
}

/* separa el botón del texto dentro del párrafo inferior */
.centered-form p .btn--exit {
  margin-left: 12px; /* o 16px si quieres más aire */
}




/* Animación del gradiente */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



/* === Botón “Seleccionar archivo” (con hover real) === */
input[type="file"]::file-selector-button,
input[type="file"]::file-upload-button {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #07242B;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, filter .2s ease, border-color .2s ease;
}

/* Hover/Focus: aplicar en el INPUT y proyectar al pseudo-elemento */
input[type="file"]:hover::file-selector-button,
input[type="file"]:focus::file-selector-button,
input[type="file"]:focus-visible::file-selector-button,
input[type="file"]:hover::file-upload-button,
input[type="file"]:focus::file-upload-button,
input[type="file"]:focus-visible::file-upload-button {
  filter: brightness(1.06);
  border-color: var(--accent);
}

/* Active (click) */
input[type="file"]::file-selector-button:active,
input[type="file"]::file-upload-button:active {
  transform: scale(0.98);
}




/* === Botón “Seleccionar archivo” — igual que .btn--primary pero texto más compacto === */
.centered-form input[type="file"] {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

/* Estado base */
.centered-form input[type="file"]::file-selector-button,
.centered-form input[type="file"]::-webkit-file-upload-button {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #07242B;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 9px 20px;          /* ↓ un poco menos alto y ancho */
  font-size: 14px;            /* ↓ antes 15px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s ease;
  background-size: 300% 300%;
}

/* Hover/focus → igual que .btn--primary:hover */
.centered-form input[type="file"]:hover::file-selector-button,
.centered-form input[type="file"]:focus::file-selector-button,
.centered-form input[type="file"]:hover::-webkit-file-upload-button,
.centered-form input[type="file"]:focus::-webkit-file-upload-button {
  background-color: #07242B;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(270deg, var(--accent), var(--accent-2), var(--accent));
  background-clip: text;
  -webkit-background-clip: text;
  border-color: var(--accent);
  animation: gradientMove 3s ease infinite;
  box-shadow: 0 0 10px rgba(46,247,209,0.25);
}

/* Active (click) */
.centered-form input[type="file"]::file-selector-button:active,
.centered-form input[type="file"]::-webkit-file-upload-button:active {
  transform: scale(0.97);
  box-shadow: 0 0 4px rgba(46,247,209,0.15);
}

/* Animación de gradiente (reutilizada) */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* === Texto al lado del botón “Seleccionar archivo” === */
.centered-form input[type="file"] {
  font-size: 14px;        /* ↓ más pequeño que el botón */
  color: rgba(255,255,255,0.85); /* texto claro, no puro blanco */
  font-weight: 400;
}

/* En hover o focus, mantenemos consistencia */
.centered-form input[type="file"]:hover,
.centered-form input[type="file"]:focus {
  color: rgba(255,255,255,0.9);
}


.reg-logo{
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* En acceder.jsp: separar 20px extra el párrafo inferior del resto */
.centered-form > p.mt-20 {
  margin-top: 40px !important; /* 20px original + 20px extra */
}


/* === Selector de idioma (index.jsp) === */
.lang-switch {
  position: fixed;         /* esquina superior derecha */
  top: 20px;
  right: 26px;
  z-index: 999;
  margin: 0;
}

.lang-select {
  background: rgba(20,25,45,.75); /* translúcido, coherente con las cards */
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: #2ef7d1;
  font-size: 14px;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(46,247,209,.25);
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lang-select:hover,
.lang-select:focus {
  border-color: #2ef7d1;
  box-shadow: 0 0 10px rgba(46,247,209,.35);
}

.lang-select option {
  background: rgba(10,15,30,.95);
  color: #fff;
}

/* Responsive: baja el selector un poco en pantallas pequeñas */
@media (max-width: 600px) {
  .lang-switch { top: 12px; right: 16px; }
  .lang-select { font-size: 13px; padding: 5px 8px; }
}


/* === Selector de idioma dentro del contenedor central === */
.lang-switch-inner {
  position: absolute;
  top: 18px;
  right: 22px;
  margin: 0;
  z-index: 10;
}

.lang-select-inner {
  background: rgba(20,25,45,.75);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: #2ef7d1;
  font-size: 14px;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(46,247,209,.25);
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lang-select-inner:hover,
.lang-select-inner:focus {
  border-color: #2ef7d1;
  box-shadow: 0 0 10px rgba(46,247,209,.35);
}

.lang-select-inner option {
  background: rgba(10,15,30,.95);
  color: #fff;
}

/* Asegura que .centered-form permite posicionamiento relativo */
.centered-form {
  position: relative;
}