/* Escenario fotográfico de la página pública */
.foto-escenario{
  position:relative;
  height:330px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(189,142,81,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(140,72,136,0.2) 0%, transparent 55%),
    linear-gradient(145deg, #F5EDE8 0%, #FDF3E8 40%, #FFFDF8 100%);
  isolation:isolate;
}

.foto-escenario:before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(140,72,136,0.05) 35%, rgba(140,72,136,0.12) 100%),
    linear-gradient(110deg, rgba(211,173,56,0.15), transparent 48%);
  box-shadow:inset 0 0 0 1px rgba(211,173,56,0.2);
}

.foto-escenario:after{
  content:'✦  ✧  ✦';
  position:absolute; z-index:2; right:18px; bottom:12px;
  color:var(--dorado-claro);
  font:18px Georgia; letter-spacing:5px;
  text-shadow:0 1px 5px rgba(140,72,136,0.5);
  pointer-events:none;
}

.foto-escenario .foto{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 25%;
  background:#E8E0D8;
  filter:saturate(1.1) contrast(1.04) brightness(1.03);
  transform:scale(1.015);
  transition:transform .65s ease, filter .4s ease;
}

.foto-escenario:hover .foto{
  transform:scale(1.06);
  filter:saturate(1.19) contrast(1.07) brightness(1.06);
}

.foto-escenario .sin-foto{height:100%}

@media(max-width:720px){.foto-escenario{height:290px}}

