/* ============================================================
   ÁLBUM MUNDIAL — estilo inspirado en apple.com (v7)
   Base: blanco, gris perla (#f5f5f7) y negro. Tipografía del
   sistema (SF Pro en Apple, Inter como respaldo), títulos grandes
   y compactos, botones tipo píldora azul y barra translúcida.
   El color aparece en detalles: el acento de cada hoja, la
   figurita pegada, el brillo de la portada y los puntos de las
   tarjetas.
   ============================================================ */

* { box-sizing: border-box; }

:root {
    --texto: #1d1d1f;
    --tenue: #6e6e73;
    --fondo: #ebebef;
    --perla: #ffffff;
    --linea: #d2d2d7;
    --negro: #000000;

    --azul: #cf4a4a;
    --azul-hover: #d95a5a;
    --link: #b83b3b;
    --azul-claro: #2997ff;   /* links y botones sobre fondo negro */
    --rojo: #d70015;         /* solo para borrar */
    --verde: #248a3d;

    --hoja: var(--azul);     /* lo pisa cada hoja en el visor */

    --radio: 28px;
    --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter",
              "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -.011em;
    color: var(--texto);
    background: var(--fondo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 4px solid rgba(207, 74, 74, .5); outline-offset: 1px; }

h1, h2, h3 { color: var(--texto); line-height: 1.1; letter-spacing: -.022em; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 8px 0 14px; letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 56px 0 20px; }
h3 { font-size: 1.5rem; margin: 0 0 8px; letter-spacing: -.015em; }

.meta { color: var(--tenue); font-size: .85rem; }

/* ============================================================
   Barra superior — translúcida, como la de Apple
   ============================================================ */
.topbar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(245, 245, 247, .85);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--texto);
    padding: 0 24px; min-height: 48px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 4px 16px;
}
.topbar .logo {
    color: var(--texto); font-weight: 600; font-size: .95rem;
    display: inline-flex; align-items: center; gap: 10px;
}
.topbar .logo:hover { text-decoration: none; }
.logo-marca {
    width: 16px; height: 16px; display: inline-block; border-radius: 5px;
    background: conic-gradient(from 200deg, #ff9f0a, #ff375f, #bf5af2, #0a84ff, #30d158, #ff9f0a);
}
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 26px; }
.topbar nav a { color: rgba(29, 29, 31, .8); font-size: .8rem; padding: 12px 0; transition: color .15s ease; }
.topbar nav a:hover { color: #000; text-decoration: none; }
.usuario-info { color: #6e6e73; font-size: .8rem; }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 16px 20px 56px; flex: 1; }

/* ============================================================
   Botones — píldoras
   ============================================================ */
.btn, form.formulario button {
    display: inline-block;
    background: var(--azul); color: #fff;
    border: 1px solid var(--azul); border-radius: 980px;
    padding: 8px 20px;
    font: inherit; font-size: .95rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.3;
    cursor: pointer; text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover, form.formulario button:hover { background: var(--azul-hover); border-color: var(--azul-hover); color: #fff; text-decoration: none; }
.btn:active, form.formulario button:active { opacity: .85; }
form.formulario button { margin-top: 24px; }

/* "Learn more": contorno azul */
.btn.secundario { background: transparent; color: var(--link); border-color: var(--link); }
.btn.secundario:hover { background: var(--link); color: #fff; border-color: var(--link); }

/* Sobre fondo negro */
.btn.contorno { background: transparent; color: var(--link); border-color: var(--link); }
.btn.contorno:hover { background: var(--link); color: #fff; border-color: var(--link); }

.btn.peligro { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.btn.peligro:hover { background: var(--rojo); color: #fff; border-color: var(--rojo); }

.btn.chico { padding: 4px 14px; font-size: .85rem; }

/* ============================================================
   Tarjetas — gris perla, esquinas grandes, sin bordes
   ============================================================ */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tarjeta {
    background: var(--perla);
    border-radius: var(--radio);
    padding: 32px 28px 30px;
    transition: transform .3s ease;
}
.tarjeta::before {
    content: ""; display: block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--azul); margin-bottom: 16px;
}
.tarjetas .tarjeta:nth-child(6n+2)::before { background: #30b350; }
.tarjetas .tarjeta:nth-child(6n+3)::before { background: #ff9f0a; }
.tarjetas .tarjeta:nth-child(6n+4)::before { background: #ff375f; }
.tarjetas .tarjeta:nth-child(6n+5)::before { background: #bf5af2; }
.tarjetas .tarjeta:nth-child(6n+6)::before { background: #5ac8fa; }
.tarjeta:hover { transform: scale(1.015); }
.tarjeta p { margin: 0 0 8px; color: var(--texto); }
.tarjeta p.meta { color: var(--tenue); }
.tarjeta .btn { margin-top: 14px; margin-right: 8px; }

/* Portada de la tarjeta de álbum */
.tarjeta.con-portada::before { display: none; }
.tarjeta-portada {
    position: relative; overflow: hidden;
    margin: -32px -28px 22px; aspect-ratio: 16 / 10;
    border-radius: var(--radio) var(--radio) 0 0;
    background: #f1f1f4;
}
.tarjeta-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada-form { margin: 0; }
.portada-form input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
/* con portada: botón de cámara redondo arriba a la derecha */
.tarjeta-portada:not(.vacia) .portada-form label {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, .95); color: var(--texto); cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.tarjeta-portada:not(.vacia) .portada-form label:hover { background: var(--azul); color: #fff; transform: scale(1.08); }
/* sin portada: toda el área es un botón "Agregar portada" */
.tarjeta-portada.vacia { background: #f5f5f7; border-bottom: 1px dashed #c7c7cc; }
.tarjeta-portada.vacia .portada-form label {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--tenue); font-size: .85rem; font-weight: 500; cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.tarjeta-portada.vacia .portada-form label:hover { background: #ececf0; color: var(--azul); }
.portada-form:focus-within label { outline: 3px solid rgba(207, 74, 74, .5); outline-offset: -3px; }
.portada-form.subiendo label { opacity: .5; pointer-events: none; }
.foto-preview.foto-preview-ancha { width: 100%; max-width: 320px; aspect-ratio: 16 / 10; }

/* ============================================================
   Formularios
   ============================================================ */
form.formulario {
    background: var(--perla);
    border-radius: var(--radio);
    padding: 36px 32px;
    max-width: 560px;
}
form.formulario label { display: block; margin-top: 20px; font-weight: 600; font-size: .95rem; }
form.formulario label:first-of-type { margin-top: 0; }
form.formulario input, form.formulario select, form.formulario textarea {
    width: 100%; padding: 12px 14px; margin-top: 8px;
    background: #f5f5f7; color: var(--texto);
    border: 1px solid var(--linea); border-radius: 12px;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
form.formulario input::placeholder, form.formulario textarea::placeholder { color: #86868b; }
form.formulario input:focus, form.formulario select:focus, form.formulario textarea:focus {
    outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(207, 74, 74, .2);
}
form.formulario input[type="checkbox"] { width: auto; accent-color: var(--azul); margin-right: 8px; }
form.formulario input[type="file"] { padding: 10px; border-style: dashed; cursor: pointer; }
form.formulario small.ayuda { display: block; margin-top: 8px; color: var(--tenue); font-size: .8rem; }
form.formulario hr, hr.separador { margin: 26px 0; border: none; border-top: 1px solid var(--linea); }
form.formulario .check-linea { font-weight: 400; }

.form-botones { display: flex; flex-wrap: wrap; gap: 10px; }
form.formulario .form-botones button { margin-top: 24px; }
form.formulario button.boton-secundario { background: transparent; color: var(--link); border-color: var(--link); }
form.formulario button.boton-secundario:hover { background: var(--link); color: #fff; }
.form-quitar-foto { margin: 18px 0; }

/* Vista previa de la foto de una figurita */
.foto-preview {
    width: 150px; aspect-ratio: 3 / 4; margin: 0 0 18px;
    display: grid; place-items: center; text-align: center;
    background: #f5f5f7; border: 1.5px dashed #c7c7cc; border-radius: 18px; overflow: hidden;
    color: var(--tenue); font-size: .85rem; padding: 8px;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Tablas (panel de administración)
   ============================================================ */
table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 12px;
    background: var(--perla); border-radius: 20px; overflow: hidden;
}
table th, table td { padding: 14px 16px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
table tr:last-child td { border-bottom: none; }
table th { background: #f5f5f7; color: var(--tenue); font-size: .8rem; font-weight: 600; white-space: nowrap; }
table tbody tr:hover td, table tr:hover td { background: #fafafc; }
table select { background: #fff; color: var(--texto); border: 1px solid var(--linea); padding: 5px 8px; font: inherit; border-radius: 8px; }
table button {
    background: transparent; color: var(--link); border: 1px solid var(--link);
    padding: 4px 14px; font: inherit; font-size: .85rem; cursor: pointer; border-radius: 980px;
}
table button:hover { background: var(--link); color: #fff; }

td.res-ok { color: #1b7a38; font-weight: 600; }
td.res-error, td.res-ambigua { color: #b3261e; }
td.res-omitida, td.res-sin_coincidencia { color: var(--tenue); }
details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

/* ============================================================
   Alertas
   ============================================================ */
.alerta { padding: 14px 18px; margin-bottom: 20px; border-radius: 14px; background: var(--perla); }
.alerta.error { background: #fff0f1; color: #86000f; }
.alerta.exito { background: #eaf7ee; color: #14501f; }

/* ============================================================
   Aparición suave al hacer scroll (JS agrega .visible)
   ============================================================ */
.pre-reveal { opacity: 0; }
.pre-reveal.visible { animation: revelar .5s ease forwards; }
@keyframes revelar { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   HOME - Portada negra con brillo de colores
   ============================================================ */
.hero {
    position: relative; overflow: hidden; text-align: center;
    color: var(--texto);
    background:
        radial-gradient(ellipse 50% 55% at 50% 108%, rgba(10, 132, 255, .38), transparent 72%),
        radial-gradient(ellipse 36% 50% at 16% 104%, rgba(191, 90, 242, .3), transparent 72%),
        radial-gradient(ellipse 36% 50% at 84% 104%, rgba(255, 55, 95, .28), transparent 72%),
        #ffffff;
    border-radius: var(--radio);
    padding: 76px 24px 150px;
    margin-bottom: 16px;
}
.hero > * { position: relative; z-index: 1; }
/* fila de figuritas de colores al pie de la portada */
.hero::after {
    content: ""; position: absolute; z-index: 0; left: 50%; bottom: 34px;
    width: 430px; max-width: 90%; height: 64px; transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 64'%3E%3Crect x='2' y='4' width='44' height='58' rx='9' fill='%230a84ff'/%3E%3Crect x='64' y='4' width='44' height='58' rx='9' fill='none' stroke='%2386868b' stroke-opacity='.8' stroke-width='2' stroke-dasharray='5 5'/%3E%3Crect x='126' y='4' width='44' height='58' rx='9' fill='%2330d158'/%3E%3Crect x='188' y='4' width='44' height='58' rx='9' fill='%23ff9f0a'/%3E%3Crect x='250' y='4' width='44' height='58' rx='9' fill='none' stroke='%2386868b' stroke-opacity='.8' stroke-width='2' stroke-dasharray='5 5'/%3E%3Crect x='312' y='4' width='44' height='58' rx='9' fill='%23ff375f'/%3E%3Crect x='374' y='4' width='44' height='58' rx='9' fill='%23bf5af2'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.hero h1 { color: var(--texto); font-size: clamp(2.2rem, 6vw, 4rem); max-width: 16ch; margin: 0 auto 14px; letter-spacing: -.035em; }
.hero p { margin: 0 auto 26px; color: #6e6e73; max-width: 46ch; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.3; }
.hero .hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   Buscador
   ============================================================ */
.buscador-wrap { margin: 0 0 24px; position: relative; max-width: 440px; }
.buscador-wrap input {
    width: 100%; padding: 12px 18px 12px 46px;
    background: var(--perla); color: var(--texto);
    border: 1px solid transparent; border-radius: 14px;
    font: inherit; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.buscador-wrap input::placeholder { color: #86868b; }
.buscador-wrap input:focus { outline: none; background: #fff; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(207, 74, 74, .2); }
.buscador-wrap::before {
    content: ""; position: absolute; left: 16px; top: 50%;
    width: 18px; height: 18px; transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#buscador-sin-resultados { display: none; color: var(--tenue); }

/* ---- Carrusel de destacados ---- */
.carrusel-destacados { background: var(--perla); border-radius: var(--radio); margin-bottom: 12px; overflow: hidden; }
.carrusel-destacados .slide { display: none; padding: 48px 40px 18px; gap: 20px; align-items: center; justify-content: center; text-align: center; }
.carrusel-destacados .slide.activo { display: flex; animation: revelar .4s ease; }
.carrusel-destacados .slide-info { max-width: 62ch; }
.carrusel-destacados .slide-info h3 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 10px; letter-spacing: -.025em; }
.carrusel-destacados .slide-info p { margin: 0 0 10px; }
.carrusel-destacados .slide-info p.meta { color: var(--tenue); }
.carrusel-nav { display: flex; justify-content: space-between; align-items: center; padding: 6px 24px 24px; }
.carrusel-nav button {
    background: rgba(210, 210, 215, .64); color: var(--texto); border: none; border-radius: 50%;
    width: 36px; height: 36px; cursor: pointer; font-size: .85rem;
    transition: background-color .2s ease;
}
.carrusel-nav button:hover { background: rgba(190, 190, 197, .9); }
.carrusel-puntos { display: flex; gap: 8px; padding: 9px 12px; border-radius: 980px; background: rgba(210, 210, 215, .64); }
.carrusel-puntos span { width: 8px; height: 8px; border-radius: 50%; background: #86868b; opacity: .5; display: inline-block; cursor: pointer; transition: opacity .2s ease, background-color .2s ease; }
.carrusel-puntos span:hover { opacity: .8; }
.carrusel-puntos span.activo { background: var(--texto); opacity: 1; }

/* ============================================================
   Encabezado del álbum
   ============================================================ */
.album-encabezado { margin: 36px 0 28px; text-align: center; }
.album-encabezado h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -.035em; margin-bottom: 10px; }
.album-encabezado p { margin: 0 auto 6px; max-width: 60ch; color: var(--tenue); font-size: 1.15rem; line-height: 1.35; }
.album-encabezado p.meta { font-size: .85rem; }
.acciones-album { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px !important; }

/* ============================================================
   VISOR DE ÁLBUM — panel perla con el acento de cada hoja
   ============================================================ */
.visor-album { display: flex; align-items: stretch; gap: 14px; margin-top: 10px; }
.spread { flex: 1; min-width: 0; background: var(--perla); border-radius: var(--radio); }
.spread-inner { position: relative; padding: 30px 30px 24px; }

.spread-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px 18px; margin-bottom: 24px;
    padding-bottom: 18px; border-bottom: 1px solid var(--linea);
}
.spread-titulo-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.spread-badge-album {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f5f5f7; color: var(--texto);
    padding: 4px 14px 4px 10px; border-radius: 980px; font-weight: 600; font-size: .8rem;
}
.spread-badge-album::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--hoja); }
.spread-hoja-nombre { color: var(--texto); font-size: 1.9rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.spread-info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.spread-contador { color: var(--tenue); font-size: .85rem; }
.spread-progreso { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--tenue); }
.spread-progreso .celdas { display: flex; gap: 3px; }
.spread-progreso .celdas i { width: 14px; height: 6px; border-radius: 3px; background: #d2d2d7; display: block; }
.spread-progreso .celdas i.on { background: var(--hoja); }

/* Aviso para el dueño: faltan fotos en esta hoja */
.aviso-fotos {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
    margin: 0 0 20px; padding: 12px 16px; border-radius: 16px;
    background: #f5f5f7; color: var(--texto); font-size: .9rem;
}

.spread-body { display: flex; align-items: stretch; }
.spread-col { flex: 1; min-width: 0; }
.spread-crease { width: 1px; margin: 0 22px; background: var(--linea); }
.spread-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 14px; }
.spread-vacio { text-align: center; padding: 34px 0; color: var(--tenue); }

/* ---- Casilleros (figuritas) ---- */
.slot {
    position: relative; overflow: hidden;
    aspect-ratio: 3 / 4;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    background: #f5f5f7; border-radius: 18px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.slot:hover { transform: translateY(-3px); z-index: 2; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }

/* Falta pegar: blanca con borde punteado gris */
.slot.vacio { border: 1.5px dashed #c7c7cc; color: var(--tenue); }
/* Pegada: borde del color de la hoja y sombra suave */
.slot.pegada { border: 2px solid var(--hoja); color: var(--texto); box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }

.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* con foto y sin pegar: en gris y apagada, para saber quién es pero que se note que falta */
.slot.vacio img { filter: grayscale(1); opacity: .45; }

.slot .slot-overlay {
    position: relative; z-index: 1; width: 100%;
    padding: 26px 6px 9px; margin-top: auto;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}
.slot.sin-imagen { padding-top: 28px; }
.slot.sin-imagen .slot-overlay { background: none; padding: 0 8px; margin-top: 0; color: inherit; }

.slot .slot-numero {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: #e8e8ed; color: var(--tenue);
    padding: 1px 9px; border-radius: 980px; font-size: .7rem; font-weight: 600; line-height: 1.6;
}
.slot.pegada .slot-numero { background: var(--hoja); color: #fff; }
.slot .slot-numero-grande { font-size: 2.4rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; color: #aeaeb2; }
.slot.pegada .slot-numero-grande { color: var(--hoja); }
.slot .slot-etiqueta { font-size: .7rem; color: var(--tenue); }
.slot.vacio:not(.sin-imagen) .slot-etiqueta { background: #f5f5f7; color: var(--tenue); padding: 1px 9px; border-radius: 980px; }
.slot .slot-titulo { font-size: .85rem; font-weight: 600; line-height: 1.2; word-break: break-word; }
.slot .slot-check {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
    background: var(--hoja); color: #fff; font-size: .75rem; font-weight: 700;
}

.form-pegar { position: absolute; inset: 0; z-index: 3; }
.form-pegar button { width: 100%; height: 100%; background: transparent; border: none; cursor: pointer; }
.form-pegar button:hover { background: rgba(207, 74, 74, .06); }
.form-pegar button:focus-visible { outline: 3px solid var(--azul); outline-offset: -4px; }

.slot-mini-acciones {
    position: absolute; bottom: 7px; left: 0; right: 0; z-index: 4;
    display: flex; justify-content: center; flex-wrap: wrap; gap: 4px;
    font-size: .7rem; opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.slot:hover .slot-mini-acciones, .slot:focus-within .slot-mini-acciones { opacity: 1; pointer-events: auto; }
.slot-mini-acciones a {
    background: rgba(255, 255, 255, .94); color: var(--link); padding: 2px 10px; border-radius: 980px;
    font-weight: 500; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.slot-mini-acciones a:hover { background: var(--link); color: #fff; text-decoration: none; }
.slot-mini-acciones a:last-child { color: var(--rojo); }
.slot-mini-acciones a:last-child:hover { background: var(--rojo); color: #fff; }

/* En pantallas táctiles no existe "hover": las acciones del dueño quedan siempre visibles */
@media (hover: none) {
    .slot-mini-acciones { opacity: 1; pointer-events: auto; }
}

.spread-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linea);
    flex-wrap: wrap; gap: 10px 20px; font-size: .85rem;
}
.spread-ruta { color: var(--tenue); }
.spread-acciones { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Botón de cámara (solo quien administra el álbum) */
.slot-camara { position: absolute; top: 8px; right: 8px; z-index: 5; margin: 0; }
.slot-camara input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.slot-camara label {
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, .95); color: var(--texto); cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.slot-camara label:hover { background: var(--azul); color: #fff; transform: scale(1.08); }
.slot-camara:focus-within label { outline: 3px solid rgba(207, 74, 74, .5); outline-offset: 1px; }
/* sin foto: el botón se destaca para invitar a cargarla */
.slot.sin-imagen .slot-camara label { background: var(--azul); color: #fff; }
.slot.sin-imagen .slot-camara label:hover { background: var(--azul-hover); }
.slot-camara.subiendo label { opacity: .5; pointer-events: none; }
/* con el botón de cámara arriba a la derecha, el tilde de "pegada" baja un poco */
.slot.con-camara .slot-check { top: 44px; }

/* ---- Navegación entre hojas ---- */
.flecha-pagina {
    align-self: center;
    width: 44px; min-width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(210, 210, 215, .64); color: var(--texto);
    font-size: .95rem;
    transition: background-color .2s ease;
}
.flecha-pagina:hover { background: rgba(190, 190, 197, .95); text-decoration: none; color: var(--texto); }
.flecha-pagina.oculta { visibility: hidden; }

.puntos-paginas { display: flex; justify-content: center; gap: 8px; margin: 24px auto 0; flex-wrap: wrap; width: fit-content; padding: 9px 14px; border-radius: 980px; background: rgba(210, 210, 215, .5); }
.puntos-paginas .punto {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
    background: #86868b; opacity: .5; transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.puntos-paginas .punto:hover { opacity: .85; }
.puntos-paginas .punto.activo { background: var(--punto, var(--texto)); opacity: 1; transform: scale(1.3); }

@media (max-width: 820px) {
    .hero { padding: 56px 20px 130px; }
}

@media (max-width: 680px) {
    .contenedor { padding: 12px 14px 40px; }
    .topbar { padding: 4px 14px; }
    .topbar nav { gap: 0 18px; }
    .visor-album { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .visor-album .spread { grid-column: 1 / -1; order: -1; }
    .visor-album .flecha-pagina:first-of-type { justify-self: start; }
    .visor-album .flecha-pagina:last-of-type { justify-self: end; }
    .spread-inner { padding: 22px 16px 20px; }
    .spread-hoja-nombre { font-size: 1.6rem; }
    .spread-body { flex-direction: column; }
    .spread-crease { width: auto; height: 1px; margin: 20px 0; }
    .spread-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
    .slot .slot-numero-grande { font-size: 1.9rem; margin-bottom: 4px; }
    .carrusel-destacados .slide { padding: 36px 20px 10px; }
    form.formulario { padding: 28px 20px; }
    table { display: block; overflow-x: auto; }
}

/* ============================================================
   Pie y tabs
   ============================================================ */
.footer {
    text-align: center; padding: 24px 16px; color: var(--tenue); font-size: .75rem;
    background: transparent; border-top: 1px solid #d2d2d7;
}
.footer p { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.footer .logo-marca { width: 12px; height: 12px; border-radius: 4px; }

.tabs { margin-bottom: 16px; }
.tabs a { margin-right: 18px; padding-bottom: 4px; color: var(--link); }
.tabs a.activo { border-bottom: 2px solid var(--texto); color: var(--texto); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .pre-reveal { opacity: 1; }
}