/* Paleta de marca Provecto -- ver claude/decisiones_marca_y_cuentas.md
   Primary #142D31 · Deep #1E4449 · Mid #3A7178 · Accent #D4A855 · Light #F5F2EC */

:root {
  --primary: #142D31;
  --deep: #1E4449;
  --mid: #3A7178;
  --accent: #D4A855;
  --light: #F5F2EC;

  --texto: var(--primary);
  --texto-suave: #4C6367;
  --borde: #D8DED9;
  --fondo: var(--light);
  --superficie: #FFFFFF;
  --error: #B3413A;

  /* TODO: sustituir por la tipografía de marca en cuanto llegue el .ttf */
  --fuente: "Manrope", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  min-height: 100vh;
}

.pantalla-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta-auth {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 2px 8px rgba(20, 45, 49, 0.08);
}

.tarjeta-auth h1 {
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--primary);
}

.tarjeta-auth p.subtitulo {
  margin: 0 0 24px;
  color: var(--texto-suave);
  font-size: 14px;
}

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

.campo label {
  font-size: 13px;
  color: var(--texto-suave);
}

.campo input {
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--fondo);
  color: var(--texto);
}

.campo input:focus {
  outline: 2px solid var(--mid);
  outline-offset: 1px;
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.campo-checkbox a { color: var(--mid); }

.btn {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: var(--light);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover { background: var(--deep); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn--acento {
  background: var(--accent);
  color: var(--primary);
}

.enlace-alterno {
  text-align: center;
  margin-top: 18px;
  font-size: 14px;
  color: var(--texto-suave);
}

.enlace-alterno a {
  color: var(--mid);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.mensaje-error {
  background: #FBEAE8;
  color: var(--error);
  border: 1px solid #E9C4BF;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  margin-bottom: 14px;
  display: none;
}

.mensaje-error.visible { display: block; }

.mensaje-error--ok {
  background: #E3EFE6;
  color: #3B7A4F;
  border-color: #C3DDC9;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.marca .punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.marca span {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary);
  font-size: 18px;
}

/* ───────────────────────── Captura de documento de identidad ───────────────────────── */

.pantalla-captura {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta-captura {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 2px 8px rgba(20, 45, 49, 0.08);
}

.tarjeta-captura h1 {
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--primary);
}

.captura-paso {
  font-size: 13px;
  font-weight: 600;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 14px;
}

/* Selector de método */

.tarjeta-opcion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  cursor: pointer;
  font-family: inherit;
}

.tarjeta-opcion:hover {
  border-color: var(--mid);
}

.tarjeta-opcion__titulo {
  font-weight: 600;
  color: var(--primary);
  font-size: 15px;
}

.tarjeta-opcion__detalle {
  font-size: 13px;
  color: var(--texto-suave);
}

.btn-enlace {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--mid);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  font-family: inherit;
}

.btn-enlace--volver {
  text-align: left;
  margin-bottom: 12px;
}

.btn--secundario {
  background: var(--fondo);
  color: var(--primary);
  border: 1px solid var(--borde);
}

.btn--secundario:hover { background: var(--borde); }

/* Cámara y guía de encuadre */

.marco-camara {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586 / 1; /* proporción real de un DNI (ISO/IEC 7810 ID-1) */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  margin-bottom: 14px;
}

.marco-camara video,
.marco-camara canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.marca-agua-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  transform: rotate(-18deg) scale(1.3);
  pointer-events: none;
}

.marca-agua-preview span {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.guia-encuadre {
  position: absolute;
  inset: 6% 5%;
  pointer-events: none;
}

.esquina {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid var(--accent);
}

.esquina--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.esquina--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.esquina--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.esquina--br { bottom: 0; right: 0; border-left: none; border-top: none; }

.texto-encuadre {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  margin: 0;
  pointer-events: none;
}

.aviso-reflejo {
  display: none;
  background: #FBEAE8;
  color: var(--error);
  border: 1px solid #E9C4BF;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  text-align: center;
}

.aviso-reflejo.visible { display: block; }

.botonera-revision {
  display: flex;
  gap: 10px;
}

.botonera-revision .btn { flex: 1; }

#input-pdf,
#input-anverso,
#input-reverso {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-family: inherit;
}

/* ═══════════════════════ Panel (app.provecto / portal.provecto) ═══════════════════════ */

.pantalla-carga {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
}

.marca--carga span:last-child,
.marca--carga .punto { }
.marca--carga { color: var(--light); }
.marca--carga span:last-child { color: var(--light); }

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

.shell__sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--primary);
  color: var(--light);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.marca--sidebar {
  margin-bottom: 32px;
  padding: 0 8px;
}
.marca--sidebar span:last-child { color: var(--light); }

