/* Variables de color */
:root {
    /* Paleta base */
    --color-primary: #a704b6;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --color-white: #fff;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
  
    /* Colores de la barra lateral */
    --sidebar-width: 250px;
    --sidebar-collapsed: 70px;
    --navbar-height: 60px;
    --text-color: #5a5c69;
    --light-bg: #f8f9fa;
  
    /* Paleta personalizada para Desarrollo Urbano */
    --color-primary-desarrollo-urbano: rgb(190, 48, 160);
    --color-primary-dark-desarrollo-urbano: rgb(170, 40, 182);
    --color-primary-light-desarrollo-urbano: #7e57c2;
    --color-secondary-desarrollo-urbano: #10b981;
    --color-dark-desarrollo-urbano: #00ff84;
    --color-light-desarrollo-urbano: #f8fafc;
    --color-gray-desarrollo-urbano: #94a3b8;
  
    /* Variables de texto y fondo */
    --color-dark-text: #1e293b;
    --color-medium-text: #4a5568;
    --color-light-text: #718096;
    --color-light-background: #f7fafc;
    --color-card-background: #ffffff;
  
    /* Estados y acentos */
    --color-success-accent: #5cc661;
    --color-danger-accent: #E53935;
    --color-warning-accent: #FB8C00;
    --color-info-accent: #039BE5;
    --color-gray-accent: #90A4AE;
    --color-gray-light: #f3f4f6ea;
    --color-background: #f7fafc;
    --color-border: #e2e8f0;
  
    /* Variables para compatibilidad con revision-recepcion.css */
    --primary: #2980b9;
    --primary-dark: #2c3e50;
    --primary-light: #3498db;
    --success: #27ae60;
    --danger: #e74c3c;
    --warning: #f1c40f;
    --info: #3498db;
    --secondary: #6c757d;
    --gray: #95a5a6;
    --white: #ffffff;
    --border: #e0e6ed;
    --radius: 14px;
    --shadow: 0 4px 18px rgba(0,0,0,0.1);
  
    /* Utilidades */
    --border-radius: 8px;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  
    /* Auxiliares para iniciar.css usando paleta Desarrollo Urbano */
    --radius: 12px;
    --shadow: 0 4px 24px rgba(211, 70, 180, 0.10);
    --color-bg-section: #f8f3fc;
    --color-primary-accent: var(--color-primary-desarrollo-urbano);
    --color-primary-dark-accent: var(--color-primary-dark-desarrollo-urbano);   /*var(--color-dark-text);*/
    --color-primary-light-accent: var(--color-primary-light-desarrollo-urbano);
  }
    
  /* Estilos generales */
  
  .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      font-weight: 500;
      text-align: center;
      transition: all 0.3s ease;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(211, 70, 180, 0.08);
      letter-spacing: 0.5px;
  }
  
  /* Botones principales*/
  
  /* Botones secundarios*/
  
  .btn-detalle {
      background: var(--color-primary-accent);
      color: var(--color-white);
      border: none;
      border-radius: 8px;
      padding: 0.6em 1.4em;
      font-weight: 600;
      font-size: 1em;
      min-width: 120px;
      transition: background 0.2s;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
      box-shadow: 0 2px 8px rgba(165,47,149,0.06);
  }
  .btn-detalle:hover {
      background: var(--color-primary-dark-accent);
      color: var(--color-white);
  }
  
  .btn-nuevo-tramite {
      background: linear-gradient(90deg, var(--color-primary-accent), var(--color-primary-dark-accent));
      color: var(--color-white);
      border: none;
      border-radius: 8px;
      padding: 0.9rem 2.1rem;
      font-weight: 700;
      font-size: 1.1rem;
      cursor: pointer;
      transition: background 0.2s;
      box-shadow: 0 2px 8px rgba(165,47,149,0.09);
      display: flex;
      align-items: center;
      gap: 0.7rem;
  }
  .btn-nuevo-tramite:hover {
      background: var(--color-primary-dark-accent);
      color: var(--color-white);
  }