/* =========================================================
   KOGU UI — Tokens, componentes y utilidades (unificado)
   - SIN choques con /auth/login.html
   - Grid/toolbar SOLO dentro de páginas de catálogo y modales
   ========================================================= */

/* ===== Paleta (tokens) ===== */
:root{
  --kogu-carbon:#111827;
  --kogu-electric:#2563EB;   /* azul */
  --kogu-mint:#10B981;       /* verde */
  --kogu-cloud:#F3F4F6;

  --kogu-electric-10: rgba(37,99,235,.10);
  --kogu-electric-35: rgba(37,99,235,.35);
  --kogu-electric-45: rgba(37,99,235,.45);
  --kogu-mint-10: rgba(16,185,129,.10);
  --kogu-mint-12: rgba(16,185,129,.12);
  --kogu-mint-35: rgba(16,185,129,.35);
  --kogu-mint-45: rgba(16,185,129,.45);
}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;}
.btn.primary{background:var(--kogu-electric);color:#fff;}
.btn.primary:hover{filter:brightness(.95);}
.btn.success{background:var(--kogu-mint);color:#0b2b1f;}
.btn.success:hover{filter:brightness(.95);}
.btn.ghost{background:#fff;border:1px solid #e5e7eb;color:#111;}
.btn.ghost.blue{border-color:var(--kogu-electric-35);color:var(--kogu-electric);}
.btn.ghost.blue:hover{background:var(--kogu-electric-10);}
.btn.ghost.green{border-color:var(--kogu-mint-35);color:var(--kogu-mint);}
.btn.ghost.green:hover{background:var(--kogu-mint-10);}
.btn.outline{background:#fff;border:1.5px solid #2251FF;color:#2251FF;}
.btn.outline:hover{background:#EEF2FF;}
.btn.danger{background:#DC2626;border-color:#DC2626;color:#fff;}
.btn.danger:hover{background:#B91C1C;border-color:#B91C1C;}
.btn.sm{padding:6px 10px;font-size:14px;line-height:1;border-radius:10px;}

/* ===== Topbar / Nav ===== */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:1px solid #eaeaea;}
.brand{font-weight:800;letter-spacing:.5px;margin-right:12px;text-decoration:none;color:#111;}
.topnav{display:flex;gap:12px;flex-wrap:wrap;}
.topbar-link{padding:6px 8px;border-radius:8px;text-decoration:none;color:#111;position:relative;}
.topbar-link.is-active{background:#eef2ff;color:#1f3aed;}
.topbar .nav a{position:relative;}
.topbar .nav a:hover,.topbar-link:hover{color:var(--kogu-electric);}
.topbar .nav a.is-active:after,.topbar .nav a:hover:after{
  content:"";position:absolute;left:10px;right:10px;bottom:-14px;height:3px;background:var(--kogu-electric);border-radius:3px;
}

/* ===== Cards / Panels ===== */
.card{background:#fff;border:1px solid #eef1f5;border-radius:16px;}
.card.accent-blue{border-left:4px solid var(--kogu-electric);}
.card.accent-green{border-left:4px solid var(--kogu-mint);}
.panel-card{padding:16px;border-radius:16px;background:#fff;border:1px solid #eef1f5;}
.panel.panel-accent{position:relative;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.08);}
.panel.panel-accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:18px 0 0 18px;background:#2251FF;}

/* ===== Badges / Chips ===== */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1;}
.badge.blue{background:var(--kogu-electric-10);color:var(--kogu-electric);}
.badge.green{background:var(--kogu-mint-12);color:var(--kogu-mint);}
.badge.amber{background:rgba(245,158,11,.14);color:#B45309;}
.badge.red{background:rgba(239,68,68,.14);color:#B91C1C;}

/* ===== Títulos con punto ===== */
.h-with-dot{position:relative;padding-left:14px;}
.h-with-dot::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--kogu-electric);}
.h-with-dot.green::before{background:var(--kogu-mint);}

/* ===== Listas y paneles en home ===== */
.panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:32px;}
@media (max-width:1100px){.panels{grid-template-columns:repeat(3,1fr);}}
@media (max-width:800px){.panels{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.panels{grid-template-columns:1fr;}}

/* ===== Tablas ===== */
.table-wrap{position:relative;}
.table{width:100%;border-collapse:separate;border-spacing:0;}
.table thead th{background:#fff;border-bottom:2px solid var(--kogu-cloud);font-weight:700;text-align:left;padding:12px;}
.table td,.table th{border-bottom:1px solid #eef1f5;padding:12px;vertical-align:middle;}
.table tbody tr:hover{background:#f9fafb;}
.table-compact th,.table-compact td{padding:8px 10px;}
.table-compact .center{text-align:center;}
.table-compact .right{text-align:right;}
.table--accent-blue thead th{border-bottom-color:var(--kogu-electric-45);}
.table--accent-green thead th{border-bottom-color:var(--kogu-mint-45);}

/* Celda de usuario (tabla usuarios) */
.col-user{min-width:260px;}
.user-cell{display:flex;align-items:center;gap:10px;}
.user-text{min-width:0;}
.user-name{font-weight:600;color:#0f172a;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-email{font-size:12px;color:#64748b;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}

/* Acciones en celdas (homologado) */
.actions{display:flex;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:nowrap;}
.btn.edit{background:#fff;border:1.5px solid #2251FF;color:#2251FF;border-radius:10px;padding:6px 10px;line-height:1;font-size:14px;}
.btn.edit:hover{background:#EEF2FF;}
.btn.remove{background:#DC2626;border:1px solid #DC2626;color:#fff;border-radius:10px;padding:6px 10px;line-height:1;font-size:14px;}
.btn.remove:hover{background:#B91C1C;border-color:#B91C1C;}

/* Estado / checkbox estético (opcional) */
.col-active{width:44px;}
.row-check{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#f5f7fb;border:1px solid rgba(0,0,0,.06);}
.row-check input{display:none;}
.row-check span{width:16px;height:16px;border-radius:4px;border:2px solid #cbd5e1;display:block;background:#fff;}
.row-check input:checked + span{border-color:#16a34a;background:#16a34a;}
.row-check--head{opacity:.7;}
.row-check--head input + span{border-color:#94a3b8;}

/* ===== Paginación ===== */
.pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 0;}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:13px;color:#111827;cursor:pointer;}
.page-btn:hover{background:#f9fafb;}
.page-btn.is-active{border-color:var(--kogu-electric-45);color:var(--kogu-electric);}
.page-btn.primary{background:var(--kogu-electric);color:#fff;border-color:var(--kogu-electric);}
.page-btn.primary:hover{filter:brightness(.95);}

/* ===== Utilidades generales ===== */
.empty{text-align:center;padding:18px;color:#667085;}
.is-hidden{display:none !important;}
.btn-group{display:inline-flex;gap:6px;}

/* =========================================================
   LAYOUTS **SOLO** PARA CATÁLOGOS Y MODALES
   (evita choques con /auth/login.html)
   ========================================================= */

/* Páginas de catálogo */
.page.page-catalog{padding:16px;max-width:1200px;margin:0 auto;}
.page.page-catalog .page-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.page.page-catalog .page-title{font-size:1.4rem;font-weight:700;margin:0;}
.page.page-catalog .page-actions{margin-left:auto;display:flex;gap:8px;}
.page.page-catalog .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.page.page-catalog .toolbar .spacer{flex:1;}

.page.page-catalog.page-fluid {
  max-width: none;      /* quita el límite de 1200px */
  width: 100%;
  padding-left: 24px;   /* un poco más de aire a los lados */
  padding-right: 24px;
}
@media (max-width: 860px){
  .page.page-catalog.page-fluid { padding-left: 12px; padding-right: 12px; }
}

/* Grid de formularios: SOLO en catálogos y modales */
.page.page-catalog .form-grid,
.modal .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.page.page-catalog .form-grid label,
.modal .form-grid label{display:grid;gap:6px;font-size:.9rem;}
.page.page-catalog .form-grid .switcher,
.modal .form-grid .switcher{align-self:end;}

@media (max-width:860px){
  .page.page-catalog .form-grid,
  .modal .form-grid{grid-template-columns:1fr;}
  .page.page-catalog .page-actions{width:100%;justify-content:flex-end;}
}

.page.page-catalog .input[type="search"]{min-width:280px;}

textarea.input{
  font-family: inherit;   /* quita apariencia de “código” */
  resize: vertical;       /* permite redimensionar si lo necesitas */
  line-height: 1.4;
}
.muted{ color:#6b7280; font-weight:400; font-size:.95em; }

/* =========================================================
   MODAL FULLSCREEN (compartido, pero sin afectar login)
   ========================================================= */
.modal{display:none;position:fixed;inset:0;z-index:60;}
.modal.open{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.45);}
.modal-sheet{
  position:relative;z-index:1;margin:auto;width:96vw;max-width:1280px;height:90vh;
  background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex;flex-direction:column;overflow:hidden;border-left:6px solid var(--kogu-electric);
}
.modal-sheet.green{border-left-color:var(--kogu-mint);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #ececec;background:#fff;position:sticky;top:0;z-index:2;}
.modal-title{font-size:1.1rem;font-weight:700;margin:0;}
.modal-body{padding:16px 18px;overflow:auto;flex:1;}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #ececec;background:#fff;position:sticky;bottom:0;z-index:2;}

/* Grid recomendado dentro de modales fullscreen */
.form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width:860px){.form-grid-2{grid-template-columns:1fr;}}

/* ===== Compactación bajo la topbar (solo home) ===== */
.page.page-home{
  /* reduce el espacio superior solo en el dashboard/home */
  padding-top: 8px;          /* antes ~16–24px */
  padding-left: 16px;
  padding-right: 16px;
}

.page.page-home h1:first-child,
.page.page-home .page-title:first-child{
  margin-top: 6px;           /* neutraliza el margen grande del h1 */
}

/* opcional: si tienes una banda/hero al inicio del home */
.page.page-home .hero,
.page.page-home .panels{
  margin-top: 12px;          /* era ~24–32px */
}

/* no tocar catálogos: mantienen su padding normal */
.page.page-catalog{ padding:16px; }

/* Campos tipo checkout: más marcados */
.form-grid .input,
.form-grid select.input,
.form-grid textarea.input {
  background-color: #ffffff;
  border-radius: 10px;
  border: 2px solid #d4d4d8;          /* borde más grueso */
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #111827;
  transition:
    border-color 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background-color 0.12s ease-out;
}

/* Hover: ya se nota que es interactivo */
.form-grid .input:hover,
.form-grid select.input:hover,
.form-grid textarea.input:hover {
  border-color: #9ca3af;
  background-color: #f9fafb;
}

/* Focus: estilo muy visible tipo checkout */
.form-grid .input:focus,
.form-grid select.input:focus,
.form-grid textarea.input:focus {
  border-color: #111827;
  box-shadow: 0 0 0 1px #11182715;
  outline: none;
}

/* Placeholders un poco más tenues */
.form-grid .input::placeholder,
.form-grid textarea.input::placeholder {
  color: #9ca3af;
}

/* Etiquetas un poco más grandes para balancear el campo marcado */
.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111827;
}

/* ===== Layout específico 3 columnas – formularios de clientes y proveedores ===== */

.form-grid.client-form,
.form-grid.supplier-form {
  display: block; /* sobreescribe el grid general solo para estos formularios */
}

.client-form .form-columns,
.supplier-form .form-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.client-form .form-col,
.supplier-form .form-col {
  flex: 1 1 0;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Título de sección dentro de cada columna */
.client-form .form-section-title,
.supplier-form .form-section-title {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

/* Responsive: en pantallas chicas las columnas se apilan */
@media (max-width: 960px) {
  .client-form .form-col,
  .supplier-form .form-col {
    flex-basis: 100%;
  }
}

/* ===== Chips de días (revisión / pago) – clientes y proveedores ===== */

.days-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.days-chips label{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid #d4d4d8;
  font-size:.8rem;
  font-weight:600;
  color:#111827;
  cursor:pointer;
  background:#fff;
  transition:
    border-color .12s ease-out,
    background-color .12s ease-out,
    color .12s ease-out,
    box-shadow .12s ease-out;
}

/* Ocultamos el checkbox nativo dentro del chip */
.days-chips input[type="checkbox"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* Estado seleccionado (usa :has, soportado en Chrome) */
.days-chips label:has(input:checked){
  border-color:var(--kogu-electric);
  background:var(--kogu-electric-10);
  color:var(--kogu-electric);
  box-shadow:0 0 0 1px var(--kogu-electric-10);
}

.is-hidden {
  display: none;
}


/* ===== Días de revisión / pago — formato compacto (clientes + proveedores) ===== */

.field-days {
  margin-top: 6px;
}

.field-days > label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

.field-days .days-row {
  display: inline-flex;
  gap: 18px;
  align-items: flex-start;
}

.field-days .days-row label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0f172a;
}

.field-days .days-row input[type="checkbox"] {
  margin-bottom: 4px;
}


/* --- Detalle de clientes: fila expandida --- */

tr.details td {
  background: #f7f8fc;          /* fondo suave para diferenciar del renglón principal */
  border-top: 1px solid #e0e3ef;
  padding-top: 0.75rem;
  padding-bottom: 0.9rem;
}

/* Grid de cajas de detalle */
tr.details .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 2rem;
}

/* Caja individual */
.detail-box {
  font-size: 0.875rem;
  line-height: 1.35;
}

/* Etiqueta (klabel): estilo “meta” */
.detail-box .klabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a8194;              /* gris más tenue */
  margin-bottom: 0.15rem;
}

/* Valor (kval): más protagonista */
.detail-box .kval {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2430;              /* texto fuerte */
}

/* En caso de usar cajas anchas (colspan) */
.detail-box--wide {
  grid-column: 1 / -1;
}


/* /front/css/catalogos/clientes.css */

/* -------- Comentarios de cliente (modal) -------- */

.comments-panel {
  padding: 16px 20px 20px;
}

.comments-panel__head {
  margin-bottom: 12px;
}

.comments-panel__title {
  font-weight: 600;
  font-size: 14px;
}

/* Formulario horizontal */

.comments-form-horizontal .comments-form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.comments-form-horizontal .field-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comments-form-horizontal .field-cat {
  flex: 0 0 220px;
}

.comments-form-horizontal .field-comment {
  flex: 1 1 320px;
}

.comments-form-horizontal .field-adj {
  flex: 0 0 240px;
}

.comments-form-horizontal .field-actions {
  flex: 0 0 auto;
}

.comments-form-horizontal .klabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f95a3;
}

.comments-form-horizontal .input-sm {
  height: 38px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
}

.comments-form-horizontal textarea.input-sm {
  height: 38px;
  resize: vertical;
}

.comments-form-horizontal .btn-comment {
  padding-inline: 18px;
}

/* Lista de comentarios */

.comments-list {
  margin-top: 16px;
  border-top: 1px solid #edf0f6;
  padding-top: 10px;
}

.comment-item {
  border-radius: 12px;
  border: 1px solid #edf0f6;
  background: #ffffff;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.comment-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-item__meta {
  font-size: 11px;
  color: #8f95a3;
}

.comment-item__body p {
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 4px;
}

.comment-item__adjunto a {
  font-size: 12px;
  text-decoration: underline;
}

/* Responsive: en móvil vuelve a columna */
@media (max-width: 900px) {
  .comments-form-horizontal .comments-form-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* -------- Comentarios: Detalle visual -------- */

.comment-item__extra {
  border-top: 1px solid #edf0f6;
  margin-top: 6px;
  padding-top: 6px;
}

.comment-item__extra .detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.4;
}

.comment-item__extra .klabel {
  font-weight: 600;
  text-transform: uppercase;
  color: #8f95a3;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.comment-item__extra .kval {
  font-weight: 500;
  color: #212529;
  font-size: 13px;
}

/* --- Comentarios: Chip visual de fecha recordatorio --- */
.comment-item__recordatorio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef5ff;
  border: 1px solid #cfe3ff;
  color: #1a4fa3;
  font-weight: 500;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 13px;
  margin-top: 6px;
}

.comment-item__recordatorio .icon {
  font-size: 15px;
}

.comment-item__recordatorio .label {
  text-transform: uppercase;
  font-size: 11px;
  color: #335d9a;
  font-weight: 600;
}

.comment-item__recordatorio .date {
  font-weight: 600;
  font-size: 13px;
  color: #1a4fa3;
}

.comment-item__recordatorio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef5ff;
  border: 1px solid #cfe3ff;
  color: #1a4fa3;
  font-weight: 500;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 13px;
  margin-top: 6px;
}

.comment-item__recordatorio .icon {
  font-size: 15px;
}

.comment-item__recordatorio .label {
  text-transform: uppercase;
  font-size: 11px;
  color: #335d9a;
  font-weight: 600;
}

.comment-item__recordatorio .date {
  font-weight: 600;
  font-size: 13px;
  color: #1a4fa3;
}

.status {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-pendiente {
  background: #fff3cd;
  color: #856404;
}

.status-completado {
  background: #d4edda;
  color: #155724;
}

.status-vencido {
  background: #f8d7da;
  color: #721c24;
}

/* ================================
   Comentarios proveedores / clientes
   ================================ */

/* Contenedor principal (ya está alineado visualmente con las cards) */
.comments-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Encabezado del panel de comentarios */
.comments-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.comments-panel__head h3 {
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Formulario horizontal para nuevo comentario */
.form-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.form-horizontal .input {
  min-height: 2rem;
}

/* Tamaño compacto para campos cortos (categoría, fecha, status) */
.form-horizontal .input.small {
  min-width: 140px;
  max-width: 200px;
}

/* Campo de texto largo crece en horizontal */
.form-horizontal .input.grow {
  flex: 1 1 220px;
}

/* Botón compacto al final de la fila */
.form-horizontal .btn.sm {
  padding-inline: 0.9rem;
  height: 2.1rem;
  font-size: 0.8rem;
}

/* Ajuste responsive: en pantallas pequeñas apilamos */
@media (max-width: 768px) {
  .form-horizontal {
    flex-direction: column;
    align-items: stretch;
  }

  .form-horizontal .input.small,
  .form-horizontal .input.grow,
  .form-horizontal .btn.sm {
    width: 100%;
    max-width: 100%;
  }
}

/* Lista de comentarios */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Tarjeta de comentario */
.comment-item {
  border-radius: 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0.55rem 0.7rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.comment-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
}

.comment-item__body {
  font-size: 0.85rem;
  color: #111827;
}

/* Meta info (fechas, textos cortos) */
.comment-item__head .meta {
  color: #6b7280;
}

/* Chips reutilizables */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.2;
  border: 1px solid transparent;
}

/* Chip de fecha de recordatorio */
.chip--accent {
  background: rgba(59, 130, 246, 0.06);  /* azul suave */
  border-color: rgba(59, 130, 246, 0.3);
  color: #1d4ed8;
}

/* Chip de status de recordatorio */
.chip--status {
  background: rgba(16, 185, 129, 0.06);  /* verde suave */
  border-color: rgba(16, 185, 129, 0.3);
  color: #047857;
}

/* Estado vacío dentro del panel de comentarios */
.comments-list .empty-state {
  padding: 0.5rem 0;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* ===========================
   Comentarios cliente/proveedor
   =========================== */

.comments-panel {
  border-radius: 20px;
  padding: 16px 20px;
  background: #f9fafc;
}

/* contenedor de la lista */
.comments-list {
  margin-top: 16px;
}

/* tarjeta de comentario */
.comment-card {
  border-radius: 16px;
  border: 1px solid var(--kogu-border-soft, #e2e8f0);
  background: #ffffff;
  padding: 14px 18px;
  margin-bottom: 10px;
}

.comment-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

/* lado izquierdo: categoría + texto */
.comment-cat {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: var(--kogu-text-strong, #111827);
}

.comment-text {
  font-size: 0.95rem;
  color: var(--kogu-text, #1f2933);
}

/* lado derecho: recordatorio + estatus + fecha creada */
.comment-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 220px;
}

.comment-meta .meta {
  text-align: right;
}

/* chips genéricos */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Recordatorio (azul) */
.chip--accent {
  background: var(--kogu-accent-soft, #e5efff);
  color: var(--kogu-accent, #165dff);
}

/* Pendiente (amarillo) */
.chip--warning {
  background: #fff7e0;
  color: #b98500;
}

/* Vencido (rojo) */
.chip--danger {
  background: #ffe5e5;
  color: #c62828;
}

/* texto auxiliar */
.meta {
  font-size: 0.75rem;
  color: var(--kogu-muted, #6b7280);
}

.meta.muted {
  color: var(--kogu-muted, #9ca3af);
}

/* responsive */
@media (max-width: 768px) {
  .comment-card__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .comment-meta {
    align-items: flex-start;
    min-width: auto;
  }

  .comment-meta .meta {
    text-align: left;
  }
}