:root{
  --dark:#050505;
  --dark-soft:#111111;
  --text-btn:#ffffff;

  /* Dorados más elegantes, menos amarillos */
  --gold-1:#b99652;   /* oro base */
  --gold-2:#d8b56a;   /* oro medio */
  --gold-3:#f0d18a;   /* brillo */

  /* Acento gris/lavanda como el texto "tatus" */
  --accent-cool:#6f748f;
  --accent-cool-soft:#8a90ad;

  /* Fondo global: negro con matiz dorado muy sutil */
  --bg-body-main: linear-gradient(
    145deg,
    #000000 0%,
    #070707 35%,
    #16120b 65%,
    #000000 100%
  );

  /* Botones principales: dorado elegante */
  --bg-action-primary: linear-gradient(
    90deg,
    #5f500f 0%,
    #694707 45%,
    #d19618 100%
  );

  /* Hover opcional para acciones */
  --bg-action-primary-hover: linear-gradient(
    90deg,
    #a57a38 0%,
    #79653a 50%,
    #423921 100%
  );

  /* Botones eliminar: mejor mantenerlos sobrios */
  --bg-action-delete: linear-gradient(
    90deg,
    #7a1f1f 0%,
    #b33434 100%
  );

  /* Bordes o glow dorado suave */
  --bg-back-border: rgba(221, 153, 7, 0.75);

  /* Pills */
  --pill: rgba(216,181,106,.54);
  --pill-active: rgba(216,181,106,.28);
}

[data-theme="default"]{
  --dark:#050505;
  --dark-soft:#111111;
  --text-btn:#ffffff;

  /* Dorados más elegantes, menos amarillos */
  --gold-1:#b99652;   /* oro base */
  --gold-2:#d8b56a;   /* oro medio */
  --gold-3:#f0d18a;   /* brillo */

  /* Acento gris/lavanda como el texto "tatus" */
  --accent-cool:#6f748f;
  --accent-cool-soft:#8a90ad;

  /* Fondo global: negro con matiz dorado muy sutil */
  --bg-body-main: linear-gradient(
    145deg,
    #000000 0%,
    #070707 35%,
    #16120b 65%,
    #000000 100%
  );

  /* Botones principales: dorado elegante */
  --bg-action-primary: linear-gradient(
    90deg,
    #5f500f 0%,
    #694707 45%,
    #d19618 100%
  );

  /* Hover opcional para acciones */
  --bg-action-primary-hover: linear-gradient(
    90deg,
    #a57a38 0%,
    #79653a 50%,
    #423921 100%
  );

  /* Botones eliminar: mejor mantenerlos sobrios */
  --bg-action-delete: linear-gradient(
    90deg,
    #7a1f1f 0%,
    #b33434 100%
  );

  /* Bordes o glow dorado suave */
  --bg-back-border: rgba(221, 153, 7, 0.75);

  /* Pills */
  --pill: rgba(216,181,106,.54);
  --pill-active: rgba(216,181,106,.28);
}

