/* Antigüedades Tía Susy — gestión interna.
   Misma familia de colores que el catálogo, pero con densidad de pantalla de trabajo:
   tiles de KPI, pills de filtro, tablas anchas y formularios de dos columnas. */

:root {
  --fondo: #f4f1ec;
  --tarjeta: #ffffff;
  --tinta: #2f2822;
  --suave: #7a6a58;
  --linea: #e3ddd2;
  --linea-fuerte: #cfc5b5;
  --verde: #3f5245;
  --verde-claro: #eef2ee;
  --dorado: #a8823c;
  --dorado-claro: #f8f1e1;
  --burdeos: #7d3b34;
  --burdeos-claro: #fbeae7;
  --azul: #3d5a73;
  --azul-claro: #ebf1f6;
  --sombra: 0 1px 3px rgba(47, 40, 34, .07);
  --sombra-alta: 0 12px 34px rgba(47, 40, 34, .16);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
  --lateral: 232px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.55 var(--sans); }
img { max-width: 100%; display: block; }
a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; }
.ic { flex: 0 0 auto; vertical-align: -.15em; }
h1 { font-family: var(--serif); font-size: 26px; margin: 0 0 4px; }
h2 { font-family: var(--serif); font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }

/* ---------------------------------------------------------------- Estructura */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral); flex: 0 0 var(--lateral); background: var(--verde); color: #dbe3dc;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral-marca { padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px; }
.lateral-sello { width: 34px; height: 34px; border-radius: 50%; background: var(--dorado); color: #fff;
  display: grid; place-items: center; font-family: var(--serif); font-size: 16px; flex: 0 0 auto; }
.lateral-nombre { font-family: var(--serif); font-size: 15px; color: #fff; line-height: 1.2; }
.lateral-rol { font-size: 11.5px; color: #a9bcae; }

.lateral nav { padding: 6px 10px 20px; display: flex; flex-direction: column; gap: 1px; }
.lateral nav .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #8fa694; padding: 16px 10px 6px; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  color: #cfdad1; font-size: 14.5px; font-weight: 500;
}
.lateral nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.lateral nav a.activo { background: #fff; color: var(--verde); font-weight: 600; }
.lateral nav a .globo { margin-left: auto; background: var(--burdeos); color: #fff; font-size: 11px;
  font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.lateral nav a.activo .globo { background: var(--burdeos); }
.lateral-pie { margin-top: auto; padding: 14px 16px; font-size: 11.5px; color: #8fa694;
  border-top: 1px solid rgba(255,255,255,.1); }
.lateral-pie a { color: #cfdad1; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra {
  display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--tarjeta);
  border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 30;
}
.barra-buscar { flex: 1; max-width: 380px; display: flex; gap: 6px; }
.barra-buscar input { flex: 1; padding: 8px 13px; border: 1px solid var(--linea-fuerte);
  border-radius: 999px; font-size: 14px; font-family: var(--sans); background: #fff; color: var(--tinta); }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.barra-usuario { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--suave); }
.lateral-boton { display: none; background: none; border: 0; color: var(--tinta); cursor: pointer; padding: 6px; }

.contenido { padding: 24px 22px 60px; max-width: 1400px; width: 100%; }
.encabezado { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.encabezado .sub { color: var(--suave); font-size: 14px; margin: 0; }
.encabezado .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .lateral { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
             transition: transform .2s ease; box-shadow: var(--sombra-alta); }
  .lateral.abierto { transform: none; }
  .lateral-boton { display: block; }
  .contenido { padding: 18px 14px 60px; }
}

/* ---------------------------------------------------------------- Piezas de UI */

.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: var(--sombra); padding: 18px; }
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta-titulo { display: flex; align-items: center; gap: 10px; margin: -2px 0 14px; }
.tarjeta-titulo h2 { margin: 0; }
.tarjeta-titulo .der { margin-left: auto; display: flex; gap: 8px; }

.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); margin-bottom: 22px; }
.kpi {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 15px 16px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden;
}
.kpi:hover { text-decoration: none; }
.kpi .kpi-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave);
  display: flex; align-items: center; gap: 6px; }
.kpi .kpi-num { font-family: var(--serif); font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--tinta); }
.kpi .kpi-pie { font-size: 12.5px; color: var(--suave); }
.kpi.verde { border-left: 3px solid var(--verde); }
.kpi.dorado { border-left: 3px solid var(--dorado); }
.kpi.burdeos { border-left: 3px solid var(--burdeos); }
.kpi.azul { border-left: 3px solid var(--azul); }

.pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pill {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--tarjeta);
  color: var(--suave); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.pill:hover { border-color: var(--dorado); color: var(--tinta); text-decoration: none; }
