/* ============================================================
   PULPA — Auth & Perfil (registro, entrar, perfil, mis-piezas)
   Mobile-first. Hereda variables de pulpa_sitio.css.
   ============================================================ */

/* ---- Layout de página auth (registro, entrar) ---- */

.auth-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 16px 64px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 22px 28px;
  box-shadow: 0 8px 32px rgba(34,26,18,.07);
}

@media (min-width: 540px) {
  .auth-card { padding: 44px 40px 40px; }
}

.auth-titulo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -.02em;
}

.auth-sub {
  font: 15px/1.5 "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
  margin: 0 0 28px;
}

/* ---- Campos ---- */

.auth-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-campo label {
  font: 700 13px "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  letter-spacing: .01em;
}

.auth-campo input,
.auth-campo select {
  height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: 16px "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
  -webkit-appearance: none;
  appearance: none;
}

.auth-campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238a7b69' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.auth-campo input:focus,
.auth-campo select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199,151,73,.13);
}

.auth-campo small {
  font: 12px/1.4 "Helvetica Neue", Arial, sans-serif;
  color: var(--soft);
}

/* ---- Botón principal ---- */

.auth-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  background: #c4503c;
  color: #fff9f5;
  border: none;
  border-radius: 10px;
  font: 600 17px/1 var(--font-body);
  cursor: pointer;
  transition: background .14s, transform .1s;
  text-decoration: none;
}
.auth-boton:hover {
  background: #a83d31;
  transform: translateY(-1px);
}

/* ---- Separador y botón Google (placeholder) ---- */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  font: 12px "Helvetica Neue", Arial, sans-serif;
  color: var(--soft);
}
.auth-divider:before,
.auth-divider:after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  font: 600 15px "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
  cursor: not-allowed;
  opacity: .55;
}

/* ---- Mensajes ---- */

.auth-error {
  background: #fdf0f0;
  border: 1px solid #f5c4c4;
  border-radius: 10px;
  padding: 11px 14px;
  font: 14px/1.5 "Helvetica Neue", Arial, sans-serif;
  color: #b52b2b;
  margin-bottom: 18px;
  list-style: none;
}
.auth-error li { margin: 0; }
.auth-error li + li { margin-top: 4px; }

.auth-ok {
  background: #f0faf2;
  border: 1px solid #b4ddbf;
  border-radius: 10px;
  padding: 11px 14px;
  font: 14px/1.5 "Helvetica Neue", Arial, sans-serif;
  color: var(--green-ink);
  margin-bottom: 18px;
}

/* ---- Pie de formulario ---- */

.auth-pie {
  margin-top: 22px;
  text-align: center;
  font: 14px "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
}
.auth-pie a {
  color: var(--gold-deep);
  font-weight: 700;
}
.auth-pie a:hover { text-decoration: underline; }

/* ---- Perfil ---- */

.perfil-wrap {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 64px;
}

.perfil-card {
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 22px 32px;
  margin-bottom: 20px;
}

@media (min-width: 560px) {
  .perfil-card { padding: 36px 40px 40px; }
}

.perfil-card-titulo {
  font-family: Georgia, serif;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.perfil-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 480px) {
  .perfil-grid { grid-template-columns: 1fr 1fr; }
}

.perfil-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.perfil-campo.full { grid-column: 1 / -1; }

.perfil-campo label {
  font: 700 11px "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--soft);
}

.perfil-campo input,
.perfil-campo select {
  height: 46px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font: 15px "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  transition: border-color .14s;
  -webkit-appearance: none;
  appearance: none;
}

.perfil-campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238a7b69' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.perfil-campo input:focus,
.perfil-campo select:focus {
  outline: none;
  border-color: var(--gold);
}

.perfil-campo input[readonly] {
  background: var(--cream);
  color: var(--muted);
  cursor: default;
}

.perfil-campo small {
  font: 12px "Helvetica Neue", Arial, sans-serif;
  color: var(--soft);
}

/* ---- Mis DPPs ---- */

.mis-wrap {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 64px;
}

.mis-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 24px;
}

.mis-titulo {
  font-family: Georgia, serif;
  font-size: clamp(22px, 4vw, 30px);
  color: var(--ink);
  margin: 0 0 4px;
}

.mis-sub {
  font: 14px "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
  margin: 0;
}

/* ── LA MESA DE LA LISTA SE MUDÓ — 31/08/2026 ──────────────────────
   `.mis-tabla` y sus celdas vivían acá, en la hoja de las pantallas con
   sesión. El panel de admin dibuja la MISMA fila pero no carga esta
   hoja: la fila salía sin mesa —sin bordes, sin encabezado, sin el
   hover— y por eso «se veía distinto».
   Se fueron a `pulpa_lista_piezas.css`, que es la hoja que cargan las
   dos pantallas. Lo que se comparte vive donde se comparte.
   Lo que quedó acá abajo es el cambio a tarjetas en pantalla angosta:
   eso es de Mis piezas y de nadie más —el panel no tiene tarjetas—, y
   mudarlo le escondería la tabla al admin en el teléfono. */

.mis-id {
  font: 700 12px "Helvetica Neue", Arial, sans-serif;
  color: var(--gold-deep);
  letter-spacing: .05em;
  white-space: nowrap;
}