/* TEMA AZUL */
[data-theme="azul"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#1b5fc7;
  --gold-2:#2080f2;
  --gold-3:#66aaff;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 33, 84, 1) 50%,
    rgba(6, 16, 32, 1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(27,95,199,1) 0%,
    rgba(32,128,242,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg, 
    rgba(239,68,68,1) 0%, 
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(32,128,242,.6);

  /* Pill */
  --pill: rgba(32,128,242,.22);
  --pill-active: rgba(32,128,242,.42);
}

/* TEMA VERDE */
[data-theme="verde"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#15803d;
  --gold-2:#22c55e;
  --gold-3:#86efac;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(8, 60, 28, 1) 50%,
    rgba(6, 20, 12, 1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(21,128,61,1) 0%,
    rgba(34,197,94,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg, 
    rgba(239,68,68,1) 0%, 
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(34,197,94,.6);

  /* Pill */
  --pill: rgba(34,197,94,.22);
  --pill-active: rgba(34,197,94,.42);
}

/* TEMA ROJO */
[data-theme="rojo"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#b91c1c;
  --gold-2:#ef4444;
  --gold-3:#fca5a5;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(76, 10, 10, 1) 50%,
    rgba(24, 6, 6, 1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(185,28,28,1) 0%,
    rgba(239,68,68,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg, 
    rgba(220,38,38,1) 0%, 
    rgba(127,29,29,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(239,68,68,.6);

  /* Pill */
  --pill: rgba(239,68,68,.22);
  --pill-active: rgba(239,68,68,.42);
}

/* TEMA VIOLETA */
[data-theme="violeta"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#6d28d9;
  --gold-2:#8b5cf6;
  --gold-3:#c4b5fd;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(45, 20, 89, 1) 50%,
    rgba(16, 10, 29, 1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(109,40,217,1) 0%,
    rgba(139,92,246,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg, 
    rgba(239,68,68,1) 0%, 
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(139,92,246,.6);

  /* Pill */
  --pill: rgba(139,92,246,.22);
  --pill-active: rgba(139,92,246,.42);
}

/* TEMA TURQUESA */
[data-theme="turquesa"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#0f766e;
  --gold-2:#14b8a6;
  --gold-3:#99f6e4;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(8, 66, 62, 1) 50%,
    rgba(7, 18, 18, 1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(15,118,110,1) 0%,
    rgba(20,184,166,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg, 
    rgba(239,68,68,1) 0%, 
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(20,184,166,.6);

  /* Pill */
  --pill: rgba(20,184,166,.22);
  --pill-active: rgba(20,184,166,.42);
}

/* TEMA NARANJA */
[data-theme="naranja"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#c2410c;
  --gold-2:#f97316;
  --gold-3:#fdba74;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(77, 35, 8, 1) 50%,
    rgba(24, 12, 5, 1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(194,65,12,1) 0%,
    rgba(249,115,22,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg, 
    rgba(239,68,68,1) 0%, 
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(249,115,22,.6);

  /* Pill */
  --pill: rgba(249,115,22,.22);
  --pill-active: rgba(249,115,22,.42);
}

/* TEMA DORADO */
[data-theme="dorado"]{
  --dark:#050505;
  --dark-soft:#111111;
  --text-btn:#ffffff;

  /* Dorados más elegantes, menos amarillos */
  --gold-1:#b99652;   /* oro base */
  --gold-2:#d8b56a;   /* oro medio */
  --gold-3:#f0d18a;   /* brillo */

  /* Acento gris/lavanda como el texto "tatus" */
  --accent-cool:#6f748f;
  --accent-cool-soft:#8a90ad;

  /* Fondo global: negro con matiz dorado muy sutil */
  --bg-body-main: linear-gradient(
    145deg,
    #000000 0%,
    #070707 35%,
    #16120b 65%,
    #000000 100%
  );

  /* Botones principales: dorado elegante */
  --bg-action-primary: linear-gradient(
    90deg,
    #5f500f 0%,
    #694707 45%,
    #d19618 100%
  );

  /* Hover opcional para acciones */
  --bg-action-primary-hover: linear-gradient(
    90deg,
    #a57a38 0%,
    #79653a 50%,
    #423921 100%
  );

  /* Botones eliminar: mejor mantenerlos sobrios */
  --bg-action-delete: linear-gradient(
    90deg,
    #7a1f1f 0%,
    #b33434 100%
  );

  /* Bordes o glow dorado suave */
  --bg-back-border: rgba(221, 153, 7, 0.75);

  /* Pills */
  --pill: rgba(216,181,106,.54);
  --pill-active: rgba(216,181,106,.28);
}

/* TEMA ÁMBAR */
[data-theme="ambar"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#c78f1b;
  --gold-2:#f2b020;
  --gold-3:#ffcf66;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(59, 41, 0, 1) 50%,
    rgba(13, 12, 0, 1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(125,79,0,1) 0%,
    rgba(237,182,0,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg, 
    rgba(239,68,68,1) 0%, 
    rgba(185,28,28,1) 100%
    );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(242,176,32,.6);

  /* Pill */
  --pill: rgba(242,176,32,.22);
  --pill-active: rgba(144, 165, 49, 0.22);
}

/* TEMA AMARILLO */
[data-theme="amarillo"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#ca8a04;
  --gold-2:#eab308;
  --gold-3:#fde047;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0,0,0,1) 0%,
    rgba(66,52,4,1) 50%,
    rgba(20,16,3,1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(202,138,4,1) 0%,
    rgba(234,179,8,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg,
    rgba(239,68,68,1) 0%,
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(234,179,8,.6);

  /* Pill */
  --pill: rgba(234,179,8,.22);
  --pill-active: rgba(234,179,8,.42);
}

/* TEMA ROSADO */
[data-theme="rosado"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#be185d;
  --gold-2:#ec4899;
  --gold-3:#f9a8d4;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0,0,0,1) 0%,
    rgba(82,17,52,1) 50%,
    rgba(24,8,18,1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(190,24,93,1) 0%,
    rgba(236,72,153,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg,
    rgba(239,68,68,1) 0%,
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(236,72,153,.6);

  /* Pill */
  --pill: rgba(236,72,153,.22);
  --pill-active: rgba(236,72,153,.42);
}

/* TEMA CELESTE */
[data-theme="celeste"]{
  --dark:#141416;
  --dark-soft:#2b2b2b;
  --text-btn:#ffffff;

  --gold-1:#0284c7;
  --gold-2:#0ea5e9;
  --gold-3:#7dd3fc;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0,0,0,1) 0%,
    rgba(8,47,73,1) 50%,
    rgba(5,18,30,1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgba(2,132,199,1) 0%,
    rgba(14,165,233,1) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg,
    rgba(239,68,68,1) 0%,
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(14,165,233,.6);

  /* Pill */
  --pill: rgba(14,165,233,.22);
  --pill-active: rgba(14,165,233,.42);
}

/* TEMA NEGRO */
[data-theme="negro"]{
  --dark:#0b0b0c;
  --dark-soft:#1a1a1d;
  --text-btn:#ffffff;

  --gold-1:#3a3a3f;
  --gold-2:#6b6b73;
  --gold-3:#d4d4d8;

  /* Fondo global del proyecto */
  --bg-body-main: linear-gradient(
    355deg,
    rgba(0,0,0,1) 0%,
    rgb(81, 81, 85) 50%,
    rgba(12,12,13,1) 100%
  );

  /* Gradiente principal para botones y acciones */
  --bg-action-primary: linear-gradient(
    90deg,
    rgb(37, 37, 39) 0%,
    rgb(71, 71, 77) 100%
  );

  /* Gradiente para botones eliminar */
  --bg-action-delete: linear-gradient(
    90deg,
    rgba(239,68,68,1) 0%,
    rgba(185,28,28,1) 100%
  );

  /* Fondo de los back en cada formulario */
  --bg-back-border: rgba(212,212,216,.45);

  /* Pill */
  --pill: rgba(212,212,216,.18);
  --pill-active: rgba(212,212,216,.35);
}