/* Evergreen CRM: marca de evergreenmexico.com (Inter, verde #3E7629 sobre fondo #F4F6F3, tinta #1A231E).
   Sobre variables de frappe-ui: no se toca el frontend Vue. */

@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;src:url(/assets/evergreen_crm/fonts/inter-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;src:url(/assets/evergreen_crm/fonts/inter-latin-ext-wght.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root, [data-theme="light"]{
  --ev-signal:#3e7629; --ev-signal-hover:#2f5c1f; --ev-ink:#1a231e; --ev-paper:#f4f6f3; --ev-line:#dce3da;
  --font-sans:'Inter',system-ui,sans-serif;
  /* botón sólido primario: negro de frappe-ui -> verde Evergreen */
  --surface-gray-10:#3e7629;
  --surface-gray-9:#2f5c1f;
  /* acentos que eran azul -> verde */
  --ink-blue-2:#3e7629; --ink-blue-3:#3e7629; --ink-blue-4:#3e7629; --ink-blue-5:#2f5c1f;
  --surface-blue-2:#e6f0e1; --surface-blue-3:#d6e7ce; --surface-blue-4:#c4dcb8;
  --outline-blue-1:#85ca68; --outline-blue-2:#85ca68;
}
html, body, button, input, select, textarea, [class*="font-sans"]{font-family:'Inter',system-ui,sans-serif!important}
body{background:var(--ev-paper)}
#app{letter-spacing:-.005em}
/* Lista de pasos "Getting started" de Frappe: no aplica a Evergreen */
nav[data-slot="sidebar"] .rounded-6.shadow-sm.bg-surface-elevation-2{display:none}

/* Login de Frappe (/login) */
.page-card, .login-content .page-card{border:1px solid var(--ev-line);box-shadow:none;border-radius:12px}
.page-card-head .app-logo, .for-login .app-logo{height:auto!important;width:auto!important;max-width:220px;max-height:54px}
.btn-primary, .btn-login{background:var(--ev-signal)!important;border-color:var(--ev-signal)!important;color:#fff!important}
.btn-primary:hover, .btn-login:hover{background:var(--ev-signal-hover)!important}
.navbar{background:#fff}

/* ===== Móvil ===== (< 640 px: el CRM cambia a su layout móvil con menú hamburguesa)
   Solo CSS sobre el frontend compilado. Objetivos táctiles >= 44 px, inputs a 16 px (iOS no hace zoom al enfocar),
   cabecera sin cortes, filas de lista y kanban cómodas, cajón lateral legible. Escritorio no se toca. */
@media (max-width:639px){
  /* Objetivos táctiles */
  #app button, [role="dialog"] button, [data-slot="sidebar-item"], [data-slot="sidebar-item"] a{min-height:44px}
  #app button.size-7, #app button[class*="w-7"], #app button[aria-label]:not(:has(.truncate)){min-width:44px}
  #app button[role="tab"], #app button[class*="appearance-none"]{min-height:44px;padding-inline:14px}
  [data-slot="sidebar-item"]{height:48px!important;font-size:16px}
  [data-slot="sidebar-item"] .truncate{font-size:16px!important}
  [data-slot="sidebar-item"] svg{width:20px;height:20px}

  /* Cabecera: una sola línea, el título corta con puntos suspensivos, nada queda fuera de pantalla */
  #app header{height:56px!important;padding-block:6px;gap:8px}
  #app header > div:first-child{min-width:0;flex:1 1 auto}
  #app header > div:first-child > div{min-width:0;flex-wrap:nowrap;max-width:100%}
  #app header a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:9.5rem;font-size:16px}
  #app header > div:last-child{flex-shrink:0;padding-right:8px}
  /* Ficha: el nombre del lead manda; el enlace de retorno a la lista se oculta (el menú queda a un toque) */
  #app header a:has(~ a), #app header a:has(~ a) + span{display:none}
  #app header a:last-of-type{max-width:none}
  /* Acción principal de la cabecera (Crear): solo icono, cuadrado de 44 px, siempre visible */
  #app header > div:last-child > button[aria-label="Crear"] .truncate{display:none}
  #app header > div:last-child > button[aria-label="Crear"]{width:44px;padding:0}

  /* Formularios: 16 px evita el zoom de iOS; altura táctil */
  #app input:not([type="checkbox"]):not([type="radio"]), #app textarea, #app select,
  [role="dialog"] input:not([type="checkbox"]):not([type="radio"]), [role="dialog"] textarea, [role="dialog"] select,
  #app button[class*="h-7"][class*="w-full"], [role="dialog"] button[class*="h-7"][class*="w-full"]{font-size:16px!important;min-height:44px;height:auto}
  #app input[type="checkbox"], [role="dialog"] input[type="checkbox"]{width:20px;height:20px}
  [role="dialog"] label, [role="dialog"] .text-xs{font-size:14px}

  /* Barra de filtros de la lista: desplazable, sin cortar controles */
  #app input[placeholder]{min-width:9.5rem}

  /* Lista: filas más altas para el dedo, texto legible */
  #app a.rounded-4.cursor-pointer > .contents > div[style*="grid-template-columns"]{height:56px!important}
  #app a.rounded-4.cursor-pointer .text-base{font-size:16px}
  #app div[style*="grid-template-columns"] .text-sm{font-size:13px}

  /* Kanban: una columna casi a pantalla completa con imán; menú de columna visible sin hover */
  #app [data-draggable="true"].min-w-72{min-width:calc(100vw - 48px)!important;width:calc(100vw - 48px)!important;scroll-snap-align:center}
  #app .overflow-x-auto:has(> .flex > [data-draggable="true"]){scroll-snap-type:x mandatory;scroll-padding-inline:16px}
  #app [data-column] a{padding:14px 16px}
  #app [data-column] a, #app [data-column] .text-base{font-size:16px}
  #app button.group-hover\:opacity-100{opacity:1;pointer-events:auto}

  /* Ficha: pestañas con scroll y toque cómodo; barra inferior Responder/Comentario con área segura iOS */
  #app [role="tablist"]{overflow-x:auto;scrollbar-width:none}
  #app .border-t.px-3, #app .border-t.sm\:px-10{padding-bottom:calc(8px + env(safe-area-inset-bottom))}

  /* Modal: cabe en pantalla, margen para el pulgar */
  /* Botón primario: texto blanco también en oscuro (frappe-ui pone tinta oscura sobre el verde) */
  #app button.bg-surface-gray-10, [role="dialog"] button.bg-surface-gray-10{color:#fff!important}

  /* Oscuro: texto secundario con contraste AA sobre #181818 */
  [data-theme="dark"]{--ink-gray-4:#9a9a9a;--ink-gray-5:#b0b0b0;--ink-gray-6:#c4c4c4}
}