/* Fotaza · estilo limpio (2026-11-02): más blanco, más aire, bordes finos y menos adornos.
   Va después de app.css y marca.css y solo pisa lo visual: no cambia ninguna pantalla ni función. */
:root { --fondo: #fff; --linea: #ececef; --linea-fuerte: #d9dce1; --sombra-suave: 0 1px 2px rgba(15, 20, 40, .04); }
body { background: #fff; color: var(--tinta); -webkit-font-smoothing: antialiased; }

/* Encabezado: blanco, sin peso, con el menú en gris y más aire */
.cab { background: #fff; border-bottom: 1px solid var(--linea); }
.cab .in { max-width: 1100px; padding: 14px 20px; gap: 8px 22px; }
.cab nav { gap: 4px 4px; }
.cab nav a { color: var(--gris); font-weight: 500; padding: 7px 12px; border-radius: 999px; transition: background .15s, color .15s; }
.cab nav a:hover { color: var(--tinta); background: #f4f5f7; }
.carro { background: var(--tinta); color: #fff !important; font-weight: 600; }
.marca { font-weight: 600; }

/* Contenido: columna centrada y respirada */
main { padding: 36px 20px 80px; }
h1 { font-size: 1.7rem; font-weight: 700; margin: .1em 0 .25em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 2em 0 .7em; }
.sub { color: var(--gris); }

/* Tarjetas, cajas y bloques: blanco, borde fino, sin sombras fuertes */
.caja, .precios, .cierre-pedido, .info-plegable, .ejemplos div { background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: none; }
.caja { padding: 22px 24px; margin: 0 0 20px; }
.tarjeta { border: 1px solid var(--linea); border-radius: 16px; box-shadow: none; }
.tarjeta:hover { border-color: var(--linea-fuerte); box-shadow: 0 8px 24px rgba(15, 20, 40, .07); }
.tarjeta .cuerpo { padding: 16px 18px 18px; }
.opcion-cobro { border: 1px solid var(--linea); border-radius: 14px; }
.comparativa .opcion-cobro { border-width: 1px; }

/* Avisos: más suaves */
.aviso, .error, .ok, .info { border-radius: 12px; padding: 12px 16px; border-width: 1px; }

/* Tablas: sin recuadro pesado, encabezado discreto */
.tabla { background: #fff; border: 1px solid var(--linea); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tabla th { background: #fafafb; color: var(--gris); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--linea); padding: 11px 14px; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid #f2f3f5; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: #fcfcfd; }
.tabla-pedidos th { font-size: .74rem; }

/* Campos y botones */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], input[type=search], input[type=number], select, textarea, .panel-medio textarea {
  border: 1px solid var(--linea-fuerte); border-radius: 10px; background: #fff; padding: 11px 13px; transition: border-color .15s, box-shadow .15s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave, rgba(255, 90, 31, .18)); }
label { font-weight: 500; font-size: .92rem; margin: 14px 0 5px; }
.btn { font-weight: 600; padding: 11px 22px; transition: background .15s, border-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn.sec { background: #fff; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.btn.sec:hover { background: #f7f8fa; color: var(--tinta); border-color: var(--tinta); }
.btn.peligro { border: 1px solid #f1c7c3; }
.btn.chico { padding: 7px 14px; }

/* Estados: pastillas livianas */
.estado { font-weight: 600; font-size: .78rem; padding: 3px 11px; }

/* Zona de subir fotos */
.subir { border: 1.5px dashed var(--linea-fuerte); border-radius: 16px; padding: 34px 24px; background: #fafafb; }
.subir.arrastra { background: #fff; }
.barra { background: #f0f1f3; }

/* Galerías: fotos con esquinas más redondeadas y sin adornos */
.celda { border-radius: 12px; background: #f0f1f3; }
.celda .num { background: rgba(15, 20, 40, .55); }
.visor img { border-radius: 12px; }
.fotografos a { border: 1px solid var(--linea); }

/* Menú de perfil */
.perfil-menu { border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 20, 40, .1); }

/* Pie: blanco, con los enlaces en gris, como el resto */
.pie { background: #fff; color: var(--gris); border-top: 1px solid var(--linea); padding: 28px 20px; }
.pie a { color: var(--gris); }
.pie a:hover { color: var(--tinta); }

/* Ingreso: tarjeta limpia */
.login.caja { border-radius: 20px; padding: 32px 28px; }

@media (max-width: 560px) {
  main { padding: 24px 16px 64px; }
  .cab .in { padding: 12px 14px; }
  .caja { padding: 18px 16px; }
}