/* Fotaza · marca compartida por todo el sitio: tipografías alojadas acá (sin Google), y la decoración de cada tema.
   Los colores vienen del tema activo (variables en el <head>, ver config/temas.php). */
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/outfit-700.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/outfit-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }

/* Galerías, carrito, panel y login (CSS anterior): misma tipografía y colores de la marca */
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { font-family: "Outfit", "Inter", system-ui, sans-serif; letter-spacing: -.01em; }
.btn { background: var(--acento); color: var(--sobre-acento, #0B1437); border-radius: 999px; font-family: "Outfit", "Inter", sans-serif; font-weight: 700; }
.btn:hover { background: var(--acento-osc); }
.btn.sec { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); }
.btn.sec:hover { background: var(--tinta); color: var(--crema, #fff); }
.marca img, .marca svg.logo-svg { height: 40px; width: auto; display: block; }
.pie { background: var(--noche-pie, #070d27); color: #c9cde6; }
.pie a { color: #e8ebf7; }

/* Decoración de temporada (la elige el tema; sin tema con decoración, nada de esto se ve) */
.tema-tira { position: relative; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px; text-align: center; background: var(--acento); color: var(--sobre-acento, #0B1437); font: 700 .88rem/1.25 "Outfit", "Inter", sans-serif; letter-spacing: .02em; }
.tema-tira svg { width: 18px; height: 18px; flex: none; }
.tema-guirnalda { height: 34px; margin-bottom: -34px; position: relative; z-index: 45; pointer-events: none; background: url("../img/temas/guirnalda.svg") repeat-x top left / 180px 34px; }
.tema-navidad .logo, .tema-navidad .marca { position: relative; }
.tema-navidad .logo::before, .tema-navidad .marca::before { content: ""; position: absolute; left: -9px; top: -14px; width: 34px; height: 30px; background: url("../img/temas/gorro.svg") no-repeat center / contain; transform: rotate(-18deg); z-index: 2; }
.tema-rosa .logo::after, .tema-rosa .marca::after { content: ""; position: absolute; right: -26px; top: -4px; width: 22px; height: 26px; background: url("../img/temas/lazo.svg") no-repeat center / contain; }
.tema-rosa .logo, .tema-rosa .marca { position: relative; margin-right: 26px; }
.tema-celeste .tema-tira, .tema-papa .tema-tira { background: linear-gradient(180deg, var(--acento) 0 33%, #fff 33% 66%, var(--acento) 66% 100%); }
.tema-celeste .tema-tira span, .tema-papa .tema-tira span { background: rgba(255, 255, 255, .85); padding: 3px 12px; border-radius: 999px; color: var(--noche); }
@media (prefers-reduced-motion: no-preference) { .tema-navidad .tema-guirnalda { animation: centellea 3s ease-in-out infinite; } }
@keyframes centellea { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
.logo-login { display: block; height: 64px; width: auto; margin: 0 auto 14px; }

/* ---- Panel del fotógrafo: tamaños de texto y piezas nuevas (2026-10-09) ---- */
.cab nav a { font-size: 13px; }                                /* menú: 3 puntos menos */
.perfil { position: relative; }
.perfil summary { list-style: none; cursor: pointer; display: block; border-radius: 50%; }
.perfil summary::-webkit-details-marker { display: none; }
.perfil .avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento, #0B1437); font: 800 1rem/1 "Outfit", "Inter", sans-serif; }
.perfil summary:hover .avatar, .perfil[open] .avatar { box-shadow: 0 0 0 3px var(--acento-suave, rgba(255, 90, 31, .25)); }
.perfil-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 210px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 10px 30px rgba(11, 20, 55, .16); padding: 6px; }
.perfil-nombre { padding: 8px 10px; font-weight: 700; font-size: .9rem; color: var(--gris); border-bottom: 1px solid var(--linea); margin-bottom: 4px; word-break: break-word; }
.perfil-menu a, .perfil-menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font: 600 .95rem/1.2 "Inter", system-ui, sans-serif; color: var(--tinta); text-decoration: none; cursor: pointer; }
.perfil-menu a:hover, .perfil-menu button:hover { background: var(--fondo); }

.intro { font-size: 14px; }                                    /* párrafo bajo el título: 2 puntos menos */

/* Eventos: estado y "a la venta hasta" 3 puntos menos */
.tabla-eventos .estado { font-size: 12px; padding: 2px 9px; }
.tabla-eventos .sub { font-size: 12px; letter-spacing: -.02em; }

/* Pedidos: encabezado 1 punto más, detalle 2 puntos menos, último dato (copiar link) a la derecha */
.tabla-pedidos th { font-size: 14.6px; }
.tabla-pedidos td { font-size: 14px; }
.tabla-pedidos .estado { font-size: 11px; }
.tabla-pedidos .sub { font-size: 12.5px; }
.tabla-pedidos th:last-child, .tabla-pedidos td:last-child { text-align: right; }
.tabla-pedidos .celda-descarga input { margin-left: auto; }

/* Protección y títulos de sección */
.titulo-opciones { font-size: 1.1rem; margin: 22px 0 10px; }
.nombre-opcion { font-family: "Outfit", "Inter", sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.aclaracion { font-size: 15px; font-weight: 400; }

/* Cobros: dos modos lado a lado */
.comparativa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
.comparativa .opcion-cobro { margin: 0; padding: 16px 18px; border-width: 2px; border-radius: 14px; }
.comparativa .opcion-cobro:has(input:checked) { border-color: var(--acento); background: var(--crema, #f5f9ff); box-shadow: 0 0 0 3px var(--acento-suave, rgba(255, 90, 31, .18)); }
.comparativa .cuerpo { display: block; flex: 1; min-width: 0; }
.comparativa ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--gris); }
.comparativa li { margin: 3px 0; }
.panel-medio h3 { margin: 0 0 6px; font-size: 1.05rem; }
.campos-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.campos-dos input { max-width: none; }
.panel-medio textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #c9ced6; border-radius: 8px; }
.panel-medio[hidden] { display: none; }
.info-plegable { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; margin: 0 0 8px; font-size: 14px; }
.info-plegable summary { cursor: pointer; font-weight: 600; }
.info-plegable p { color: var(--gris); margin: 8px 0 0; }
@media (max-width: 640px) { .comparativa, .campos-dos { grid-template-columns: 1fr; } }

/* Suscripción: estado claro, un solo botón grande */
.suscripcion-estado .etiqueta { font-size: .85rem; color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.suscripcion-estado .valor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; font-size: 1.1rem; }
.suscripcion-estado .estado { font-size: 1rem; padding: 4px 14px; }
.suscripcion-accion h2 { margin: 0 0 6px; font-size: 1.15rem; }
.precio-mes { font: 800 2rem/1.1 "Outfit", "Inter", sans-serif; }
.precio-mes span { font: 500 1rem "Inter", sans-serif; color: var(--gris); }
.suscripcion-accion .detalles { margin: 12px 0 16px; padding-left: 20px; color: var(--gris); font-size: 14px; }
.suscripcion-accion .detalles li { margin: 3px 0; }
.suscripcion-accion .btn.grande { width: 100%; max-width: 420px; text-align: center; }

/* Interletrado más ajustado en los párrafos explicativos del panel */
.intro, .aclaracion, .panel-medio p, .panel-medio .sub, .info-plegable p, .comparativa ul, .suscripcion-accion .detalles, .caja > .sub, main > .sub { letter-spacing: -.015em; }

/* Login centrado */
.login { text-align: center; }
.login label, .login .err { text-align: left; }
.login .acciones-login { justify-content: center; margin: 22px 0 0; }
.login .err { display: block; }

/* Protección: ejemplo bajo cada modelo */
.comparativa .ejemplo { display: block; margin-top: 14px; }
.comparativa .ejemplo .rotulo { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin-bottom: 6px; }
.comparativa .ejemplo .visor { display: block; max-width: 300px; border-radius: 8px; overflow: hidden; }
.comparativa .ejemplo .visor img { filter: var(--filtro, none); width: 100%; height: auto; }
.comparativa .aclaracion { display: block; margin: 6px 0 0; font-weight: 400; }

/* Logos en las opciones de cobro, botón de Gmail y prueba de protección */
.titulo-con-logo { display: flex; align-items: center; gap: 10px; }
.logo-medio { width: 44px; height: 32px; flex: none; }
.logo-banco { color: var(--base, #0B1437); width: 36px; }
.icono-g { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
.login .btn.sec { display: inline-flex; align-items: center; justify-content: center; }
.login .btn.sec .icono-g { vertical-align: 0; }
.prueba-foto input[type=file] { font: inherit; max-width: 100%; }

/* Protección: las dos fotos de ejemplo centradas y a la misma altura, pegadas a la base de la tarjeta */
.comparativa .cuerpo { display: flex; flex-direction: column; }
.comparativa .ejemplo { margin-top: auto; padding-top: 14px; text-align: center; }
.comparativa .ejemplo .visor { margin-left: auto; margin-right: auto; width: 300px; max-width: 100%; }
.comparativa .ejemplo .prot-din { display: block; width: 100%; }
.comparativa .ejemplo .prot-din img.nitida { width: 100%; height: auto; }
.comparativa .ejemplo .aclaracion { text-align: left; }
.comparativa .opcion-cobro { align-items: stretch; }
.comparativa .opcion-cobro > input { align-self: flex-start; }

/* Login: Registrarme destacado en azul; ojito para ver la contraseña */
.btn.btn-azul, .login .btn.btn-azul { background: #1d4ed8; color: #fff; border: 1.5px solid #1d4ed8; }
.btn.btn-azul:hover { background: #1b43b8; color: #fff; }
.campo-clave { position: relative; display: block; max-width: 420px; }
.login .campo-clave { max-width: none; }
.campo-clave input { padding-right: 46px; max-width: none; width: 100%; }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--gris); border-radius: 8px; padding: 0; }
.ver-clave:hover { color: var(--tinta); background: var(--fondo); }
.ver-clave svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ver-clave .tachado { display: none; }
.ver-clave[aria-pressed=true] .tachado { display: block; }
.logo-medio-img { height: 34px; width: auto; flex: none; }

/* Páginas legales: texto a todo el ancho, 1 punto menos de letra e interletrado más justo */
.legal { max-width: none; font-size: 15px; letter-spacing: -.015em; }
.legal .legal-datos, .legal .sub { font-size: 14px; }

/* Reporte de ventas: filtros en una sola línea (fotógrafo, evento, desde, hasta) y letra más chica */
.filtros-linea { padding: 12px 14px; }
.filtros-linea label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.filtros-linea select, .filtros-linea input[type=date] { font: 13px/1.2 "Inter", system-ui, sans-serif; padding: 6px 8px; width: auto; max-width: 140px; border: 1px solid #c9ced6; border-radius: 8px; background: #fff; }
.filtros-linea input[type=checkbox] { width: auto; margin: 0; }
.filtros-linea .fila-clave { align-items: center; }
.filtros-linea input[type=date] { max-width: 128px; }
.filtros-linea .btn.chico { padding: 6px 12px; font-size: 13px; }

/* Foto de perfil o logo del fotógrafo (círculo) */
.perfil .avatar { overflow: hidden; }
.perfil .avatar img, .foto-perfil { border-radius: 50%; object-fit: cover; background: #fff; }
.perfil .avatar img { width: 100%; height: 100%; display: block; }
.cab .marca img.foto-perfil { width: 34px; height: 34px; margin-right: 2px; }
.foto-perfil.grande { display: inline-block; width: 56px; height: 56px; margin-right: 14px; vertical-align: middle; }
.titulo-fotografo { display: flex; align-items: center; }
.foto-perfil.mini { display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: -5px; }
.perfil-caja { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.perfil-circulo { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background: var(--acento); color: var(--sobre-acento, #0B1437); display: flex; align-items: center; justify-content: center; font: 800 3rem/1 "Outfit", sans-serif; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(11, 20, 55, .18); }
.perfil-circulo img { width: 100%; height: 100%; object-fit: cover; }
.perfil-actual form { margin-top: 12px; }
.recorte[hidden] { display: none; }
.recorte .marco { position: relative; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; background: #fff; border: 3px solid var(--acento); touch-action: none; cursor: grab; }
.recorte .marco img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform-origin: center; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.zoom-fila { display: flex; align-items: center; gap: 10px; max-width: 320px; }
.zoom-fila input { flex: 1; }
@media (max-width: 700px) { .perfil-caja { grid-template-columns: minmax(0, 1fr); } }