.pill.activo { background: var(--verde); border-color: var(--verde); color: #fff; }
.pill.activo:hover { color: #fff; }
.pill .n { opacity: .75; font-weight: 500; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px;
  border-radius: 9px; border: 1px solid transparent; font-size: 14px; font-weight: 600;
  font-family: var(--sans); cursor: pointer; transition: filter .15s ease;
}
.boton:hover { text-decoration: none; filter: brightness(1.07); }
.boton-principal { background: var(--verde); color: #fff; }
.boton-dorado { background: var(--dorado); color: #fff; }
.boton-peligro { background: var(--burdeos); color: #fff; }
.boton-borde { background: var(--tarjeta); border-color: var(--linea-fuerte); color: var(--tinta); }
.boton-borde:hover { border-color: var(--dorado); }
.boton-chico { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.boton-plano { background: none; border: 0; color: var(--suave); padding: 6px 8px; cursor: pointer; }
.boton-plano:hover { color: var(--tinta); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.marca-estado {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.marca-estado.disponible { background: var(--verde-claro); color: var(--verde); }
.marca-estado.reservado { background: var(--dorado-claro); color: #7a5c1e; }
.marca-estado.vendido { background: var(--burdeos-claro); color: var(--burdeos); }
.marca-estado.retirado { background: #eeeae4; color: var(--suave); }
.marca-estado.publicado { background: var(--azul-claro); color: var(--azul); }
.marca-estado.borrador { background: #eeeae4; color: var(--suave); }

/* ---------------------------------------------------------------- Tablas */

.tabla-caja { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: var(--sombra); overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla th {
  text-align: left; padding: 11px 14px; background: #faf8f4; border-bottom: 1px solid var(--linea);
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); white-space: nowrap;
}
table.tabla td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: #faf8f4; }
table.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla .acciones-fila { display: flex; gap: 4px; justify-content: flex-end; }
.tabla-foto { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; background: var(--fondo); }
.tabla-foto.sin { display: grid; place-items: center; color: var(--linea-fuerte); }
.tenue { color: var(--suave); font-size: 13px; }

/* ---------------------------------------------------------------- Grilla de fichas */

.fichas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.ficha-mini { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px;
  overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; position: relative; }
.ficha-mini:hover { box-shadow: var(--sombra-alta); }
.ficha-mini .foto { aspect-ratio: 1/1; background: var(--fondo); overflow: hidden; }
.ficha-mini .foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-mini .foto .sin { display: grid; place-items: center; height: 100%; color: var(--linea-fuerte); }
.ficha-mini .cuerpo { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ficha-mini .nombre { font-family: var(--serif); font-size: 15.5px; line-height: 1.25; color: var(--tinta); }
.ficha-mini .pie { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ficha-mini .precio { font-family: var(--serif); font-weight: 700; color: var(--verde); font-size: 16px; }

/* ---------------------------------------------------------------- Formularios */

.formulario { display: grid; gap: 16px; }
.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.campos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.campo input, .campo select, .campo textarea {
  padding: 9px 12px; border: 1px solid var(--linea-fuerte); border-radius: 9px; font-size: 14.5px;
  background: #fff; color: var(--tinta); font-family: var(--sans); width: 100%;
}
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }
.campo .pista { font-size: 12.5px; color: var(--suave); }
.campo-linea { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.campo-linea input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--verde); }
.grupo-medidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
fieldset { border: 1px solid var(--linea); border-radius: 11px; padding: 16px; margin: 0; }
fieldset legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--suave); padding: 0 7px; }
.acciones-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.acciones-form .der { margin-left: auto; }

/* Zona de fotos: arrastrar y soltar */
.soltar {
  border: 2px dashed var(--linea-fuerte); border-radius: 12px; padding: 26px; text-align: center;
  color: var(--suave); background: #fbfaf7; cursor: pointer; transition: all .15s ease;
}
.soltar:hover, .soltar.encima { border-color: var(--dorado); background: var(--dorado-claro); color: var(--tinta); }
.soltar input[type="file"] { display: none; }
.soltar .ic { color: var(--dorado); margin-bottom: 6px; }
.previas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 14px; }
.previa { position: relative; aspect-ratio: 1/1; border-radius: 9px; overflow: hidden; border: 1px solid var(--linea); }
.previa img { width: 100%; height: 100%; object-fit: cover; }
.previa .nombre-archivo { position: absolute; inset: auto 0 0 0; background: rgba(47,40,34,.72); color: #fff;
  font-size: 10.5px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fotos-guardadas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.foto-guardada { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--tarjeta); }
.foto-guardada .marco { aspect-ratio: 1/1; background: var(--fondo); }
.foto-guardada .marco img { width: 100%; height: 100%; object-fit: cover; }
.foto-guardada .barra-foto { display: flex; gap: 2px; padding: 5px; border-top: 1px solid var(--linea); }
.foto-guardada .barra-foto button { flex: 1; background: none; border: 0; color: var(--suave); cursor: pointer;
  padding: 5px; border-radius: 6px; }
.foto-guardada .barra-foto button:hover { background: var(--fondo); color: var(--tinta); }
.foto-guardada .barra-foto button.borrar:hover { background: var(--burdeos-claro); color: var(--burdeos); }
.foto-guardada.tapa { border-color: var(--dorado); box-shadow: 0 0 0 2px var(--dorado-claro); }
.foto-guardada .rotulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dorado); text-align: center; padding: 3px; font-weight: 700; }

/* ---------------------------------------------------------------- Avisos, modal, varios */

.aviso { padding: 12px 15px; border-radius: 10px; font-size: 14px; display: flex; gap: 10px;
  align-items: flex-start; margin-bottom: 16px; }
.aviso.exito { background: var(--verde-claro); border: 1px solid #c9d7ca; color: var(--verde); }
.aviso.error { background: var(--burdeos-claro); border: 1px solid #e5bdb5; color: var(--burdeos); }
.aviso.dorado { background: var(--dorado-claro); border: 1px solid #ecdcb8; color: #7a5c1e; }
.aviso.info { background: var(--azul-claro); border: 1px solid #cbdae6; color: var(--azul); }
.aviso .ic { margin-top: 1px; }

.modal-fondo { position: fixed; inset: 0; background: rgba(47, 40, 34, .55); z-index: 70;
  display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal-fondo.abierto { display: flex; }
.modal { background: var(--tarjeta); border-radius: 14px; box-shadow: var(--sombra-alta);
  width: min(560px, 100%); padding: 22px; }
.modal h2 { margin-top: 0; }
.modal-cerrar { float: right; background: none; border: 0; color: var(--suave); cursor: pointer; padding: 4px; }

.vacio { text-align: center; padding: 48px 20px; color: var(--suave); }
.vacio .ic { color: var(--linea-fuerte); margin-bottom: 10px; }

.paginador { display: flex; gap: 6px; justify-content: center; margin: 24px 0 8px; flex-wrap: wrap; }
.paginador a, .paginador span { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--linea);
  background: var(--tarjeta); font-size: 14px; color: var(--suave); display: inline-flex; align-items: center; gap: 4px; }
.paginador a:hover { border-color: var(--dorado); color: var(--tinta); text-decoration: none; }
.paginador .actual { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 700; }
.paginador .off { opacity: .4; }

.historial { list-style: none; padding: 0; margin: 0; }
.historial li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.historial li:last-child { border-bottom: 0; }
.historial .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--linea-fuerte);
  margin-top: 7px; flex: 0 0 auto; }
.historial .punto.verde { background: var(--verde); }
.historial .punto.dorado { background: var(--dorado); }
.historial .punto.burdeos { background: var(--burdeos); }
.historial .cuando { margin-left: auto; color: var(--suave); font-size: 12.5px; white-space: nowrap; }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .dos-columnas { grid-template-columns: 1fr; } .campos.dos { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Login y carga rápida */

.login-pantalla { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 400px at 50% -10%, #e9e2d3, var(--fondo)); }
.login-caja { width: min(400px, 100%); background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 16px; padding: 30px; box-shadow: var(--sombra-alta); }
.login-caja h1 { text-align: center; font-size: 23px; }
.login-caja .lema { text-align: center; color: var(--suave); font-size: 13.5px; margin: 0 0 22px; font-style: italic; }
.login-sello { width: 56px; height: 56px; border-radius: 50%; background: var(--verde); color: var(--papel, #f7f3ea);
  border: 3px solid var(--dorado); display: grid; place-items: center; font-family: var(--serif);
  font-size: 24px; margin: 0 auto 14px; }

.rapido-pantalla { max-width: 560px; margin: 0 auto; }
.rapido-foto { border: 2px dashed var(--linea-fuerte); border-radius: 14px; aspect-ratio: 4/3;
  display: grid; place-items: center; color: var(--suave); background: #fbfaf7; overflow: hidden; position: relative; }
.rapido-foto img { width: 100%; height: 100%; object-fit: cover; }
.rapido-foto input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

@media print {
  .lateral, .barra, .acciones, .acciones-form, .paginador { display: none !important; }
  .app { display: block; } .contenido { padding: 0; }
}