:root {
  --oliva: #687E54; --oliva-osc: #4F6140; --oliva-claro: #EEF1EA;
  --dorado: #B79A67; --dorado-claro: #F6F0E5;
  --texto: #1F2419; --tenue: #5E6657; --borde: #DCE0D6;
  --fondo: #F7F8F5; --tarjeta: #FFFFFF;
  --error: #A3352A; --ok: #3E6B2E;
  --radio: 12px;
  font-family: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --texto: #E9ECE4; --tenue: #A8B09F; --borde: #3A4233; --fondo: #161A13; --tarjeta: #20251C; --oliva-claro: #2A3323; --dorado-claro: #332C1F; --oliva: #8AA171; --error: #E07A6E; --ok: #8BC27A; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-size: 17px; line-height: 1.45; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--oliva); }
h1 { font-size: 1.6rem; margin: .4rem 0 .6rem; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }
h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
code { background: var(--dorado-claro); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
pre { background: var(--oliva-claro); padding: 12px; border-radius: 8px; overflow-x: auto; font-size: .85rem; }
.sub { color: var(--tenue); margin: 0 0 .8rem; }
.nota { color: var(--tenue); font-size: .9rem; }

.barra { background: #687E54; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 3px solid var(--dorado); }
.marca { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.marca strong { color: #E8D9B8; }
.salir { margin: 0; }
.barra .boton-texto { color: #fff; }
.menu { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.menu a { text-decoration: none; color: var(--tenue); padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.menu a.activo { background: var(--oliva-claro); color: var(--oliva); }
.aviso-prueba { background: var(--dorado); color: #fff; text-align: center; font-size: .8rem; padding: 3px; letter-spacing: .04em; text-transform: uppercase; }

.contenido { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px; }
.pie { text-align: center; color: var(--tenue); font-size: .78rem; padding: 18px 16px 28px; border-top: 1px solid var(--borde); }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin: 12px 0; }
.tarjeta.centrada { text-align: center; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rejilla .tarjeta { margin: 0; }
.tarjeta.enlace { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; border-top: 4px solid var(--oliva); }
.tarjeta.enlace:hover { border-color: var(--dorado); }
.cifra { font-size: 2rem; font-weight: 700; color: var(--oliva); line-height: 1; }
.tarjeta.enlace small { color: var(--tenue); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--oliva); color: #fff; border: 0; border-radius: 10px; padding: 12px 20px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; min-height: 48px; }
.boton:hover { background: var(--oliva-osc); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton.secundario { background: transparent; color: var(--oliva); border: 2px solid var(--oliva); }
.boton.google { background: #fff; color: #1F1F1F; border: 1px solid #C9CDC4; width: 100%; max-width: 340px; }
.boton-texto { background: none; border: 0; font: inherit; color: var(--oliva); cursor: pointer; padding: 8px; font-weight: 600; }
.boton-texto.peligro { color: var(--error); }

.ingreso { max-width: 420px; margin: 8vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ingreso h1 { margin-top: 14px; color: var(--oliva); }
.ingreso .prueba { width: 100%; text-align: left; margin-top: 28px; border-style: dashed; border-color: var(--dorado); }
.ingreso .prueba select { margin: 8px 0 12px; }

.alerta { padding: 10px 14px; border-radius: 10px; background: var(--dorado-claro); border-left: 4px solid var(--dorado); text-align: left; }
.alerta p { margin: 0; }
.alerta.error { border-color: var(--error); color: var(--error); }
.alerta.ok { border-color: var(--ok); color: var(--ok); background: var(--oliva-claro); }

.saludo { display: flex; gap: 14px; align-items: center; }
.saludo h1 { margin: 0; }
.saludo .sub { margin: 0; }
.avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover; }
.avatar.inicial { display: grid; place-items: center; background: #687E54; color: #fff; font-weight: 700; font-size: 1.3rem; letter-spacing: .02em; }
.avatar.pequeno { width: 40px; height: 40px; font-size: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.chip { font-size: .78rem; background: var(--oliva-claro); color: var(--oliva); border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.chip.dorado { background: var(--dorado-claro); color: #8A6F3F; }

.titulo-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista { list-style: none; padding: 0; margin: 8px 0; }
.lista > li { margin-bottom: 8px; }
.fila { display: flex; align-items: center; gap: 12px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; text-decoration: none; color: inherit; }
a.fila:hover { border-color: var(--oliva); }
.fila.inactivo { opacity: .6; }
.fila .datos { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fila small { color: var(--tenue); overflow-wrap: anywhere; }
.fila form { margin: 0; }
.prefijo { background: var(--oliva); color: #fff; font-weight: 700; font-size: .8rem; border-radius: 8px; padding: 6px 8px; min-width: 64px; text-align: center; }
.vacio { color: var(--tenue); padding: 10px; }

.formulario { display: flex; flex-direction: column; gap: 14px; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.formulario small { font-weight: 400; color: var(--tenue); }
input, select { font: inherit; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); color: var(--texto); width: 100%; min-height: 48px; }
input:focus, select:focus { outline: 3px solid var(--dorado-claro); border-color: var(--dorado); }
.formulario label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--oliva); flex: none; }
.check.rol { align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.check.rol span { display: flex; flex-direction: column; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; margin-bottom: 4px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .dos { grid-template-columns: 1fr; } }
.datos-def { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.datos-def dt { color: var(--tenue); }
.datos-def dd { margin: 0; font-weight: 600; }

.estado { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-top: 0; }
.punto { width: 12px; height: 12px; border-radius: 50%; background: var(--tenue); }
.estado-conectado .punto { background: var(--ok); }
.estado-error .punto { background: var(--error); }
.estado-incompleto .punto, .estado-sin_configurar .punto { background: var(--dorado); }

/* --- Informes ------------------------------------------------------------ */
.acciones-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.chip.estado-borrador { background: var(--dorado-claro); color: #8A6F3F; }
.chip.estado-en_revision { background: #E5ECF5; color: #3A5A85; }
.chip.estado-devuelto { background: #F8E7E4; color: var(--error); }
.opciones-cliente { display: flex; flex-direction: column; gap: 8px; }
.formulario label.opcion { flex-direction: row; align-items: center; gap: 12px; background: var(--tarjeta); border: 2px solid var(--borde); border-radius: var(--radio); padding: 12px; font-weight: 400; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--oliva); background: var(--oliva-claro); }
.opcion input { width: 20px; height: 20px; min-height: 0; accent-color: var(--oliva); flex: none; }
.opcion .datos { display: flex; flex-direction: column; }
.opcion small { color: var(--tenue); }

.cabecera-informe h1 { margin: .1rem 0 .3rem; }
.formato { margin: 0; font-size: .8rem; color: var(--dorado); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
#faltan { margin: 12px 0; }
.bloques fieldset { display: flex; flex-direction: column; gap: 12px; }
.bloque { background: var(--tarjeta); border: 1px solid var(--borde); border-left: 4px solid var(--oliva); border-radius: var(--radio); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }
.bloque h2 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.08rem; }
.num { background: var(--oliva); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .85rem; flex: none; }
.req { font-size: .7rem; font-weight: 700; color: var(--dorado); text-transform: uppercase; letter-spacing: .04em; }
.ayuda { margin: -4px 0 0; color: var(--tenue); font-size: .9rem; }
.campo { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.campo small { font-weight: 400; color: var(--tenue); }
.campo.fijo { background: var(--oliva-claro); padding: 10px 12px; border-radius: 10px; }
.etiqueta { font-size: .78rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); color: var(--texto); width: 100%; resize: vertical; min-height: 48px; overflow: hidden; }
textarea:focus { outline: 3px solid var(--dorado-claro); border-color: var(--dorado); }
fieldset:disabled input, fieldset:disabled textarea, fieldset:disabled select { background: var(--fondo); }

.vinetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vinetas li { display: flex; gap: 6px; align-items: flex-start; }
.vinetas li::before { content: "•"; color: var(--dorado); font-size: 1.4rem; line-height: 44px; }
.vinetas li.con-fecha { flex-wrap: wrap; }
.vinetas li.con-fecha textarea { flex: 1 1 70%; }
.fecha-compromiso { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--tenue); padding-left: 18px; }
.fecha-compromiso input { width: auto; min-height: 40px; padding: 6px 10px; }
.quitar { background: none; border: 0; color: var(--tenue); font-size: 1.5rem; line-height: 1; width: 40px; height: 44px; cursor: pointer; flex: none; }
.quitar:hover { color: var(--error); }
.agregar { align-self: flex-start; padding-left: 0; }

.contador { background: var(--oliva-claro); color: var(--oliva); border-radius: 999px; padding: 0 9px; font-size: .8rem; }
.fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .fotos { grid-template-columns: 1fr 1fr 1fr; } }
.foto { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--fondo); }
.foto.destacada { border: 2px solid var(--dorado); }
.foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #2B3124; }
.pie-foto { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pie-foto strong { font-size: .82rem; }
.pie-foto input { min-height: 40px; padding: 6px 8px; font-size: .9rem; }
.acciones-foto { display: flex; gap: 4px; }
.acciones-foto button { font: inherit; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); border-radius: 8px; flex: 1; min-width: 0; min-height: 40px; padding: 0; cursor: pointer; }
.acciones-foto button:disabled { opacity: .35; }
.acciones-foto button.activa { background: var(--dorado); color: #fff; border-color: var(--dorado); }
.acciones-foto .peligro { color: var(--error); }
.subir { align-self: flex-start; position: relative; }
.subir input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.subir input:focus-visible + .boton { outline: 3px solid var(--dorado); }
fieldset:disabled .subir, fieldset:disabled .agregar, fieldset:disabled .quitar, fieldset:disabled .acciones-foto { display: none; }
.anexo { align-items: flex-start; background: var(--fondo); }
.anexo input { min-height: 40px; padding: 6px 10px; font-weight: 600; }
.tipo-anexo { font-size: 1.4rem; line-height: 40px; }
.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.firmas div { display: flex; flex-direction: column; border-top: 2px solid var(--dorado); padding-top: 8px; }
.firmas small { color: var(--tenue); }

.barra-guardar { position: sticky; bottom: 0; margin: 12px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--tarjeta); border-top: 1px solid var(--borde); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
.estado-guardado { color: var(--tenue); font-size: .9rem; }
.estado-guardado.error { color: var(--error); }
.eliminar-borrador { text-align: center; margin: 20px 0 0; }
.progreso { position: fixed; inset: 0; background: rgba(20, 24, 17, .55); display: grid; place-items: center; z-index: 10; }
.progreso[hidden] { display: none; }
.progreso .caja { background: var(--tarjeta); border-radius: var(--radio); padding: 20px 24px; width: min(320px, 90vw); text-align: center; }
.progreso progress { width: 100%; accent-color: var(--oliva); }
.titulo-campo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }