/* CriSan Joiers - contabilidad de oro y plata */
:root {
  --fondo:        #f2f2f2;
  --fondo-suave:  #ececec;
  --tarjeta:      #ffffff;
  --borde:        #d6d6d6;
  --borde-suave:  #e6e6e6;
  --texto:        #000000;
  --texto-tenue:  #5a5a5a;
  --oro:          #a8842c;
  --oro-claro:    #f7f0dd;
  --verde:        #1f6b3a;
  --rojo:         #a12727;
  --azul:         #24506e;
  --radio:        10px;
  --sombra:       0 1px 3px rgba(0, 0, 0, .07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 { color: var(--texto); font-weight: 600; margin: 0 0 .6rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
a { color: var(--azul); }

.contenedor { max-width: 1280px; margin: 0 auto; padding: 0 1.2rem 3rem; }
.estrecho   { max-width: 720px; }

/* ---------- cabecera ---------- */
.cabecera {
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  padding: .9rem 1.2rem;
  margin-bottom: 1.4rem;
}
.cabecera .interior {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.cabecera img { height: 54px; width: auto; display: block; }
.cabecera .titulo { flex: 1; min-width: 200px; }
.cabecera .titulo h1 { margin: 0; font-size: 1.25rem; }
.cabecera .titulo p { margin: .1rem 0 0; color: var(--texto-tenue); font-size: .85rem; }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--sombra);
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }

.rejilla { display: grid; gap: 1.1rem; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------- indicadores ---------- */
.dato {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .85rem 1rem;
}
.dato .etiqueta { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); }
.dato .valor { font-size: 1.45rem; font-weight: 600; margin-top: .15rem; }
.dato .pie { font-size: .78rem; color: var(--texto-tenue); }
.dato.destacado { background: var(--oro-claro); border-color: #e2d3a8; }
.dato.alerta    { background: #fbeaea; border-color: #eccccc; }
.dato.bien      { background: #e9f3ec; border-color: #cbe0d2; }

/* ---------- formularios ---------- */
label { display: block; font-size: .8rem; color: var(--texto-tenue); margin-bottom: .2rem; }
input, select, textarea, button {
  font-family: inherit; font-size: .95rem;
}
input[type=text], input[type=number], input[type=date], input[type=password],
input[type=tel], input[type=email], select, textarea {
  width: 100%;
  padding: .48rem .6rem;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: #fff;
  color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b9b9b9; outline-offset: -1px; }
textarea { min-height: 66px; resize: vertical; }
.campo { margin-bottom: .75rem; }
.fila { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

button, .boton {
  display: inline-block;
  padding: .5rem .95rem;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: #fff;
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  font-size: .9rem;
}
button:hover, .boton:hover { background: var(--fondo-suave); }
button.principal { background: #262626; color: #fff; border-color: #262626; font-weight: 600; }
button.principal:hover { background: #000; }
button.peligro { color: var(--rojo); border-color: #e0c4c4; }
button.peligro:hover { background: #fbeaea; }
button.pequeno { padding: .25rem .55rem; font-size: .8rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }

/* ---------- tablas ---------- */
.tabla-envoltorio { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .45rem .55rem; border-bottom: 1px solid var(--borde-suave); text-align: left; white-space: normal; }
.tabla-envoltorio th, .tabla-envoltorio td { white-space: nowrap; }
th { font-size: .73rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-tenue); font-weight: 600; background: var(--fondo-suave); position: sticky; top: 0; }
tbody tr:hover { background: #fafafa; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; border-top: 2px solid var(--borde); background: var(--fondo-suave); }
.vacio { color: var(--texto-tenue); font-style: italic; padding: 1rem 0; }

.pos { color: var(--verde); }
.neg { color: var(--rojo); }
.tenue { color: var(--texto-tenue); }
.pequena { font-size: .8rem; }

.etiqueta-estado {
  display: inline-block; padding: .08rem .45rem; border-radius: 999px;
  font-size: .74rem; border: 1px solid var(--borde); background: var(--fondo-suave);
}
.etiqueta-estado.nueva     { background: #fdf3d8; border-color: #e8d69c; }
.etiqueta-estado.aceptada  { background: #e9f3ec; border-color: #cbe0d2; }
.etiqueta-estado.descartada{ background: #f0f0f0; color: var(--texto-tenue); }

/* ---------- pestanas ---------- */
.pestanas {
  display: flex; gap: .3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.2rem;
}
.pestanas button {
  border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; background: transparent;
  padding: .5rem .85rem; margin-bottom: -1px; color: var(--texto-tenue);
}
.pestanas button.activa {
  background: var(--tarjeta); border-color: var(--borde);
  color: var(--texto); font-weight: 600;
}

/* ---------- avisos ---------- */
.aviso {
  border-radius: var(--radio); padding: .7rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--borde); background: var(--tarjeta); font-size: .88rem;
}
.aviso.info   { background: #eef3f7; border-color: #cdd9e2; }
.aviso.ok     { background: #e9f3ec; border-color: #cbe0d2; }
.aviso.error  { background: #fbeaea; border-color: #eccccc; }
.aviso.atencion { background: #fdf6e3; border-color: #e8dcb0; }

/* ---------- cotizacion ---------- */
.cotizacion {
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
  font-size: .85rem; color: var(--texto-tenue);
}
.cotizacion b { color: var(--texto); font-size: 1rem; }

/* ---------- pagina publica ---------- */
.publica { padding-top: 1rem; }
.publica .cabecera { text-align: center; }
.publica .cabecera .interior { justify-content: center; flex-direction: column; gap: .5rem; }
.publica .cabecera img { height: 88px; margin: 0 auto; }
.publica .cabecera .titulo { text-align: center; }

.resultado-linea {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--borde-suave); gap: 1rem;
}
.resultado-linea:last-child { border-bottom: none; }
.resultado-linea .cifra { font-size: 1.3rem; font-weight: 600; white-space: nowrap; }
.resultado-total { background: var(--oro-claro); border: 1px solid #e2d3a8; border-radius: var(--radio); padding: .8rem 1rem; margin-top: .8rem; }
.resultado-total .cifra { font-size: 1.7rem; }

.pie-publico {
  text-align: center; color: var(--texto-tenue); font-size: .85rem;
  padding: 1.5rem 1rem 2.5rem; line-height: 1.7;
}
.pie-publico strong { color: var(--texto); }

.oculto { display: none !important; }

@media print {
  body { background: #fff; }
  .pestanas, .acciones, button { display: none !important; }
}

/* ---------- fotos que sube el cliente ---------- */
.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}
.foto { display: block; margin: 0; cursor: pointer; }
.foto-marco {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  color: var(--texto-tenue);
  overflow: hidden;
}
.foto-marco:hover { background: #e4e4e4; }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-mas { font-size: 1.7rem; line-height: 1; }
.foto-txt { font-size: .78rem; }
.foto-quitar {
  position: absolute; top: 4px; right: 6px;
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 1rem; cursor: pointer;
}
.foto-quitar:hover { background: rgba(0, 0, 0, .85); }

.consentimiento {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .84rem; color: var(--texto);
  margin: .4rem 0 .2rem;
}
.consentimiento input { width: auto; margin-top: .18rem; flex: 0 0 auto; }

.boton.whatsapp {
  background: #25d366; border-color: #1da851; color: #062; font-weight: 600;
}
.boton.whatsapp:hover { background: #1ebe5b; }

/* ---------- galeria de la ficha ---------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem;
}
.galeria img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--borde); border-radius: var(--radio); display: block;
}