/* =========================================================================
   Portal interno cnll.mx — hoja de estilos
   Tokens de marca sacados del manual (ManualCANALLA_2_1.pdf) y del Figma
   "Portal" (fileKey 0Vey6nheMTOwaYkMhulHOD). Un solo archivo, responsive
   por media queries — no hay una build "mobile" aparte, es el mismo HTML
   con el mismo CSS colapsando en breakpoint.

   Nota de tipografía: la marca usa "New Grotesk", que no está disponible
   como stack de sistema. Usamos Inter (Google Fonts) como sustituto —
   mismo peso visual, misma jerarquía (Light/Regular/Medium/SemiBold).
   Si consiguen los archivos de New Grotesk, solo hay que cambiar el
   @import de abajo y el valor de --font-family.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* --- Colores de marca --- */
  --negro-canalla: #000000;
  --blanco: #ffffff;
  --gris-canalla: #353535;
  --gris-canallesco: #d8d8d8;
  --amarillo-canalla: #edff00;
  --el-rosita: #ff7e7b;
  --el-mentita: #a3e6b4;
  --el-azulito: #a9c0f5;

  /* --- Tonos derivados de uso frecuente --- */
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-muted: #808080;
  --bg-page: #ffffff;
  --bg-subtle: #f9f9f9;
  --border-color: #d9d9d9;

  /* --- Tipografía --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Radios y espaciados reutilizados --- */
  --radius-card: 20px;
  --radius-pill: 100px;
  --radius-input: 12px;

  /* --- Transiciones --- */
  --ease: 150ms ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

img { max-width: 100%; display: block; }

.muted { color: var(--text-secondary); }

/* =========================================================================
   Layout general
   ========================================================================= */

.page-wrap {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  padding-left: 64px;
  padding-right: 64px;
}

@media (max-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }
}

/* =========================================================================
   Navbar
   ========================================================================= */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 64px;
  border-bottom: 1px solid var(--border-color);
}

.navbar .logo-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar .wordmark {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.navbar .portal-label {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.navbar .nav-links a {
  font-weight: 500;
  font-size: 15px;
  transition: opacity var(--ease);
}

.navbar .nav-links a:hover {
  opacity: 0.6;
}

.navbar .nav-links a.active {
  font-weight: 600;
}

.navbar .user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: background var(--ease);
}

.navbar .user-chip:hover {
  background: var(--bg-subtle);
}

.navbar .user-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--amarillo-canalla);
}

.navbar .user-name {
  font-weight: 500;
  font-size: 13px;
}

.navbar .logout-link {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-secondary);
  transition: color var(--ease);
}
.navbar .logout-link:hover {
  color: var(--negro-canalla);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .navbar { padding: 18px 20px; }
  .navbar .nav-links { gap: 0; }
  .navbar .wordmark { font-size: 20px; }
}

/* =========================================================================
   Botones — todos con estado hover/active/disabled
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--negro-canalla);
  color: var(--blanco);
}
.btn-primary:hover { background: #2a2a2a; }
.btn-primary:disabled { background: var(--gris-canallesco); color: #999; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--negro-canalla);
  border: 1px solid var(--negro-canalla);
}
.btn-secondary:hover { background: var(--negro-canalla); color: var(--blanco); }

.btn-danger-text {
  color: var(--el-rosita);
  font-weight: 600;
  font-size: 12.5px;
}
.btn-danger-text:hover { text-decoration: underline; }

.link-action {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--negro-canalla);
  transition: opacity var(--ease);
}
.link-action:hover { opacity: 0.6; text-decoration: underline; }

/* =========================================================================
   Cards / Tags / Pills
   ========================================================================= */

.card {
  background: var(--blanco);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.tool-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-card:hover {
  border-color: #b8b8b8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.tool-card--ghost {
  border-style: dashed;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-secondary);
  cursor: default;
}

.badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
}

.badge--sm { width: 40px; height: 40px; border-radius: 10px; font-size: 13px; }
.badge--lg { width: 52px; height: 52px; border-radius: 14px; font-size: 16px; }
.badge--xs { width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px; flex-shrink: 0; }

.tag-row { display: flex; align-items: center; gap: 8px; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  width: fit-content;
}

.status-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 11.5px;
}
.status-pill--active { background: var(--el-mentita); }
.status-pill--inactive { background: #e6e6e6; color: #666; }

/* =========================================================================
   Cumpleaños (widget de inicio)
   ========================================================================= */

.birthday-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.birthday-pill {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-size: 13.5px;
}

.birthday-pill .birthday-name { font-weight: 600; }
.birthday-pill .birthday-when { color: var(--text-secondary); font-size: 12.5px; }

.birthday-pill--today {
  background: var(--amarillo-canalla);
  border-color: var(--amarillo-canalla);
}

.birthday-pill--today .birthday-when { color: var(--text-primary); font-weight: 500; }

/* =========================================================================
   Aniversario CNLL (widget de inicio) -- mismo patrón que Cumpleaños, con
   acento azul en vez de amarillo para distinguirlos de un vistazo.
   ========================================================================= */

.anniversary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.anniversary-pill {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-size: 13.5px;
}

.anniversary-pill .anniversary-name { font-weight: 600; }
.anniversary-pill .anniversary-when { color: var(--text-secondary); font-size: 12.5px; }

.anniversary-pill--today {
  background: var(--el-azulito);
  border-color: var(--el-azulito);
}

.anniversary-pill--today .anniversary-when { color: var(--text-primary); font-weight: 500; }

/* =========================================================================
   Formularios (login + admin)
   ========================================================================= */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-weight: 500; font-size: 12.5px; }

