/* Mi Peji, mini app. Estetica FIJA del contrato:
   crema #FAF7F2, texto #2B2320, burdeos #7C2D42, salvia #5E7264,
   urgente #D64545, tarjetas blancas radius 14, system-ui, titulos 600. */

:root {
  --crema: #FAF7F2;
  --tinta: #2B2320;
  --burdeos: #7C2D42;
  --salvia: #5E7264;
  --urgente: #D64545;
  --blanco: #FFFFFF;
  --borde: #E8E1D8;
  --suave: #8A7F76;
  --radio: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; margin: 0; }

/* ── cabecera ─────────────────────────────────────────────────────────── */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  position: sticky;
  top: 0;
  background: var(--crema);
  z-index: 5;
}
.cabecera h1 { font-size: 1.35rem; color: var(--burdeos); }
.fecha-header { margin: 2px 0 0; color: var(--suave); font-size: 0.85rem; }

/* ── botones ──────────────────────────────────────────────────────────── */
.btn {
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  background: var(--blanco);
  color: var(--tinta);
  border: 1px solid var(--borde);
}
.btn-acento { background: var(--burdeos); color: var(--blanco); border: none; }
.btn-salvia { background: var(--salvia); color: var(--blanco); border: none; }
.btn-bloque { width: 100%; }
.btn-chico { padding: 5px 9px; font-size: 0.8rem; border-radius: 8px; }
.btn:active { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ── vista principal ──────────────────────────────────────────────────── */
.vista {
  padding: 4px 16px 84px; /* deja lugar a las tabs fijas */
  max-width: 640px;
  margin: 0 auto;
}
.cargando { color: var(--suave); text-align: center; padding: 30px 0; }

/* ── tabs inferiores ──────────────────────────────────────────────────── */
.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 10;
}
.tab {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 2px 9px;
  font-size: 0.68rem;
  color: var(--suave);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tab-icono { font-size: 1.05rem; line-height: 1; }
.tab.activa { color: var(--burdeos); font-weight: 600; }

/* ── tarjetas ─────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 1px 3px rgba(43, 35, 32, 0.06);
}
.titulo-seccion {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--suave);
  margin: 18px 0 4px;
  font-weight: 600;
}

/* ── banners de choque ────────────────────────────────────────────────── */
.banner-choque {
  background: #FDECEC;
  border: 1px solid var(--urgente);
  border-left: 5px solid var(--urgente);
  color: #8C2323;
  border-radius: var(--radio);
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 0.9rem;
  line-height: 1.35;
}
.banner-choque strong { color: var(--urgente); }

/* ── timeline de Hoy ──────────────────────────────────────────────────── */
.item-cita { display: flex; gap: 12px; align-items: flex-start; }
.hora-bloque {
  min-width: 52px;
  flex-shrink: 0;
  text-align: right;
  color: var(--burdeos);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}
.hora-fin { display: block; color: var(--suave); font-weight: 400; font-size: 0.75rem; }
/* min-width:0 en los hijos flex + quiebre de palabra: un titulo largo sin
   espacios ya no estira la tarjeta ni genera scroll horizontal */
.cuerpo-cita { flex: 1; min-width: 0; }
.titulo-cita, .detalle-cita, .texto-tarea, .linea-cita, .linea-plan,
.banner-choque, .proxima-cita, .dia-semana-titulo {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* citas hechas de hoy: apagadas, el check deshace */
.cita-hecha { opacity: 0.6; }
.cita-hecha .titulo-cita { text-decoration: line-through; }
/* menu ⋯ de la cita (editar / cancelar) */
.menu-cita { display: flex; flex-direction: column; gap: 8px; }
.titulo-cita { font-weight: 600; }
.detalle-cita { color: var(--suave); font-size: 0.82rem; margin-top: 2px; }
.item-michi-plan { border-left: 4px solid var(--salvia); }
.item-michi-plan .hora-bloque { color: var(--salvia); }
.chip {
  display: inline-block;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.72rem;
  color: var(--salvia);
  margin-right: 4px;
}
.chip-urgente { color: var(--urgente); border-color: var(--urgente); }
.vacio { color: var(--suave); text-align: center; padding: 18px 0; font-size: 0.9rem; }
.proxima-cita { color: var(--salvia); font-size: 0.85rem; margin: 6px 0 0; }

/* ── tareas ───────────────────────────────────────────────────────────── */
.fila-tarea {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--blanco);
  border-radius: var(--radio);
  margin: 6px 0;
  box-shadow: 0 1px 3px rgba(43, 35, 32, 0.06);
  touch-action: pan-y;
}
.fila-tarea.arrastrando {
  opacity: 0.92;
  box-shadow: 0 6px 16px rgba(43, 35, 32, 0.2);
  position: relative;
  z-index: 3;
}
.agarre {
  cursor: grab;
  color: var(--suave);
  padding: 4px 6px;
  font-size: 1rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.texto-tarea { flex: 1; min-width: 0; font-size: 0.92rem; line-height: 1.3; }
.texto-tarea .detalle-cita { margin-top: 1px; }
.tarea-urgente { border-left: 4px solid var(--urgente); }
.tarea-importante { border-left: 4px solid var(--burdeos); }
.tarea-michi { border-left: 4px solid var(--salvia); }
/* tareas con fecha ya pasada: seccion propia, en rojo */
.tarea-vencida { border-left: 4px solid var(--urgente); }
.titulo-vencidas { color: var(--urgente); }
.botonera-tarea { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.btn-icono {
  border: none;
  background: none;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 5px;
  color: var(--suave);
  border-radius: 8px;
  font-family: inherit;
}
.btn-icono:active { background: var(--crema); }
.btn-check { color: var(--salvia); font-size: 1.1rem; }

/* ── compartir ────────────────────────────────────────────────────────── */
.selector-alcance { display: flex; gap: 8px; margin: 12px 0; }
.selector-alcance .btn.activa { background: var(--burdeos); color: var(--blanco); border: none; }
.texto-compartir {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--blanco);
  color: var(--tinta);
  resize: vertical;
}
.nota-privado { color: var(--salvia); font-size: 0.82rem; margin: 8px 0; }

/* ── mes ──────────────────────────────────────────────────────────────── */
.nav-mes { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.nav-mes h2 { font-size: 1rem; color: var(--burdeos); }
.grilla-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 8px 0;
}
.dia-nombre { text-align: center; font-size: 0.68rem; color: var(--suave); padding: 4px 0; }
.celda-dia {
  background: var(--blanco);
  border-radius: 10px;
  min-height: 46px;
  padding: 4px 2px;
  text-align: center;
  font-size: 0.82rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.celda-dia.hoy-celda { border-color: var(--burdeos); font-weight: 600; }
.celda-dia.seleccionada { background: var(--burdeos); color: var(--blanco); }
.celda-vacia { background: none; }
.punto-citas {
  display: block;
  margin: 3px auto 0;
  font-size: 0.62rem;
  color: var(--salvia);
  font-weight: 600;
}
.celda-dia.seleccionada .punto-citas { color: var(--blanco); }

/* ── semana ───────────────────────────────────────────────────────────── */
.dia-semana-titulo { margin-top: 16px; font-size: 0.92rem; color: var(--burdeos); }
.linea-cita { padding: 6px 0; border-bottom: 1px solid var(--crema); font-size: 0.9rem; }
.linea-cita:last-child { border-bottom: none; }
.hora-linea { color: var(--burdeos); font-weight: 600; margin-right: 6px; }

/* ── mas ──────────────────────────────────────────────────────────────── */
.fila-salud { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--crema); font-size: 0.9rem; }
.fila-salud:last-child { border-bottom: none; }
.valor-ok { color: var(--salvia); font-weight: 600; }
.valor-off { color: var(--suave); }
.campo-ics { display: flex; gap: 8px; margin-top: 8px; }
.campo-ics input {
  flex: 1;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.8rem;
  background: var(--crema);
  color: var(--tinta);
  min-width: 0;
}

/* ── modal ────────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(43, 35, 32, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}
.modal.oculto { display: none; }
.hoja-modal {
  background: var(--blanco);
  border-radius: var(--radio) var(--radio) 0 0;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0));
}
.hoja-modal h2 { color: var(--burdeos); font-size: 1.05rem; margin-bottom: 12px; }
.campo { margin: 10px 0; }
.campo label { display: block; font-size: 0.8rem; color: var(--suave); margin-bottom: 4px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--blanco);
  color: var(--tinta);
}
.campo-doble { display: flex; gap: 10px; }
.campo-doble .campo { flex: 1; }
.campo-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 0.9rem; }
.campo-check input { width: auto; }
.acciones-modal { display: flex; gap: 10px; margin-top: 14px; }
.acciones-modal .btn { flex: 1; }
.eleccion-nuevo { display: flex; gap: 10px; }
.eleccion-nuevo .btn { flex: 1; padding: 18px 10px; font-size: 1rem; }

/* ── aviso flotante ───────────────────────────────────────────────────── */
.aviso {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tinta);
  color: var(--blanco);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.85rem;
  z-index: 30;
  max-width: 88vw;
  text-align: center;
}
.aviso.oculto { display: none; }

/* ── plan de acomodo ──────────────────────────────────────────────────── */
.linea-plan { padding: 7px 0; border-bottom: 1px solid var(--crema); font-size: 0.9rem; }
.linea-plan:last-child { border-bottom: none; }
.motivo-plan { color: var(--salvia); font-size: 0.8rem; display: block; }

/* ── login ────────────────────────────────────────────────────────────── */
.cuerpo-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.tarjeta-login {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 28px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 2px 10px rgba(43, 35, 32, 0.08);
  text-align: center;
}
.tarjeta-login h1 { color: var(--burdeos); font-size: 1.4rem; }
.login-sub { color: var(--suave); font-size: 0.9rem; margin: 8px 0 18px; }
.tarjeta-login input {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 1rem;
  margin-bottom: 12px;
  font-family: inherit;
}
.login-msj { color: var(--urgente); font-size: 0.85rem; min-height: 1.2em; margin: 10px 0 0; }
.login-nota { color: var(--suave); font-size: 0.78rem; margin-top: 16px; line-height: 1.4; }