.nav-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-panel__item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(245, 242, 236, 0.75);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
}

.nav-panel__item:hover {
  background: rgba(245, 242, 236, 0.08);
  color: var(--light);
}

.nav-panel__item--activo {
  background: rgba(212, 168, 85, 0.16);
  color: var(--accent);
  font-weight: 600;
}

.shell__usuario {
  padding: 12px 8px 0;
  border-top: 1px solid rgba(245, 242, 236, 0.15);
}

.shell__usuario-nombre {
  font-weight: 600;
  font-size: 14px;
}

.shell__usuario-rol {
  font-size: 12.5px;
  color: rgba(245, 242, 236, 0.6);
  margin-bottom: 8px;
}

.shell__usuario .btn-enlace {
  color: rgba(245, 242, 236, 0.7);
  text-align: left;
  padding: 4px 0;
}

.shell__contenido {
  flex: 1;
  padding: 32px 40px;
  max-width: 980px;
}

.titulo-vista {
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--primary);
}

.cabecera-vista {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.texto-suave { color: var(--texto-suave); font-size: 14px; }

.aviso-error-vista {
  background: #FBEAE8;
  color: var(--error);
  border: 1px solid #E9C4BF;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
}

/* Tarjetas de métricas del resumen */

.tarjetas-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.tarjeta-metrica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 16px;
}

.tarjeta-metrica--alerta {
  border-color: var(--accent);
  background: #FBF6EC;
}

.tarjeta-metrica__numero {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.tarjeta-metrica__etiqueta {
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 6px;
}

.columnas-resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 800px) {
  .shell { flex-direction: column; }
  .shell__sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nav-panel { flex-direction: row; flex-wrap: wrap; }
  .shell__usuario { border-top: none; padding: 0; margin-left: auto; }
  .shell__contenido { padding: 20px; max-width: 100%; }
  .columnas-resumen { grid-template-columns: 1fr; }
}

.panel-seccion {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.panel-seccion h2 {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--primary);
}

.lista-simple {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.etiqueta-tipo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
  background: rgba(58, 113, 120, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Badges de estado */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.badge--verde { background: #E3EFE6; color: #3B7A4F; }
.badge--ambar { background: #FBF0DC; color: #92660D; }
.badge--rojo { background: #FBEAE8; color: var(--error); }
.badge--gris { background: #EDEEEC; color: var(--texto-suave); }

/* Formularios inline */

.tarjeta-formulario {
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.tarjeta-formulario .campo { margin-bottom: 10px; }
.tarjeta-formulario textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.tarjeta-formulario select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--superficie);
}

/* Tablas simples */

.tabla-simple {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
}

.tabla-simple th {
  text-align: left;
  background: var(--fondo);
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 14px;
}

.tabla-simple td {
  padding: 10px 14px;
  border-top: 1px solid var(--borde);
}

/* Tarjetas de proyecto (lista) */

.lista-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.tarjeta-proyecto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tarjeta-proyecto:hover { border-color: var(--mid); }

.tarjeta-proyecto__nombre { font-weight: 600; color: var(--primary); }
.tarjeta-proyecto__empresa { font-size: 13px; color: var(--texto-suave); }

/* Pestañas de proyecto */

.tabs-proyecto {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 20px;
  overflow-x: auto;
}

.tab-proyecto {
  padding: 10px 14px;
  text-decoration: none;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tab-proyecto--activa {
  color: var(--primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Tareas */

.lista-tareas {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-tarea label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.tarea-hecha {
  text-decoration: line-through;
  color: var(--texto-suave);
}

.fila-nueva-tarea,
.fila-nuevo-comentario,
.fila-nuevo-mensaje {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.input-nueva-tarea,
.input-nuevo-comentario,
.fila-nuevo-mensaje input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
}

/* Avances */

.tarjeta-avance__fecha {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-bottom: 4px;
}

/* Chat */

.hilo-chat {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 12px;
}

.mensaje-chat {
  max-width: 70%;
  background: var(--fondo);
  border-radius: 10px;
  padding: 8px 12px;
  align-self: flex-start;
}

.mensaje-chat--propio {
  align-self: flex-end;
  background: rgba(212, 168, 85, 0.15);
}

.mensaje-chat__contenido { font-size: 14px; }
.mensaje-chat__fecha { font-size: 11px; color: var(--texto-suave); margin-top: 4px; }

.fila-nuevo-mensaje button { flex-shrink: 0; }