.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--radius-input);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  transition: border-color var(--ease), background var(--ease);
}

.input-box:focus-within {
  border-color: var(--negro-canalla);
  background: var(--blanco);
}

.input-box input,
.input-box textarea,
.input-box select {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  width: 100%;
  color: var(--text-primary);
}

.toggle-password {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--ease);
}

.toggle-password:hover,
.toggle-password.is-visible { color: var(--negro-canalla); }

.toggle-password svg { display: block; }

.input-box--password .toggle-password { margin-left: 8px; }

.alert {
  padding: 12px 16px;
  border-radius: var(--radius-input);
  font-size: 13.5px;
  margin-bottom: 18px;
}
.alert-error { background: #fdeceb; color: #b3231f; border: 1px solid #f6c8c6; }
.alert-success { background: #eafaf0; color: #1c7a3d; border: 1px solid #c5ecd4; }

/* =========================================================================
   Login page
   ========================================================================= */

.login-page { background: var(--bg-subtle); }

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

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--blanco);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (max-width: 640px) {
  .login-card { padding: 0; border: none; box-shadow: none; }
  .login-wrap { padding: 24px; align-items: flex-start; padding-top: 64px; }
}

.login-wordmark { font-weight: 600; font-size: 22px; }

.login-heading h1 { font-weight: 300; font-size: 30px; margin-bottom: 8px; }
.login-heading p { font-size: 14px; }

.login-form .field:last-of-type { margin-bottom: 26px; }

.login-helper {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.login-helper a { font-weight: 600; color: var(--text-primary); }
.login-helper a:hover { text-decoration: underline; }

/* =========================================================================
   Dashboard: hero + anuncios + herramientas
   ========================================================================= */

.hero { padding: 56px 64px 32px; }
.hero h1 { font-weight: 300; font-size: 42px; margin-bottom: 8px; }
.hero p { font-size: 15px; }

.section { padding: 8px 64px 48px; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-header h2 { font-weight: 300; font-size: 26px; }
.section-header .see-all {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color var(--ease);
}
.section-header .see-all:hover { color: var(--text-primary); }

.announcements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.announcement-card {
  padding: 22px;
  padding-left: 19px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left-width: 4px;
  border-left-style: solid;
}

.announcement-card h3 { font-weight: 600; font-size: 16px; }
.announcement-card p { font-size: 13px; color: var(--text-secondary); }
.announcement-card .meta { font-size: 11.5px; color: var(--text-muted); }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tool-card .tool-name { font-weight: 600; font-size: 17px; }
.tool-card .tool-url { font-weight: 500; font-size: 12.5px; color: var(--text-secondary); }
.tool-card .tool-desc { font-size: 13.5px; color: var(--text-secondary); flex: 1; }
.tool-card .tool-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.tool-card .tool-actions .btn { padding: 9px 16px; font-size: 12.5px; }

@media (max-width: 900px) {
  .announcements-grid, .tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero { padding: 24px 20px 8px; }
  .hero h1 { font-size: 28px; }
  .section { padding: 8px 20px 32px; }
  .section-header h2 { font-size: 22px; }
}

/* =========================================================================
   Página de detalle de herramienta
   ========================================================================= */

.detail-header {
  display: flex;
  gap: 24px;
  padding: 48px 64px;
  border-bottom: 1px solid var(--border-color);
}

.detail-header .badge { flex-shrink: 0; }
.detail-header h1 { font-weight: 300; font-size: 36px; margin-bottom: 6px; }
.detail-header .tool-url { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.detail-header .tool-desc { font-size: 14.5px; color: #333; max-width: 560px; margin-bottom: 20px; }
.detail-header .detail-actions { display: flex; gap: 14px; }

.detail-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 40px 64px 64px;
}

.steps-list { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.step-row { display: flex; gap: 14px; align-items: flex-start; }
.step-number {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--amarillo-canalla);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12.5px; flex-shrink: 0;
}
.step-row p { font-size: 13.5px; color: #262626; }

.info-card {
  background: var(--bg-subtle);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.info-row { display: flex; align-items: center; justify-content: space-between; }
.info-row .label { font-weight: 500; font-size: 13px; color: var(--text-secondary); }
.info-row .value { font-weight: 600; font-size: 13.5px; }

@media (max-width: 900px) {
  .detail-header { flex-direction: column; padding: 28px 20px; }
  .detail-body { grid-template-columns: 1fr; padding: 24px 20px 40px; }
}

/* =========================================================================
   Listado completo de anuncios (público y admin)
   ========================================================================= */

.announcements-list { display: flex; flex-direction: column; gap: 16px; }

.announcement-row {
  padding: 24px;
  padding-left: 21px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-left-width: 4px;
  border-left-style: solid;
}

.announcement-row .text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.announcement-row h3 { font-weight: 600; font-size: 17px; }
.announcement-row p { font-size: 13.5px; color: #595959; }
.announcement-row .meta { font-size: 12px; color: var(--text-muted); }
.announcement-row .actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

/* =========================================================================
   Admin: tabla de usuarios
   ========================================================================= */

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px 64px 32px;
}
.admin-header .eyebrow { font-weight: 600; font-size: 12px; letter-spacing: 0.05em; color: var(--text-secondary); }
.admin-header h1 { font-weight: 300; font-size: 36px; margin: 6px 0; }
.admin-header p { font-size: 14.5px; color: var(--text-secondary); }

.admin-body { padding: 0 64px 64px; }

.admin-subnav {
  display: flex;
  gap: 8px;
  padding: 0 64px;
  margin-bottom: 8px;
}

.admin-subnav-tab {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text-secondary);
  transition: background var(--ease), color var(--ease);
}
.admin-subnav-tab:hover { background: var(--bg-subtle); color: var(--text-primary); }
.admin-subnav-tab.active { background: var(--negro-canalla); color: var(--blanco); font-weight: 600; }

@media (max-width: 900px) {
  .admin-subnav { padding: 0 20px; overflow-x: auto; }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.table-input {
  width: 100%;
  min-width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-subtle);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
}
.table-input:focus { outline: none; border-color: var(--negro-canalla); background: var(--blanco); }

.credential-copy-row { gap: 8px; }
.credential-copy-row input { font-family: inherit; }
.btn-copy {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--blanco);
  border: 1px solid var(--border-color);
}
.btn-copy:hover { background: var(--negro-canalla); color: var(--blanco); border-color: var(--negro-canalla); }
.btn-copy.copied { color: #1c7a3d; border-color: #c5ecd4; background: #eafaf0; }

.data-table thead th {
  background: var(--bg-subtle);
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 14px 24px;
  text-transform: uppercase;
}

/* La celda "Acciones" siempre va alineada a la derecha (td.actions) — el
   encabezado debe alinearse igual o queda desfasado, sobre todo en filas
   con varias acciones (Editar + Restablecer + Desactivar). */
.data-table thead th.th-actions { text-align: right; }

.data-table tbody td {
  padding: 18px 24px;
  border-top: 1px solid #ececec;
  font-size: 14px;
}

.data-table tbody tr:hover { background: #fafafa; }

.data-table td.actions { text-align: right; white-space: nowrap; }
.data-table td.actions .link-action + .link-action,
.data-table td.actions form { display: inline-block; margin-left: 18px; }

/* Tabla de Usuarios: a diferencia de Herramientas (siempre "Editar" +
   "Eliminar" en cada fila), aquí el contenido varía por fila — "Desactivar"
   vs. "Reactivar" vs. "(tú)" en tu propia fila. Con solo text-align:right,
   cada fila queda con un ancho total distinto y "Editar" no cae en la misma
   columna en todas las filas. Un grid con columnas de ancho fijo asegura
   que cada acción caiga siempre en la misma posición, sin importar qué
   tan corto o largo sea el texto de las demás columnas de esa fila. */
.data-table td.user-actions {
  display: grid;
  grid-template-columns: 56px 180px 100px;
  justify-content: end;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}
.data-table td.user-actions > * { text-align: left; margin: 0; }

@media (max-width: 900px) {
  .admin-header, .admin-body { padding-left: 20px; padding-right: 20px; }
  .data-table { display: block; overflow-x: auto; }
}

/* =========================================================================
   Modal simple (usado en admin para "+ Agregar usuario" / "+ Nuevo anuncio")
   ========================================================================= */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20,20,20,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-box {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 20px;
  padding: 32px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}

.modal-box h2 { font-weight: 300; font-size: 24px; margin-bottom: 20px; }

.modal-actions { display: flex; gap: 12px; margin-top: 8px; }
.modal-actions .btn { flex: 1; }

.modal-close {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--ease);
}
.modal-close:hover { color: var(--text-primary); }

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 64px;
  border-top: 1px solid var(--border-color);
}
.footer .footer-text { font-size: 12.5px; color: var(--text-muted); }
.footer .footer-links { display: flex; gap: 24px; }
.footer .footer-links a { font-weight: 500; font-size: 12.5px; color: #333; transition: opacity var(--ease); }
.footer .footer-links a:hover { opacity: 0.6; }

@media (max-width: 768px) {
  .footer { padding: 20px; flex-direction: column; gap: 10px; text-align: center; }
}