/* ═══════════════════════════════════════════════════════════════════════
   CONTROLES DE FORMULARIO (campos, botones, avisos) + pantallas de acceso
   y hub de empresas. Se carga SIEMPRE desde layouts/base.blade.php, entre
   app.css y modulos.css: todo el sistema usa .campo y .btn, no solo el login.
   ═══════════════════════════════════════════════════════════════════════ */

.auth-wrap{
  min-height:100vh; display:grid; place-items:center;
  padding:24px; background:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
}
.auth-card{
  width:100%; max-width:410px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:32px 30px;
}
.auth-brand{ display:flex; align-items:center; gap:11px; margin-bottom:26px; }
.auth-brand .mark{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent); color:#fff; flex:none;
}
.auth-brand b{ font-family:var(--display); font-size:19px; font-weight:700; display:block; line-height:1.15; color:var(--ink); }
.auth-brand span{ font-size:12px; color:var(--muted); font-weight:500; }

.auth-card h1{ font-family:var(--display); font-size:21px; font-weight:700; color:var(--ink); margin:0 0 4px; }
.auth-card .sub{ font-size:13px; color:var(--muted); margin-bottom:22px; }

.campo{ margin-bottom:16px; }
.campo label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.campo input[type=text],
.campo input[type=email],
.campo input[type=password],
.campo input[type=date],
.campo input[type=number],
.campo input[type=tel],
.campo input[type=url],
.campo input[type=search]{
  width:100%; padding:11px 13px; font:inherit; font-size:14px;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.campo input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}

/* Los campos de fecha y número traen controles nativos que ignoran el tema.
   Se ajustan para que no desentonen en oscuro. */
.campo input[type=date]{ min-height:42px; }
.campo input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; padding:2px; border-radius:4px;
  filter:var(--icono-filtro, none);
}
.campo input[type=date]::-webkit-calendar-picker-indicator:hover{ opacity:1; background:var(--accent-tint); }
.campo input[type=number]{ -moz-appearance:textfield; }
.campo input[type=number]::-webkit-outer-spin-button,
.campo input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

/* En modo oscuro el icono del calendario es negro sobre fondo oscuro */
:root:not([data-theme="light"]){ --icono-filtro: invert(1) brightness(1.4); }
:root[data-theme="dark"]{ --icono-filtro: invert(1) brightness(1.4); }
:root[data-theme="light"]{ --icono-filtro: none; }
.campo input[aria-invalid=true]{ border-color:var(--crit); }
.campo .error{ display:block; font-size:12px; color:var(--crit); margin-top:5px; font-weight:500; }

/* ── Área de texto ─────────────────────────────────────────────────────── */
.campo textarea{
  width:100%; min-height:88px; padding:11px 13px; font:inherit; font-size:14px;
  line-height:1.5; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); resize:vertical;
  transition:border-color .15s, box-shadow .15s;
}
.campo textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }

/* ── Desplegables ──────────────────────────────────────────────────────── */
/* Flecha propia en SVG: el control del sistema ignora el tema oscuro. */
.campo select{
  width:100%; padding:11px 36px 11px 13px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b7d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px;
  transition:border-color .15s, box-shadow .15s;
}
.campo select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
:root:not([data-theme="light"]) .campo select,
:root[data-theme="dark"] .campo select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c99a9' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* La lista desplegada la pinta el sistema: sin esto sale blanca en oscuro. */
.campo select option{ background:var(--surface); color:var(--ink); }

.campo .ayuda{ display:block; font-size:12px; color:var(--muted); margin-top:5px; line-height:1.45; }

/* ── Estados comunes a todos los controles ─────────────────────────────── */
.campo input::placeholder,
.campo textarea::placeholder{ color:var(--muted); opacity:.75; }

/* Campos de solo lectura (por ejemplo «Mi cuenta»): se veían idénticos a los
   editables y confundían. */
.campo input:disabled,
.campo textarea:disabled,
.campo select:disabled,
.campo input[readonly]{
  background:var(--surface); color:var(--muted);
  border-style:dashed; cursor:not-allowed;
}

/* Un campo con error se marca también por nombre, no solo por aria-invalid. */
.campo.malo input,
.campo.malo select,
.campo.malo textarea{ border-color:var(--crit); }

.recordar{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); margin-bottom:20px; }
.recordar input{ accent-color:var(--accent); width:15px; height:15px; }

.btn{
  width:100%; padding:11px 16px; font:inherit; font-size:14px; font-weight:600;
  color:#fff; background:var(--accent); border:0; border-radius:var(--radius-sm);
  cursor:pointer; transition:filter .15s;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ filter:brightness(.95); }
.btn.sec{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border-strong); }
.btn.auto{ width:auto; padding:9px 15px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; filter:none; }

.aviso{
  padding:11px 13px; border-radius:var(--radius-sm); font-size:13px;
  margin-bottom:18px; font-weight:500; line-height:1.45;
}
.aviso.err{ background:var(--crit-tint); color:var(--crit); }
.aviso.ok{ background:var(--good-tint); color:var(--good); }
.aviso.ojo{ background:var(--warn-tint); color:var(--warn); }
.aviso.info{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); }

.auth-pie{ margin-top:20px; text-align:center; font-size:12px; color:var(--muted); }
.auth-pie a{ color:var(--accent); text-decoration:none; font-weight:600; }
.auth-pie a:hover{ text-decoration:underline; }

/* Dos botones seguidos en la misma tarjeta (verificar correo). */
.auth-card form + form{ margin-top:10px; }

/* ── Hub de empresas ───────────────────────────────────────────────────── */
.hub-wrap{ min-height:100vh; background:var(--bg); padding:40px 24px; }
.hub-inner{ max-width:920px; margin:0 auto; }
.hub-top{ display:flex; align-items:center; gap:14px; margin-bottom:30px; flex-wrap:wrap; }
.hub-top .spacer{ flex:1; }
.hub-top h1{ font-family:var(--display); font-size:24px; font-weight:700; color:var(--ink); margin:0; }
.hub-top .sub{ font-size:13px; color:var(--muted); margin-top:2px; }

.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:15px; }
.hub-card{
  display:block; text-decoration:none; padding:20px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .13s, border-color .13s;
}
.hub-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.hub-card .dot{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-tint); color:var(--accent);
  font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:13px;
}
.hub-card b{ display:block; font-family:var(--display); font-size:16px; font-weight:700; color:var(--ink); }
.hub-card small{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.hub-card .rol{
  display:inline-block; margin-top:12px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:600; background:var(--surface-2);
  color:var(--ink-2); border:1px solid var(--border);
}
.hub-vacio{
  padding:34px; text-align:center; background:var(--surface);
  border:1px dashed var(--border-strong); border-radius:var(--radius); color:var(--muted);
}