/* ───────────────────────────────────────────────
   European Payroll Calculator – Hoja de estilos
   Guarda este archivo como: assets/css/style.css
   ─────────────────────────────────────────────── */

/* ===== 1. Variables de color ===== */
:root {
    --epc-bg-page:         #F8F9FA;
    --epc-bg-card:         #FFFFFF;
  
    --epc-text-main:       #111827; /* casi negro                  */
    --epc-text-muted:      #6B7280; /* gris medio                  */
    --epc-text-label:      #374151; /* gris oscuro                 */
    --epc-border:          #E5E7EB;
  
    --epc-blue-dark:       #2563EB; /* salario bruto               */
    --epc-blue-medium:     #3B82F6; /* contribución empleador      */
    --epc-blue-light:      #CBD5E1; /* impuestos / otros           */
  
    /* Paleta de contraste elevado */
    --epc-text-title:      #1F2937; /* gris azulado muy oscuro     */
    --epc-text-strong:     #0F172A; /* casi negro — ratio 17:1     */
    --epc-text-sub:        #475569; /* gris carbón                 */
    --epc-text-legend:     #334155; /* gris carbón +1 tono         */
    --epc-text-legend-val: #1E293B; /* gris carbón más oscuro      */
  }
  
  /* ===== 2. Reset rápido + tipografía ===== */
  body.epc-body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: var(--epc-bg-page);
    color: var(--epc-text-main);
    -webkit-font-smoothing: antialiased;
  }
  
  /* ===== 3. Contenedor principal ===== */
  .epc-card {
    max-width: 420px;
    margin: 3rem auto;
    padding: 2.25rem 1.75rem;
    background: var(--epc-bg-card);
    border: 1px solid var(--epc-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
  }
  
  /* ===== 4. Encabezados ===== */
  .epc-card h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    text-align: left;
    color: #000000;                    /* negro puro, contraste máximo */
  }
  
  .epc-card p.subtitle {
    margin: 0 0 1.5rem;
    font-size: .95rem;
    color: var(--epc-text-muted);
  }
  
  /* ===== 5. Labels e inputs ===== */
  .epc-field          { margin-bottom: 1.25rem; }
  
  .epc-field label {
    display: block;
    font-size: .875rem;
    margin-bottom: .4rem;
    color: var(--epc-text-label);
  }
  
  .epc-select,
  .epc-input {
    width: 100%;
    padding: .65rem .8rem;
    font-size: 1rem;
    border: 1px solid var(--epc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--epc-text-main);
  }
  
  /* flecha del <select> */
  .epc-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
  }
  
  /* ===== 6. Métricas (Cost / Net) ===== */
  .epc-metrics {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 1.1rem;
  }
  .epc-metric { flex: 1 1 48%; }
  
  .epc-metric h3 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--epc-text-title);
    margin: 0 0 .35rem;
  }
  
  .epc-metric .value {
    font-size: 2rem;                 /* ↑ tamaño */
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--epc-text-strong);   /* contraste máximo */
    margin-bottom: .15rem;
  }
  
  .epc-metric .subvalue {
    font-size: .85rem;
    font-weight: 600;                /* ↑ peso */
    color: var(--epc-text-sub);
  }
  
  /* ===== 7. Barra de desglose ===== */
  .epc-breakdown { margin-bottom: 1.35rem; }
  
  .epc-bar {
    display: flex;
    height: 14px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: .75rem;
  }
  .epc-bar .gross    { background: var(--epc-blue-dark);   }
  .epc-bar .employer { background: var(--epc-blue-medium); }
  .epc-bar .other    { background: var(--epc-blue-light);  }
  
  /* borde blanco interno para separar segmentos */
  .epc-bar > div:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.4);
  }
  
  /* Leyenda */
  .epc-legend {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    color: var(--epc-text-legend);
  }
  .epc-legend .bold {
    font-weight: 600;
    color: var(--epc-text-legend-val);
  }
  
  /* ===== 8. Enlaces secundarios ===== */
  .epc-secondary { margin-top: .25rem; border-top: 1px solid var(--epc-border); }
  
  .epc-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem 0;
    font-size: .95rem;
    text-decoration: none;
    color: var(--epc-text-main);
    border-bottom: 1px solid var(--epc-border);
  }
  .epc-link:last-child { border-bottom: none; }
  .epc-link:hover      { background: rgba(0,0,0,.025); }
  
  .epc-link::after {
    content: "›";
    font-size: 1.1rem;
    line-height: 1;
    color: var(--epc-text-muted);
    transition: transform .15s ease;
  }
  .epc-link:hover::after { transform: translateX(2px); }
  
  /* ===== 9. Responsive ajustes ===== */
  @media (max-width: 480px) {
    .epc-card          { padding: 1.75rem 1.25rem; }
    .epc-metric .value { font-size: 1.55rem;       }
  
    /* Leyenda pasa a columna y permite saltos de línea */
    .epc-legend {
      flex-direction: column;
      align-items: flex-start;
      gap: .35rem;
    }
    .epc-legend span {
      white-space: normal;
    }
  }