/* Estado previo al inicio: comunica claramente que aún no se puede votar. */
.votacion-no-disponible{
  display:flex; align-items:center; gap:12px; text-align:left;
  margin:18px 0 0; padding:15px 17px;
  border:1px solid var(--dorado);
  border-radius:12px;
  background:linear-gradient(135deg, #FFF8F0, #FDE8C7);
  color:#6B366B;
  box-shadow:0 5px 14px rgba(189,142,81,0.2);
}

.votacion-no-disponible:before{
  content:'♕';
  display:grid; place-items:center;
  flex:0 0 34px; height:34px; border-radius:50%;
  background:var(--dorado); color:#fff;
  font:22px Georgia;
  box-shadow:0 2px 7px rgba(189,142,81,0.4);
}

.votacion-no-disponible strong{display:block;color:var(--purpura-profundo);margin-bottom:2px}

/* Pantalla pública de mantenimiento. */
.mantenimiento{max-width:650px;margin:48px auto;text-align:center;overflow:hidden;padding:0}
.mantenimiento-imagen{display:block;width:100%;height:260px;object-fit:cover;background:#F5EDE8}
.mantenimiento-contenido{padding:28px 30px 32px}
.mantenimiento-contenido h1{margin:0 0 12px;color:var(--purpura-profundo)}
.mantenimiento-contenido p{margin:0;color:var(--gris);line-height:1.65}
.mantenimiento-reapertura{margin:22px 0 0;padding:14px 16px;border:1px solid var(--dorado);border-radius:12px;background:#FFF8F0;color:var(--purpura-profundo)}
.mantenimiento-reapertura strong{display:block;margin-top:3px;font-size:20px;color:var(--dorado-oscuro)}
@media(max-width:720px){.mantenimiento{margin:28px auto}.mantenimiento-imagen{height:200px}.mantenimiento-contenido{padding:24px 20px}}

/* ============================================================
   EDITOR DE FOTO - Gestión de Candidatas
   ============================================================ */
.editor-foto{
  display:grid;
  grid-template-columns:minmax(280px,380px) 1fr;
  gap:24px;
  align-items:start;
  margin:16px 0 24px;
  padding:20px;
  border:1px solid var(--borde);
  border-radius:16px;
  background:linear-gradient(145deg, #FFFDF8 0%, #FDF3E8 100%);
  box-shadow:0 2px 8px var(--sombra), inset 0 1px 0 rgba(255,255,255,0.8);
}

.marco-foto{
  position:relative;
  height:300px;
  overflow:hidden;
  border-radius:12px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(189,142,81,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(140,72,136,0.15) 0%, transparent 55%),
    linear-gradient(135deg, #E8E0D8 0%, #D0C8C0 50%, #B8B0A8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    inset 0 2px 8px rgba(140,72,136,0.08),
    0 8px 24px rgba(140,72,136,0.12);
  cursor:grab;
  touch-action:none;
  border:2px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease, background .3s ease;
}

.marco-foto:hover{
  border-color:var(--dorado);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    inset 0 2px 8px rgba(140,72,136,0.1),
    0 12px 32px rgba(189,142,81,0.18);
}

.marco-foto.arrastrando{
  cursor:grabbing;
  border-color:var(--purpura);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    0 0 0 3px rgba(140,72,136,0.15),
    0 16px 40px rgba(140,72,136,0.2);
}

.marco-foto:after{
  content:'ARRASTRA LA IMAGEN PARA CENTRAR EL ROSTRO';
  position:absolute; inset:auto 16px 16px; text-align:center;
  color:#fff; font:600 11px/1.3 Montserrat; letter-spacing:.5px;
  text-shadow:0 1px 3px rgba(140,72,136,0.9);
  pointer-events:none; opacity:.85; transition:opacity .2s ease;
}

.marco-foto:hover:after{opacity:1}
.marco-foto.arrastrando:after{content:'SUELTA PARA FIJAR LA POSICIÓN';opacity:1}

.marco-foto img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  user-select:none; pointer-events:none;
  transition:transform .4s cubic-bezier(0.25,0.46,0.45,0.94), filter .3s ease, object-position .1s linear;
  transform-origin:center center;
}

.marco-foto:hover img{
  transform:scale(1.05);
  filter:brightness(1.05) saturate(1.08);
}

.marco-foto.arrastrando img{transform:scale(1.02)}

/* Guías de centrado visual */
.marco-foto::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,0) 48%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 52%),
    linear-gradient(90deg, rgba(255,255,255,0) 48%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 52%);
  background-size:100% 100%, 100% 100%;
  opacity:0; transition:opacity .2s ease;
}

.marco-foto:hover::before,
.marco-foto.arrastrando::before{opacity:1}

/* Indicador de posición actual (pequeño punto en el centro) */
.marco-foto .punto-centro{
  position:absolute; top:50%; left:50%;
  width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  border:2px solid var(--purpura);
  box-shadow:0 0 0 2px rgba(255,255,255,0.8);
  pointer-events:none; z-index:2; opacity:0; transition:opacity .2s ease;
}

.marco-foto.arrastrando .punto-centro{opacity:1}

.controles-foto{
  display:flex; flex-direction:column; gap:14px;
  color:#5A6A8A; padding:4px 8px 8px;
}

.controles-foto h3{
  margin:0 0 4px;
  font-family:'Playfair Display',serif;
  color:var(--purpura);
  font-size:22px; font-weight:600;
}

.controles-foto .ayuda{
  margin:0; color:var(--gris); font-size:13px; line-height:1.5;
}

.controles-foto .ayuda strong{color:var(--rosa)}

.posicion-actual{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(140,72,136,0.06);
  border:1px solid rgba(140,72,136,0.12);
  border-radius:10px;
  font-size:13px; font-family:Montserrat,monospace;
}

.posicion-actual label{
  display:flex; align-items:center; gap:6px;
  color:#5A6A8A; font-weight:500; white-space:nowrap;
}

.posicion-actual input{
  flex:1; padding:6px 10px;
  border:1px solid rgba(140,72,136,0.2);
  border-radius:6px; background:#fff; color:var(--purpura);
  font-family:inherit; font-size:13px; text-align:center;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.posicion-actual input:focus{
  outline:none; border-color:var(--purpura);
  box-shadow:0 0 0 3px rgba(140,72,136,0.15);
}

.btn-centrar{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border:1px solid var(--dorado); border-radius:8px;
  background:linear-gradient(135deg, #FFF8E8, #FFE8B0);
  color:#7A5A00; font:600 12px Montserrat; cursor:pointer;
  transition:all .2s ease;
}

.btn-centrar:hover{
  background:linear-gradient(135deg, #FFE8B0, #FFD87A);
  border-color:var(--dorado-oscuro);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(189,142,81,0.3);
}

.btn-centrar:active{transform:translateY(0)}

.guia-enfoque{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:rgba(189,142,81,0.1);
  border:1px solid rgba(189,142,81,0.25);
  border-radius:8px;
  color:#8B6313; font-size:12px; font-weight:600; line-height:1.4;
}

.guia-enfoque:before{content:'✦'; font-size:18px; color:var(--dorado); flex-shrink:0}

/* Selector de modo de imagen */
.modo-imagen-selector{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--borde);
}

.modo-imagen-selector label{
  display:block; margin-bottom:8px;
  color:#5A6A8A; font-weight:600; font-size:14px;
}

.modo-imagen-selector select{
  width:100%; padding:10px 14px;
  border:1px solid var(--dorado); border-radius:8px;
  background:#FFFDF8; color:var(--purpura);
  font:14px Montserrat; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BD8E51' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:40px;
}

.modo-imagen-selector select:focus{
  outline:none; border-color:var(--purpura);
  box-shadow:0 0 0 3px rgba(140,72,136,0.15);
}

.modo-imagen-selector .ayuda-modo{
  display:block; margin-top:6px; color:var(--gris); font-size:12px; line-height:1.4;
}

/* Vista previa del modo de imagen */
.modo-preview{
  margin-top:16px; padding:16px;
  background:#F8F5ED; border:1px solid var(--borde); border-radius:12px;
}

.preview-label{
  font-weight:600; color:#5A6A8A; margin-bottom:10px; font-size:13px;
}

.preview-marcar{
  position:relative; width:100%; max-width:320px; aspect-ratio:4/3;
  border-radius:10px; overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(189,142,81,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(140,72,136,0.2) 0%, transparent 55%),
    linear-gradient(145deg, #F5EDE8 0%, #FDF3E8 40%, #FFFDF8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(211,173,56,0.2),
    inset 0 0 60px rgba(140,72,136,0.15),
    0 8px 24px rgba(140,72,136,0.15);
}

.preview-marcar::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 50%),
    linear-gradient(0deg, rgba(189,142,81,0.04) 0%, transparent 30%);
}

.preview-marcar img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  transition:transform .6s cubic-bezier(0.25,0.46,0.45,0.94), filter .4s ease;
  transform-origin:center center;
}

.preview-marcar:hover img{
  transform:scale(1.12);
  filter:brightness(1.1) saturate(1.15) contrast(1.05);
}

/* Modos en preview */
.preview-marcar.foto-modo-contain img{object-fit:contain}
.preview-marcar.foto-modo-cover img{object-fit:cover}
.preview-marcar.foto-modo-fill img{object-fit:fill}
.preview-marcar.foto-modo-scale-down img{object-fit:scale-down}
.preview-marcar.foto-modo-none img{object-fit:none}

/* Hover específico por modo */
.preview-marcar.foto-modo-contain:hover img,
.preview-marcar.foto-modo-scale-down:hover img{transform:scale(1.08);}
.preview-marcar.foto-modo-cover:hover img{transform:scale(1.15);}
.preview-marcar.foto-modo-fill:hover img{transform:scale(1.04);}
.preview-marcar.foto-modo-none:hover img{transform:scale(1.02);}

.preview-info{
  display:flex; align-items:center; gap:10px; margin-top:10px;
  padding:8px 12px; background:#fff; border:1px solid var(--borde); border-radius:8px; font-size:12px;
}

.preview-modo{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px;
  background:linear-gradient(135deg, var(--purpura), var(--purpura-profundo));
  color:#fff; border-radius:6px; font-weight:600; font-family:monospace; font-size:11px; text-transform:uppercase;
}

.preview-desc{color:var(--gris); font-style:italic;}

@media(max-width:720px){
  .editor-foto{grid-template-columns:1fr}
  .marco-foto{height:280px}
  .controles-foto{padding:0}
}