/* ===========================
   Tropika Farms — UI PRO Skin
   =========================== */

/* ---------- Variables de marca ---------- */
:root{
  --brand-start:#FF7A00;       /* naranja vivo */
  --brand-end:#FF2768;         /* magenta/rosa */
  --brand-accent:#FFC233;      /* amarillo mango */
  --brand-deep:#BA1752;        /* magenta oscuro para énfasis */
  --ink-900:#0F172A;           /* casi negro */
  --ink-700:#334155;
  --ink-500:#64748B;
  --bg:#F7F8FA;                /* fondo claro */
  --card:#FFFFFF;
  --ok:#16a34a;
  --warn:#d97706;
  --err:#b91c1c;
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-1: 0 10px 30px rgba(17, 24, 39, .08);
  --shadow-2: 0 14px 45px rgba(17, 24, 39, .12);
}

/* ---------- Reset suave ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-900);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
}

/* ---------- Shell ---------- */
.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
  color:#fff; box-shadow:var(--shadow-1);
}
.header .wrap{
  max-width:1100px; margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; gap:16px;
}
.header .logo{
  height:46px; width:auto; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.header .title{
  margin:0; font-weight:800; letter-spacing:.2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.main{ max-width:1100px; margin:22px auto 40px; padding:0 18px; }

/* ---------- Layout ---------- */
.layout-two{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
}
.layout-left{ display:grid; gap:18px; grid-template-columns:1fr; }
.layout-right{ display:grid; gap:18px; grid-template-columns:1fr; }
.layout-full{ grid-column:1/-1; }

/* ---------- Card ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  border:1px solid rgba(2,6,23,.06);
}
.card-header{
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.25));
  border-bottom:1px solid rgba(2,6,23,.06);
}
.card-title{ margin:0; font-size:18px; font-weight:800; color:var(--ink-900); }
.card-body{ padding:18px; }

/* ---------- Cámara PRO ---------- */
.camera-hero{
  position:relative; background: radial-gradient(1200px 300px at 0% 0%, rgba(255,122,0,.12), transparent),
                      radial-gradient(1200px 300px at 100% 0%, rgba(255,39,104,.10), transparent);
  padding:18px;
}
.camera-frame{
  position:relative; border-radius: var(--radius-xl);
  background:#000; overflow:hidden;
  box-shadow: var(--shadow-2);
  border: 2px solid transparent;
}
.camera-frame::before{
  /* borde degradado de marca */
  content:""; position:absolute; inset:-2px; z-index:0;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--brand-start),var(--brand-end));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding:2px;
}
#video, #canvas, #overlay{ display:block; width:100%; height:auto; }
#video{ position:relative; z-index:1; border-radius: inherit; }
#canvas, #overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}

/* Texto guía sobre video */
.capture-hint{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(17,24,39,.55); color:#fff; font-weight:600;
  padding:8px 12px; border-radius:999px; backdrop-filter: blur(4px);
}

/* ---------- Overlay ovalado (si tu js lo pinta en #overlay, aquí lo centramos) */
.oval-mask{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}

/* ---------- Formulario ---------- */
.form-grid{ display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .form-grid{ grid-template-columns: 1fr 1fr; } }
label{ font-size:12px; font-weight:700; color:var(--ink-700); margin-bottom:6px; }
.input, .select, .textarea{
  width:100%; border:1px solid #e5e7eb; background:#fff; color:var(--ink-900);
  padding:10px 12px; border-radius:var(--radius-md);
  outline: none; transition: box-shadow .2s, border-color .2s;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255,39,104,.22);
}
.textarea{ min-height:88px; resize: vertical; }

/* ---------- Botones ---------- */
.btn{
  appearance:none; border:0; cursor:pointer; font-weight:800;
  border-radius:999px; padding:12px 16px; line-height:1;
  transition: transform .04s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary{
  color:#fff;
  background: linear-gradient(90deg,var(--brand-start),var(--brand-end));
  box-shadow: 0 10px 24px rgba(255,39,104,.22);
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-outline{
  border:2px solid var(--brand-end); color:var(--brand-end); background:#fff;
}
.btn-outline:hover{ background:rgba(255,39,104,.06); }
.btn-ghost{ background:transparent; color:var(--ink-700); }
.btn-icon{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- Mensajes / toast fijo ---------- */
#mensaje{
  margin-top:10px; font-weight:700;
}
.msg-ok{ color:var(--ok); }
.msg-warn{ color:var(--warn); }
.msg-err{ color:var(--err); }

/* ---------- Table reporte (si se usa en index para mini log) ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th{ text-align:left; background:#f0f2f5; padding:10px; }
.tbl td{ padding:10px; border-bottom:1px solid #eee; }

/* ---------- Utilidades ---------- */
.mt-12{ margin-top:12px }
.mt-18{ margin-top:18px }
.mt-24{ margin-top:24px }
.mt-32{ margin-top:32px }
.flex{ display:flex; gap:12px; align-items:center; }
.right{ margin-left:auto }
.center{ text-align:center }
small.muted{ color:var(--ink-500) }
.btn-stack{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.history-card .card-body{ overflow-x:auto; }

.modal{
  position:fixed; inset:0; background:rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
  z-index:2000;
}
.modal.hidden{ display:none; }
.modal-content{
  background:#fff; border-radius:16px; padding:24px; width: min(90%, 380px);
  box-shadow:0 20px 60px rgba(0,0,0,0.25); text-align:left;
}
.modal-content h3{ margin-top:0; font-size:20px; }
.modal-content p{ margin:8px 0; font-size:15px; color:#202123; }
.modal-content button{ width:100%; margin-top:16px; }

/* Pills / helpers */
.hidden{ display:none !important; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; font-weight:700;
}
.pill-info{
  background:rgba(255,39,104,.08); color:var(--brand-end); border:1px solid rgba(255,39,104,.35);
}
.enroll-progress{ margin-top:10px; }
.pill-ok{
  background:rgba(22,163,74,.12); color:var(--ok); border:1px solid rgba(22,163,74,.35);
}
.pill-warn{
  background:rgba(217,119,6,.12); color:var(--warn); border:1px solid rgba(217,119,6,.35);
}
.field-error{
  color: var(--err);
  font-size: 12px;
  margin-top:4px;
}

/*------reloj del header*/

#clock {
    color: #dddddd !important; /*le damos color blanco*/
    font-size: 22px;  /*el tamaño*/
    font-weight: 800;
    letter-spacing: .05;
}

/* Overrides layout single-column */
.layout-two{display:flex;flex-direction:column;gap:18px;}
.layout-left,.layout-right{display:flex;flex-direction:column;gap:18px;}
.layout-full{width:100%;}

/* Status banner enrolamiento */
.status-banner{
  text-align:center;
  padding:14px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.65));
  box-shadow: var(--shadow-1);
  margin-bottom:14px;
}
.status-text{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:var(--ink-900);
}
.status-info .status-text{ color:var(--brand-end); }
.status-warn .status-text{ color:var(--warn); }
.status-ok .status-text{ color:var(--ok); }
.status-err .status-text{ color:var(--err); }