.mis-titulo-pieza {
  font-weight: 700;
  color: var(--ink);
}

.mis-tenue {
  color: var(--soft);
  font-size: 13px;
}

/* Estado chips
   ── SUBIDAS DE CONTRASTE — 31/08/2026 ──
   Eran fondos muy lavados con letra clara: sobre la crema del sitio casi
   no se leían, y son el dato que dice en qué punto está una pieza. Se
   oscurece la tinta, se satura un poco el fondo y se agrega un borde del
   mismo tono — el borde es lo que las hace ver como una pastilla y no
   como una mancha, sobre todo cuando el fondo de la página ya es de un
   color. Los grises además se pasan a grises CÁLIDOS: los fríos sobre
   crema se ven sucios.
   Son globales: si acá costaba leerlas, costaba en todo el sitio. */
.estado-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 11px "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .015em;
}
.estado-borrador  { background: #ece9e3; color: #5d554a; border-color: #dcd6cb; }
.estado-activa    { background: #dcefd6; color: #2c5c22; border-color: #bcdcb0; }
.estado-verificada{ background: #fbeec2; color: #7a5400; border-color: #ecd894; }
.estado-reservada { background: #dfe3f5; color: #2f3f9e; border-color: #c3caea; }
.estado-vendida   { background: #fadadd; color: #a81f2b; border-color: #f0bcc1; }
.estado-archivada { background: #ece9e3; color: #7b7166; border-color: #dcd6cb; }
.estado-baja      { background: #ece2da; color: #6a4f3f; border-color: #dbcbc0; }
.estado-en_revision { background: #fde5c9; color: #a34d00; border-color: #f3cfa5; }

.mis-vacio {
  text-align: center;
  padding: 56px 20px;
  background: var(--paper2);
  border-radius: var(--radius);
  border: 1px dashed var(--line);
}
.mis-vacio-titulo {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 10px;
}
.mis-vacio-texto {
  font: 15px/1.6 "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ── LA FICHA SE MUDÓ — 31/08/2026 ─────────────────────────────────
   Todo `.mis-card*` y el cambio tabla↔fichas por ancho se fueron a
   `pulpa_lista_piezas.css`. Desde hoy el panel dibuja LA MISMA ficha
   que Mis piezas —no un reacomodo por CSS de la fila— y el panel no
   carga esta hoja: acá adentro, esas reglas no le llegaban. */
/* Acción en tabla */
.mis-accion {
  font: 700 13px "Helvetica Neue", Arial, sans-serif;
  color: var(--gold-deep);
  white-space: nowrap;
  transition: color .13s;
}
.mis-accion:hover { color: var(--gold); }




/* «opcional» al lado de una etiqueta. Va en gris y chico: tiene que
   contestar la pregunta sin competir con el nombre del campo. */
.auth-opcional {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #a49a8c; font-weight: 400; margin-left: 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   LA ACEPTACIÓN DE TÉRMINOS — 30/08/2026
   ══════════════════════════════════════════════════════════════════════
   Una casilla no es un campo de texto y no puede heredar sus reglas.
   `.auth-campo` la apilaba arriba de la frase (flex-direction: column),
   la inflaba a un cuadrado de casi cincuenta píxeles (height + padding)
   y —lo más grave— le sacaba el tilde nativo con `appearance: none`, así
   que tocarla no daba ninguna señal de que hubiera pasado algo.
   Acá se le devuelve la apariencia del sistema, que es la que todo el
   mundo ya sabe leer, y toda la frase queda clickeable menos los links. */
.auth-acepto{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:11px;
  margin-bottom:14px;
}
.auth-acepto input[type=checkbox]{
  -webkit-appearance:checkbox;
  appearance:checkbox;
  width:20px; height:20px; min-width:20px;
  padding:0; margin:1px 0 0; border:0; border-radius:0;
  flex:none; cursor:pointer;
  accent-color:var(--gold-deep,#8a6a24);
}
.auth-acepto span{
  font:14px/1.5 "Helvetica Neue",Arial,sans-serif;
  color:var(--muted);
}
/* El área de toque llega hasta el final de «Leí y acepto», no sólo al
   cuadradito de 20 px: en un celular esa diferencia es la que decide si
   alguien se registra o se va. */
.auth-acepto label{
  font:inherit; color:inherit; letter-spacing:0;
  cursor:pointer; padding:2px 0;
}
.auth-acepto a{ color:var(--gold-deep,#8a6a24); }


/* ── EL MISMO BOTÓN, PERO CUANDO ES UN LINK — 30/08/2026 ──
   `.auth-boton` está pensado para un <button> de formulario: ocupa todo
   el ancho y centra por flex. Puesto en un <a> con un `display:inline-block`
   en línea, el inline mata el flex —y con él el centrado— pero no toca el
   `width: 100%`: queda una barra de lado a lado con el texto contra el
   borde izquierdo. Se ve exactamente como un error de maquetado.
   Esta clase es para esos casos: mismo aspecto, ancho al contenido. */
.auth-boton-link{
  display:inline-flex !important;
  width:auto !important;
  padding:0 30px;
  text-decoration:none;
}