@import url('https://fonts.googleapis.com/css2?family=Geist+Sans:wght@100..900&display=swap');

:root{
      --body-background:#ffffff; /* light background #f3f4f6; */
      --sidebar:#ffffff;
      --header:#ffffff;
      --header-height: 50px;
      --sidebar-width: 250px;
      --content: #ffffff;
      --panel:#ffffff;
      --primary:#497D58;
      --accent:#4c4d66; /* primary accent */
      --muted:#6b7280;
      --card:#ffffff;
      --error:#dc2626;
      --danger:var(--error);
      --success:#16a34a;
      --info:var(--accent);
      --warning:#f59e0b;

      --error-light:#fee2e2;
      --glass: rgba(0,0,0,0.04);
      --text:oklch(14.5% 0 0);
      --radius:0px;
      --border: 1px solid #e5e7eb;
      --filter-icon-selected: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(118%) contrast(119%);
      --button-radius: 4px;

      --shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
      font-family: 'Geist Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      --text-muted-foreground: oklch(55.6% 0 0);
      --text-title: 1.5rem;


      /**estilos para angular materiral*/
      --mat-standard-button-toggle-state-layer-color: var(--card)!important;
      --mat-standard-button-toggle-text-color:var(--text)!important;
      --mat-standard-button-toggle-background-color: transparent!important;
      
      /* Color cuando está seleccionado */
      --mat-standard-button-toggle-selected-state-background-color: var(--primary)!important;
      --mat-standard-button-toggle-selected-state-text-color: var(--text)!important;


    }

      [data-theme="dark"] {
        --body-background: #1D1F1F; /* dark background #181a1b; */
        --sidebar: #1D1F1F;
        --header:  #1D1F1F;
        --content:  #1D1F1F;
        --panel: #1D1F1F;
        --primary: #497D58;
        --accent: #497D58;
        --muted: #b0b3b8;
        --card: #23272f;
        --glass: rgba(255,255,255,0.04);
        --text: #f3f4f6;
        --radius: 0px;
        --border: 1px solid #494f5c;
        --filter-icon-selected: brightness(0) saturate(100%) invert(80%) sepia(10%) saturate(500%) hue-rotate(87deg) brightness(118%) contrast(119%);
        --shadow: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.3);
      }

    html,body{height:100vh;margin:0;background:var(--body-background);color:var(--text)}
    .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--accent),#535b68);display:flex;align-items:center;justify-content:center;font-weight:500;color:white; font-size: small;}

    .global-loading-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.35);
      z-index: 9999;
      backdrop-filter: blur(2px);
    }

    .global-loading-overlay.is-visible {
      display: flex;
    }

    .global-loading-content {
      min-width: 220px;
      padding: 20px 24px;
      border-radius: 10px;
      background: var(--panel);
      box-shadow: var(--shadow);
      border: var(--border);
      text-align: center;
    }

    .global-loading-spinner {
      width: 34px;
      height: 34px;
      margin: 0 auto 10px;
      border-radius: 50%;
      border: 3px solid rgba(139, 197, 63, 0.25);
      border-top-color: var(--primary);
      animation: global-loading-spin 0.9s linear infinite;
    }

    .global-loading-text {
      margin: 0;
      font-size: 14px;
      color: var(--text);
    }

    @keyframes global-loading-spin {
      to {
        transform: rotate(360deg);
      }
    }

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

    h1, h2, h3, h4, h5, h6 {
      color: var(--text);
      margin: 0;
    }

  .text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
  }    

  mat-card-subtitle{
      color: var(--text-muted-foreground)!important;
  }