{\rtf1\ansi\ansicpg1252\cocoartf2639
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 .AppleSystemUIFontMonospaced-Regular;\f1\fnil\fcharset0 .AppleColorEmojiUI;}
{\colortbl;\red255\green255\blue255;\red201\green206\blue214;\red36\green36\blue35;\red110\green117\blue134;
\red229\green231\blue236;\red239\green99\blue114;\red234\green93\blue109;\red140\green233\blue81;\red82\green235\blue232;
\red95\green167\blue255;\red191\green94\blue241;\red248\green157\blue78;\red243\green155\blue77;}
{\*\expandedcolortbl;;\cssrgb\c82745\c84314\c87059;\cssrgb\c18824\c18824\c18039;\cssrgb\c50588\c53333\c59608;
\cssrgb\c91765\c92549\c94118;\cssrgb\c95686\c48235\c52157;\cssrgb\c94118\c45882\c50196;\cssrgb\c60784\c91373\c38824;\cssrgb\c36863\c92941\c92941;
\cssrgb\c43922\c72157\c100000;\cssrgb\c80000\c48235\c95686;\cssrgb\c98431\c67843\c37647;\cssrgb\c96863\c67059\c37255;}
\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\deftab720
\pard\pardeftab720\partightenfactor0

\f0\fs28 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 <!\cf4 \strokec4 DOCTYPE html\cf2 \strokec2 >\cf5 \strokec5 \
\cf2 \strokec2 <\cf6 \strokec6 html \cf7 \strokec7 lang\cf2 \strokec2 ="\cf8 \strokec8 es\cf2 \strokec2 ">\cf5 \strokec5 \
\cf2 \strokec2 <\cf6 \strokec6 head\cf2 \strokec2 >\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 meta \cf7 \strokec7 charset\cf2 \strokec2 ="\cf8 \strokec8 UTF-8\cf2 \strokec2 ">\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 meta \cf7 \strokec7 name\cf2 \strokec2 ="\cf8 \strokec8 viewport\cf2 \strokec2 "\cf6 \strokec6  \cf7 \strokec7 content\cf2 \strokec2 ="\cf8 \strokec8 width=device-width, initial-scale=1.0\cf2 \strokec2 ">\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 title\cf2 \strokec2 >\cf5 \strokec5 Sistema de Solicitudes de Correo - EPL\cf2 \strokec2 </\cf6 \strokec6 title\cf2 \strokec2 >\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 style\cf2 \strokec2 >\cf5 \strokec5 \
        \cf6 \strokec6 *\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 margin\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-sizing\cf2 \strokec2 :\cf5 \strokec5  border-box\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 body\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-family\cf2 \strokec2 :\cf5 \strokec5  -apple-system\cf2 \strokec2 ,\cf5 \strokec5  BlinkMacSystemFont\cf2 \strokec2 ,\cf5 \strokec5  \cf8 \strokec8 'Segoe UI'\cf2 \strokec2 ,\cf5 \strokec5  Roboto\cf2 \strokec2 ,\cf5 \strokec5  Arial\cf2 \strokec2 ,\cf5 \strokec5  sans-serif\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .container\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 max-width\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1200\cf5 \strokec5 px\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  auto\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .bg-gradient\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  \cf10 \strokec10 linear-gradient\cf2 \strokec2 (\cf9 \strokec9 135\cf5 \strokec5 deg\cf2 \strokec2 ,\cf5 \strokec5  #fff7ed \cf9 \strokec9 0\cf5 \strokec5 %\cf2 \strokec2 ,\cf5 \strokec5  #fef3c7 \cf9 \strokec9 100\cf5 \strokec5 %\cf2 \strokec2 );\cf5 \strokec5  \cf6 \strokec6 min-height\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 100\cf5 \strokec5 vh\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .header\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  \cf10 \strokec10 linear-gradient\cf2 \strokec2 (\cf9 \strokec9 90\cf5 \strokec5 deg\cf2 \strokec2 ,\cf5 \strokec5  #ea580c \cf9 \strokec9 0\cf5 \strokec5 %\cf2 \strokec2 ,\cf5 \strokec5  #dc2626 \cf9 \strokec9 100\cf5 \strokec5 %\cf2 \strokec2 );\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem \cf9 \strokec9 0\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 px \cf9 \strokec9 6\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.1\cf2 \strokec2 );\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .header-content\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  flex\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 align-items\cf2 \strokec2 :\cf5 \strokec5  center\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 justify-content\cf2 \strokec2 :\cf5 \strokec5  space-between\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 flex-wrap\cf2 \strokec2 :\cf5 \strokec5  wrap\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .header-title\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  flex\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 align-items\cf2 \strokec2 :\cf5 \strokec5  center\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.75\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .header-title h1\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 700\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .header-title p\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #fed7aa\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .stats\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  flex\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .stat-item\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 text-align\cf2 \strokec2 :\cf5 \strokec5  center\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .stat-value\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 700\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .stat-label\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #fed7aa\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .tabs\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 2\cf5 \strokec5 px \cf9 \strokec9 4\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.1\cf2 \strokec2 );\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .tabs-content\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  flex\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.25\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .tab-btn\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  flex\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 align-items\cf2 \strokec2 :\cf5 \strokec5  center\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 600\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 px solid transparent\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 cursor\cf2 \strokec2 :\cf5 \strokec5  pointer\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #6b7280\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 transition\cf2 \strokec2 :\cf5 \strokec5  all \cf9 \strokec9 0.2\cf5 \strokec5 s\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .tab-btn:hover\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #ea580c\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .tab-btn.active\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #ea580c\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-bottom-color\cf2 \strokec2 :\cf5 \strokec5  #ea580c\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .main\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2\cf5 \strokec5 rem \cf9 \strokec9 0\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .card\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.75\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 px \cf9 \strokec9 6\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.1\cf2 \strokec2 );\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .card:hover\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 10\cf5 \strokec5 px \cf9 \strokec9 15\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.15\cf2 \strokec2 );\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .card-title\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 700\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #1f2937\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .form-group\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .form-label\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  block\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 600\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #374151\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .form-input\cf2 \strokec2 ,\cf6 \strokec6  .form-select\cf2 \strokec2 ,\cf6 \strokec6  .form-textarea\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 width\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 100\cf5 \strokec5 %\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2\cf5 \strokec5 px solid #d1d5db\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 transition\cf2 \strokec2 :\cf5 \strokec5  border-color \cf9 \strokec9 0.2\cf5 \strokec5 s\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .form-input:focus\cf2 \strokec2 ,\cf6 \strokec6  .form-select:focus\cf2 \strokec2 ,\cf6 \strokec6  .form-textarea:focus\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 outline\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-color\cf2 \strokec2 :\cf5 \strokec5  #ea580c\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .form-textarea\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 resize\cf2 \strokec2 :\cf5 \strokec5  vertical\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-family\cf2 \strokec2 :\cf5 \strokec5  inherit\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .grid\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  grid\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .grid-cols-2\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 grid-template-columns\cf2 \strokec2 :\cf5 \strokec5  \cf10 \strokec10 repeat\cf2 \strokec2 (\cf5 \strokec5 auto-fit\cf2 \strokec2 ,\cf5 \strokec5  \cf10 \strokec10 minmax\cf2 \strokec2 (\cf9 \strokec9 250\cf5 \strokec5 px\cf2 \strokec2 ,\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 fr\cf2 \strokec2 ));\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .section-divider\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 border-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2\cf5 \strokec5 px solid #e5e7eb\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .section-title\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.125\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 600\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #1f2937\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .preview-box\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 margin-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  #fff7ed\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2\cf5 \strokec5 px solid #fed7aa\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .preview-label\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #374151\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .preview-value\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #ea580c\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 700\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .preview-placeholder\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #9ca3af\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .btn\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 width\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 100\cf5 \strokec5 %\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  \cf10 \strokec10 linear-gradient\cf2 \strokec2 (\cf9 \strokec9 90\cf5 \strokec5 deg\cf2 \strokec2 ,\cf5 \strokec5  #ea580c \cf9 \strokec9 0\cf5 \strokec5 %\cf2 \strokec2 ,\cf5 \strokec5  #dc2626 \cf9 \strokec9 100\cf5 \strokec5 %\cf2 \strokec2 );\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 700\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 cursor\cf2 \strokec2 :\cf5 \strokec5  pointer\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 transition\cf2 \strokec2 :\cf5 \strokec5  all \cf9 \strokec9 0.2\cf5 \strokec5 s\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 px \cf9 \strokec9 6\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.1\cf2 \strokec2 );\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .btn:hover\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  \cf10 \strokec10 linear-gradient\cf2 \strokec2 (\cf9 \strokec9 90\cf5 \strokec5 deg\cf2 \strokec2 ,\cf5 \strokec5  #c2410c \cf9 \strokec9 0\cf5 \strokec5 %\cf2 \strokec2 ,\cf5 \strokec5  #b91c1c \cf9 \strokec9 100\cf5 \strokec5 %\cf2 \strokec2 );\cf5 \strokec5  \cf6 \strokec6 transform\cf2 \strokec2 :\cf5 \strokec5  \cf10 \strokec10 scale\cf2 \strokec2 (\cf9 \strokec9 1.02\cf2 \strokec2 );\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .search-box\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  flex\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 align-items\cf2 \strokec2 :\cf5 \strokec5  center\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.75\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 px \cf9 \strokec9 6\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.1\cf2 \strokec2 );\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .search-input\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 flex\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2\cf5 \strokec5 px solid #d1d5db\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .search-input:focus\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 outline\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-color\cf2 \strokec2 :\cf5 \strokec5  #ea580c\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .request-card\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.75\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 px \cf9 \strokec9 6\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.1\cf2 \strokec2 );\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 transition\cf2 \strokec2 :\cf5 \strokec5  box-shadow \cf9 \strokec9 0.2\cf5 \strokec5 s\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .request-card:hover\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 10\cf5 \strokec5 px \cf9 \strokec9 15\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.15\cf2 \strokec2 );\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .request-header\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  flex\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 justify-content\cf2 \strokec2 :\cf5 \strokec5  space-between\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 align-items\cf2 \strokec2 :\cf5 \strokec5  start\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 flex-wrap\cf2 \strokec2 :\cf5 \strokec5  wrap\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .request-title\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.25\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 700\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #1f2937\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .request-subtitle\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #6b7280\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .status-select\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 9999\cf5 \strokec5 px\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 600\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 cursor\cf2 \strokec2 :\cf5 \strokec5  pointer\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .status-pendiente\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  #fef3c7\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #92400e\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .status-proceso\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  #dbeafe\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #1e40af\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .status-completada\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  #dcfce7\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #166534\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .request-details\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  grid\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 grid-template-columns\cf2 \strokec2 :\cf5 \strokec5  \cf10 \strokec10 repeat\cf2 \strokec2 (\cf5 \strokec5 auto-fit\cf2 \strokec2 ,\cf5 \strokec5  \cf10 \strokec10 minmax\cf2 \strokec2 (\cf9 \strokec9 200\cf5 \strokec5 px\cf2 \strokec2 ,\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 fr\cf2 \strokec2 ));\cf5 \strokec5  \cf6 \strokec6 gap\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-bottom\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .detail-item\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .detail-label\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #6b7280\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .detail-value\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 font-weight\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 600\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #1f2937\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .detail-value.email\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #ea580c\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .justification\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 padding-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 px solid #e5e7eb\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .empty-state\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 text-align\cf2 \strokec2 :\cf5 \strokec5  center\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 3\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 border-radius\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.75\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 box-shadow\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 px \cf9 \strokec9 6\cf5 \strokec5 px \cf10 \strokec10 rgba\cf2 \strokec2 (\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0\cf2 \strokec2 ,\cf9 \strokec9 0.1\cf2 \strokec2 );\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .empty-icon\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 width\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 height\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 4\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0\cf5 \strokec5  auto \cf9 \strokec9 1\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #d1d5db\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .empty-text\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #6b7280\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.125\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .footer\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 background\cf2 \strokec2 :\cf5 \strokec5  #1f2937\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  white\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 padding\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem \cf9 \strokec9 0\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 3\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 text-align\cf2 \strokec2 :\cf5 \strokec5  center\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .footer-subtitle\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 color\cf2 \strokec2 :\cf5 \strokec5  #9ca3af\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 font-size\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.875\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 margin-top\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 0.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .icon\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 width\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 height\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .icon-lg\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 width\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf6 \strokec6 height\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 2.5\cf5 \strokec5 rem\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf6 \strokec6 .hidden\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf11 \strokec11 @media \cf2 \strokec2 (\cf6 \strokec6 max-width\cf2 \strokec2 :\cf11 \strokec11  \cf9 \strokec9 768\cf11 \strokec11 px\cf2 \strokec2 )\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5 \
            \cf6 \strokec6 .stats\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 display\cf2 \strokec2 :\cf5 \strokec5  none\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
            \cf6 \strokec6 .grid-cols-2\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 grid-template-columns\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 fr\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
            \cf6 \strokec6 .request-details\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  \cf6 \strokec6 grid-template-columns\cf2 \strokec2 :\cf5 \strokec5  \cf9 \strokec9 1\cf5 \strokec5 fr\cf2 \strokec2 ;\cf5 \strokec5  \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf2 \strokec2 \}\cf5 \strokec5 \
    \cf2 \strokec2 </\cf6 \strokec6 style\cf2 \strokec2 >\cf5 \strokec5 \
\cf2 \strokec2 </\cf6 \strokec6 head\cf2 \strokec2 >\cf5 \strokec5 \
\cf2 \strokec2 <\cf6 \strokec6 body\cf2 \strokec2 >\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 div \cf7 \strokec7 id\cf2 \strokec2 ="\cf8 \strokec8 root\cf2 \strokec2 "></\cf6 \strokec6 div\cf2 \strokec2 >\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 script \cf7 \strokec7 crossorigin\cf6 \strokec6  \cf7 \strokec7 src\cf2 \strokec2 ="\cf8 \strokec8 https://unpkg.com/react@18/umd/react.production.min.js\cf2 \strokec2 "></\cf6 \strokec6 script\cf2 \strokec2 >\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 script \cf7 \strokec7 crossorigin\cf6 \strokec6  \cf7 \strokec7 src\cf2 \strokec2 ="\cf8 \strokec8 https://unpkg.com/react-dom@18/umd/react-dom.production.min.js\cf2 \strokec2 "></\cf6 \strokec6 script\cf2 \strokec2 >\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 script \cf7 \strokec7 src\cf2 \strokec2 ="\cf8 \strokec8 https://unpkg.com/@babel/standalone/babel.min.js\cf2 \strokec2 "></\cf6 \strokec6 script\cf2 \strokec2 >\cf5 \strokec5 \
    \cf2 \strokec2 <\cf6 \strokec6 script \cf7 \strokec7 type\cf2 \strokec2 ="\cf8 \strokec8 text/babel\cf2 \strokec2 ">\cf5 \strokec5 \
        \cf11 \strokec11 const\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  useState\cf2 \strokec2 ,\cf5 \strokec5  useEffect \cf2 \strokec2 \}\cf5 \strokec5  = \cf12 \strokec12 React\cf2 \strokec2 ;\cf5 \strokec5 \
\
        \cf11 \strokec11 const\cf5 \strokec5  storage = \cf2 \strokec2 \{\cf5 \strokec5 \
            \cf10 \strokec10 get\cf5 \strokec5 : \cf2 \strokec2 (\cf13 \strokec13 key\cf2 \strokec2 )\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf11 \strokec11 const\cf5 \strokec5  value = \cf12 \strokec12 localStorage\cf2 \strokec2 .\cf10 \strokec10 getItem\cf2 \strokec2 (\cf5 \strokec5 key\cf2 \strokec2 );\cf5 \strokec5 \
                \cf11 \strokec11 return\cf5 \strokec5  value ? \cf2 \strokec2 \{\cf5 \strokec5  key\cf2 \strokec2 ,\cf5 \strokec5  value \cf2 \strokec2 \}\cf5 \strokec5  : \cf11 \strokec11 null\cf2 \strokec2 ;\cf5 \strokec5 \
            \cf2 \strokec2 \},\cf5 \strokec5 \
            \cf10 \strokec10 set\cf5 \strokec5 : \cf2 \strokec2 (\cf13 \strokec13 key\cf2 \strokec2 ,\cf13 \strokec13  value\cf2 \strokec2 )\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf12 \strokec12 localStorage\cf2 \strokec2 .\cf10 \strokec10 setItem\cf2 \strokec2 (\cf5 \strokec5 key\cf2 \strokec2 ,\cf5 \strokec5  value\cf2 \strokec2 );\cf5 \strokec5 \
                \cf11 \strokec11 return\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  key\cf2 \strokec2 ,\cf5 \strokec5  value \cf2 \strokec2 \};\cf5 \strokec5 \
            \cf2 \strokec2 \},\cf5 \strokec5 \
            \cf10 \strokec10 list\cf5 \strokec5 : \cf2 \strokec2 (\cf13 \strokec13 prefix\cf2 \strokec2 )\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf11 \strokec11 const\cf5 \strokec5  keys = \cf2 \strokec2 [];\cf5 \strokec5 \
                \cf11 \strokec11 for\cf5 \strokec5  \cf2 \strokec2 (\cf11 \strokec11 let\cf5 \strokec5  i = \cf9 \strokec9 0\cf2 \strokec2 ;\cf5 \strokec5  i < \cf12 \strokec12 localStorage\cf2 \strokec2 .\cf5 \strokec5 length\cf2 \strokec2 ;\cf5 \strokec5  i++\cf2 \strokec2 )\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5 \
                    \cf11 \strokec11 const\cf5 \strokec5  key = \cf12 \strokec12 localStorage\cf2 \strokec2 .\cf10 \strokec10 key\cf2 \strokec2 (\cf5 \strokec5 i\cf2 \strokec2 );\cf5 \strokec5 \
                    \cf11 \strokec11 if\cf5 \strokec5  \cf2 \strokec2 (\cf5 \strokec5 key\cf2 \strokec2 .\cf10 \strokec10 startsWith\cf2 \strokec2 (\cf5 \strokec5 prefix\cf2 \strokec2 ))\cf5 \strokec5  keys\cf2 \strokec2 .\cf10 \strokec10 push\cf2 \strokec2 (\cf5 \strokec5 key\cf2 \strokec2 );\cf5 \strokec5 \
                \cf2 \strokec2 \}\cf5 \strokec5 \
                \cf11 \strokec11 return\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5  keys \cf2 \strokec2 \};\cf5 \strokec5 \
            \cf2 \strokec2 \}\cf5 \strokec5 \
        \cf2 \strokec2 \};\cf5 \strokec5 \
\
        \cf11 \strokec11 const\cf5 \strokec5  \cf10 \strokec10 MailIcon\cf5 \strokec5  = \cf2 \strokec2 ()\cf5 \strokec5  => \cf2 \strokec2 (\cf5 \strokec5 \
            <svg className=\cf8 \strokec8 "icon-lg"\cf5 \strokec5  fill=\cf8 \strokec8 "none"\cf5 \strokec5  stroke=\cf8 \strokec8 "currentColor"\cf5 \strokec5  viewBox=\cf8 \strokec8 "0 0 24 24"\cf5 \strokec5 >\
                <path strokeLinecap=\cf8 \strokec8 "round"\cf5 \strokec5  strokeLinejoin=\cf8 \strokec8 "round"\cf5 \strokec5  strokeWidth=\cf8 \strokec8 "2"\cf5 \strokec5  d=\cf8 \strokec8 "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"\cf5 \strokec5 />\
            </svg>\
        \cf2 \strokec2 );\cf5 \strokec5 \
\
        \cf11 \strokec11 const\cf5 \strokec5  \cf10 \strokec10 PlusIcon\cf5 \strokec5  = \cf2 \strokec2 ()\cf5 \strokec5  => \cf2 \strokec2 (\cf5 \strokec5 \
            <svg className=\cf8 \strokec8 "icon"\cf5 \strokec5  fill=\cf8 \strokec8 "none"\cf5 \strokec5  stroke=\cf8 \strokec8 "currentColor"\cf5 \strokec5  viewBox=\cf8 \strokec8 "0 0 24 24"\cf5 \strokec5 >\
                <path strokeLinecap=\cf8 \strokec8 "round"\cf5 \strokec5  strokeLinejoin=\cf8 \strokec8 "round"\cf5 \strokec5  strokeWidth=\cf8 \strokec8 "2"\cf5 \strokec5  d=\cf8 \strokec8 "M12 4v16m8-8H4"\cf5 \strokec5 />\
            </svg>\
        \cf2 \strokec2 );\cf5 \strokec5 \
\
        \cf11 \strokec11 const\cf5 \strokec5  \cf10 \strokec10 SearchIcon\cf5 \strokec5  = \cf2 \strokec2 ()\cf5 \strokec5  => \cf2 \strokec2 (\cf5 \strokec5 \
            <svg className=\cf8 \strokec8 "icon"\cf5 \strokec5  fill=\cf8 \strokec8 "none"\cf5 \strokec5  stroke=\cf8 \strokec8 "currentColor"\cf5 \strokec5  viewBox=\cf8 \strokec8 "0 0 24 24"\cf5 \strokec5 >\
                <path strokeLinecap=\cf8 \strokec8 "round"\cf5 \strokec5  strokeLinejoin=\cf8 \strokec8 "round"\cf5 \strokec5  strokeWidth=\cf8 \strokec8 "2"\cf5 \strokec5  d=\cf8 \strokec8 "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"\cf5 \strokec5 />\
            </svg>\
        \cf2 \strokec2 );\cf5 \strokec5 \
\
        \cf11 \strokec11 const\cf5 \strokec5  \cf10 \strokec10 UsersIcon\cf5 \strokec5  = \cf2 \strokec2 ()\cf5 \strokec5  => \cf2 \strokec2 (\cf5 \strokec5 \
            <svg className=\cf8 \strokec8 "empty-icon"\cf5 \strokec5  fill=\cf8 \strokec8 "none"\cf5 \strokec5  stroke=\cf8 \strokec8 "currentColor"\cf5 \strokec5  viewBox=\cf8 \strokec8 "0 0 24 24"\cf5 \strokec5 >\
                <path strokeLinecap=\cf8 \strokec8 "round"\cf5 \strokec5  strokeLinejoin=\cf8 \strokec8 "round"\cf5 \strokec5  strokeWidth=\cf8 \strokec8 "2"\cf5 \strokec5  d=\cf8 \strokec8 "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"\cf5 \strokec5 />\
            </svg>\
        \cf2 \strokec2 );\cf5 \strokec5 \
\
        \cf11 \strokec11 function\cf5 \strokec5  \cf12 \strokec12 App\cf2 \strokec2 ()\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5 \
            \cf11 \strokec11 const\cf5 \strokec5  \cf2 \strokec2 [\cf5 \strokec5 tab\cf2 \strokec2 ,\cf5 \strokec5  setTab\cf2 \strokec2 ]\cf5 \strokec5  = \cf10 \strokec10 useState\cf2 \strokec2 (\cf8 \strokec8 'nuevo'\cf2 \strokec2 );\cf5 \strokec5 \
            \cf11 \strokec11 const\cf5 \strokec5  \cf2 \strokec2 [\cf5 \strokec5 requests\cf2 \strokec2 ,\cf5 \strokec5  setRequests\cf2 \strokec2 ]\cf5 \strokec5  = \cf10 \strokec10 useState\cf2 \strokec2 ([]);\cf5 \strokec5 \
            \cf11 \strokec11 const\cf5 \strokec5  \cf2 \strokec2 [\cf5 \strokec5 search\cf2 \strokec2 ,\cf5 \strokec5  setSearch\cf2 \strokec2 ]\cf5 \strokec5  = \cf10 \strokec10 useState\cf2 \strokec2 (\cf8 \strokec8 ''\cf2 \strokec2 );\cf5 \strokec5 \
            \cf11 \strokec11 const\cf5 \strokec5  \cf2 \strokec2 [\cf5 \strokec5 form\cf2 \strokec2 ,\cf5 \strokec5  setForm\cf2 \strokec2 ]\cf5 \strokec5  = \cf10 \strokec10 useState\cf2 \strokec2 (\{\cf5 \strokec5 \
                \cf6 \strokec6 nombreCompleto\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 puesto\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 area\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 dominio\cf5 \strokec5 : \cf8 \strokec8 'epl.mx'\cf2 \strokec2 ,\cf5 \strokec5 \
                \cf6 \strokec6 correoSolicitado\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 correoJefe\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 nombreJefe\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 telefono\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 justificacion\cf5 \strokec5 : \cf8 \strokec8 ''\cf5 \strokec5 \
            \cf2 \strokec2 \});\cf5 \strokec5 \
\
            \cf10 \strokec10 useEffect\cf2 \strokec2 (()\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf11 \strokec11 const\cf5 \strokec5  result = storage\cf2 \strokec2 .\cf10 \strokec10 list\cf2 \strokec2 (\cf8 \strokec8 'request:'\cf2 \strokec2 );\cf5 \strokec5 \
                \cf11 \strokec11 if\cf5 \strokec5  \cf2 \strokec2 (\cf5 \strokec5 result?.keys\cf2 \strokec2 )\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5 \
                    \cf11 \strokec11 const\cf5 \strokec5  all = result\cf2 \strokec2 .\cf5 \strokec5 keys\cf2 \strokec2 .\cf10 \strokec10 map\cf2 \strokec2 (\cf13 \strokec13 k\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                        \cf11 \strokec11 const\cf5 \strokec5  d = storage\cf2 \strokec2 .\cf10 \strokec10 get\cf2 \strokec2 (\cf5 \strokec5 k\cf2 \strokec2 );\cf5 \strokec5 \
                        \cf11 \strokec11 return\cf5 \strokec5  d ? \cf12 \strokec12 JSON\cf2 \strokec2 .\cf10 \strokec10 parse\cf2 \strokec2 (\cf5 \strokec5 d\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 )\cf5 \strokec5  : \cf11 \strokec11 null\cf2 \strokec2 ;\cf5 \strokec5 \
                    \cf2 \strokec2 \}).\cf10 \strokec10 filter\cf2 \strokec2 (\cf12 \strokec12 Boolean\cf2 \strokec2 ).\cf10 \strokec10 sort\cf2 \strokec2 ((\cf13 \strokec13 a\cf2 \strokec2 ,\cf13 \strokec13  b\cf2 \strokec2 )\cf5 \strokec5  => \cf11 \strokec11 new\cf5 \strokec5  \cf12 \strokec12 Date\cf2 \strokec2 (\cf5 \strokec5 b\cf2 \strokec2 .\cf5 \strokec5 fecha\cf2 \strokec2 )\cf5 \strokec5  - \cf11 \strokec11 new\cf5 \strokec5  \cf12 \strokec12 Date\cf2 \strokec2 (\cf5 \strokec5 a\cf2 \strokec2 .\cf5 \strokec5 fecha\cf2 \strokec2 ));\cf5 \strokec5 \
                    \cf10 \strokec10 setRequests\cf2 \strokec2 (\cf5 \strokec5 all\cf2 \strokec2 );\cf5 \strokec5 \
                \cf2 \strokec2 \}\cf5 \strokec5 \
            \cf2 \strokec2 \},\cf5 \strokec5  \cf2 \strokec2 []);\cf5 \strokec5 \
\
            \cf11 \strokec11 const\cf5 \strokec5  \cf10 \strokec10 sendEmail\cf5 \strokec5  = \cf2 \strokec2 (\cf13 \strokec13 req\cf2 \strokec2 )\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf11 \strokec11 const\cf5 \strokec5  body = \cf8 \strokec8 `Nueva Solicitud de Correo Corporativo\
\pard\pardeftab720\partightenfactor0
\cf5 \strokec5 \
DATOS DEL SOLICITANTE:\
\uc0\u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \
\pard\pardeftab720\partightenfactor0
\cf8 \strokec8 Nombre: $\{req.nombreCompleto\}\
Puesto: $\{req.puesto\}\
\'c1rea/Departamento: $\{req.area\}\
Tel\'e9fono: $\{req.telefono\}\
\pard\pardeftab720\partightenfactor0
\cf5 \strokec5 \
CORREO SOLICITADO:\
\uc0\u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \
\pard\pardeftab720\partightenfactor0
\cf8 \strokec8 Correo: $\{req.correoCompleto\}\
\pard\pardeftab720\partightenfactor0
\cf5 \strokec5 \
AUTORIZACI\'d3N:\
\uc0\u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \
\pard\pardeftab720\partightenfactor0
\cf8 \strokec8 Autorizado por: $\{req.nombreJefe\}\
Correo del supervisor: $\{req.correoJefe\}\
\pard\pardeftab720\partightenfactor0
\cf5 \strokec5 \
JUSTIFICACI\'d3N:\
\uc0\u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \
\pard\pardeftab720\partightenfactor0
\cf8 \strokec8 $\{req.justificacion\}\
\pard\pardeftab720\partightenfactor0
\cf5 \strokec5 \
FECHA Y HORA DE SOLICITUD:\
\uc0\u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \
\pard\pardeftab720\partightenfactor0
\cf8 \strokec8 $\{new Date(req.fecha).toLocaleString('es-MX', \{\
    weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'\
\})\}\
\pard\pardeftab720\partightenfactor0
\cf5 \strokec5 \
Estado: PENDIENTE\
\
\uc0\u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \u9473 \
\

\f1 \uc0\u55358 \u56598 
\f0  Robot de Correos\
Sistema Automatizado de Solicitudes EPL\
epl.mx | elpolloloco.com.mx\
\
Este es un mensaje autom\'e1tico. Por favor no responder a este correo.\
\pard\pardeftab720\partightenfactor0
\cf8 \strokec8 Para consultar o actualizar el estado de la solicitud, accede al Sistema de Solicitudes.`\cf2 \strokec2 ;\cf5 \strokec5 \
                \
                \cf12 \strokec12 window\cf2 \strokec2 .\cf10 \strokec10 open\cf2 \strokec2 (\cf8 \strokec8 `mailto:hlopez@epl.mx,sistemas@epl.mx?subject=Nueva Solicitud de Correo: $\{req.correoCompleto\}&body=$\{encodeURIComponent(body)\}`\cf2 \strokec2 ,\cf5 \strokec5  \cf8 \strokec8 '_blank'\cf2 \strokec2 );\cf5 \strokec5 \
            \cf2 \strokec2 \};\cf5 \strokec5 \
\
            \cf11 \strokec11 const\cf5 \strokec5  \cf10 \strokec10 submit\cf5 \strokec5  = \cf2 \strokec2 ()\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf11 \strokec11 if\cf5 \strokec5  \cf2 \strokec2 (\cf5 \strokec5 !form\cf2 \strokec2 .\cf5 \strokec5 nombreCompleto || !form\cf2 \strokec2 .\cf5 \strokec5 puesto || !form\cf2 \strokec2 .\cf5 \strokec5 area || !form\cf2 \strokec2 .\cf5 \strokec5 correoSolicitado || \
                    !form\cf2 \strokec2 .\cf5 \strokec5 correoJefe || !form\cf2 \strokec2 .\cf5 \strokec5 nombreJefe || !form\cf2 \strokec2 .\cf5 \strokec5 telefono || !form\cf2 \strokec2 .\cf5 \strokec5 justificacion\cf2 \strokec2 )\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5 \
                    \cf10 \strokec10 alert\cf2 \strokec2 (\cf8 \strokec8 'Por favor completa todos los campos requeridos'\cf2 \strokec2 );\cf5 \strokec5 \
                    \cf11 \strokec11 return\cf2 \strokec2 ;\cf5 \strokec5 \
                \cf2 \strokec2 \}\cf5 \strokec5 \
                \
                \cf11 \strokec11 const\cf5 \strokec5  newReq = \cf2 \strokec2 \{\cf5 \strokec5 \
                    ...form\cf2 \strokec2 ,\cf5 \strokec5 \
                    \cf6 \strokec6 id\cf5 \strokec5 : \cf12 \strokec12 Date\cf2 \strokec2 .\cf10 \strokec10 now\cf2 \strokec2 ().\cf10 \strokec10 toString\cf2 \strokec2 (),\cf5 \strokec5 \
                    \cf6 \strokec6 fecha\cf5 \strokec5 : \cf11 \strokec11 new\cf5 \strokec5  \cf12 \strokec12 Date\cf2 \strokec2 ().\cf10 \strokec10 toISOString\cf2 \strokec2 (),\cf5 \strokec5 \
                    \cf6 \strokec6 estado\cf5 \strokec5 : \cf8 \strokec8 'Pendiente'\cf2 \strokec2 ,\cf5 \strokec5 \
                    \cf6 \strokec6 correoCompleto\cf5 \strokec5 : \cf8 \strokec8 `$\{form.correoSolicitado\}@$\{form.dominio\}`\cf5 \strokec5 \
                \cf2 \strokec2 \};\cf5 \strokec5 \
\
                storage\cf2 \strokec2 .\cf10 \strokec10 set\cf2 \strokec2 (\cf8 \strokec8 `request:$\{newReq.id\}`\cf2 \strokec2 ,\cf5 \strokec5  \cf12 \strokec12 JSON\cf2 \strokec2 .\cf10 \strokec10 stringify\cf2 \strokec2 (\cf5 \strokec5 newReq\cf2 \strokec2 ));\cf5 \strokec5 \
                \cf10 \strokec10 setRequests\cf2 \strokec2 ([\cf5 \strokec5 newReq\cf2 \strokec2 ,\cf5 \strokec5  ...requests\cf2 \strokec2 ]);\cf5 \strokec5 \
                \cf10 \strokec10 sendEmail\cf2 \strokec2 (\cf5 \strokec5 newReq\cf2 \strokec2 );\cf5 \strokec5 \
                \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 \
                    \cf6 \strokec6 nombreCompleto\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 puesto\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 area\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 dominio\cf5 \strokec5 : \cf8 \strokec8 'epl.mx'\cf2 \strokec2 ,\cf5 \strokec5 \
                    \cf6 \strokec6 correoSolicitado\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 correoJefe\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 nombreJefe\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 telefono\cf5 \strokec5 : \cf8 \strokec8 ''\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 justificacion\cf5 \strokec5 : \cf8 \strokec8 ''\cf5 \strokec5 \
                \cf2 \strokec2 \});\cf5 \strokec5 \
                \cf10 \strokec10 setTab\cf2 \strokec2 (\cf8 \strokec8 'consultar'\cf2 \strokec2 );\cf5 \strokec5 \
                \cf10 \strokec10 alert\cf2 \strokec2 (\cf8 \strokec8 '\'a1Solicitud registrada exitosamente! Se abrir\'e1 tu cliente de correo para enviar la notificaci\'f3n.'\cf2 \strokec2 );\cf5 \strokec5 \
            \cf2 \strokec2 \};\cf5 \strokec5 \
\
            \cf11 \strokec11 const\cf5 \strokec5  \cf10 \strokec10 updateStatus\cf5 \strokec5  = \cf2 \strokec2 (\cf13 \strokec13 id\cf2 \strokec2 ,\cf13 \strokec13  status\cf2 \strokec2 )\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf11 \strokec11 const\cf5 \strokec5  upd = requests\cf2 \strokec2 .\cf10 \strokec10 map\cf2 \strokec2 (\cf13 \strokec13 r\cf5 \strokec5  => \cf2 \strokec2 \{\cf5 \strokec5 \
                    \cf11 \strokec11 if\cf5 \strokec5  \cf2 \strokec2 (\cf5 \strokec5 r\cf2 \strokec2 .\cf5 \strokec5 id === id\cf2 \strokec2 )\cf5 \strokec5  \cf2 \strokec2 \{\cf5 \strokec5 \
                        \cf11 \strokec11 const\cf5 \strokec5  u = \cf2 \strokec2 \{\cf5 \strokec5  ...r\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 estado\cf5 \strokec5 : status \cf2 \strokec2 \};\cf5 \strokec5 \
                        storage\cf2 \strokec2 .\cf10 \strokec10 set\cf2 \strokec2 (\cf8 \strokec8 `request:$\{id\}`\cf2 \strokec2 ,\cf5 \strokec5  \cf12 \strokec12 JSON\cf2 \strokec2 .\cf10 \strokec10 stringify\cf2 \strokec2 (\cf5 \strokec5 u\cf2 \strokec2 ));\cf5 \strokec5 \
                        \cf11 \strokec11 return\cf5 \strokec5  u\cf2 \strokec2 ;\cf5 \strokec5 \
                    \cf2 \strokec2 \}\cf5 \strokec5 \
                    \cf11 \strokec11 return\cf5 \strokec5  r\cf2 \strokec2 ;\cf5 \strokec5 \
                \cf2 \strokec2 \});\cf5 \strokec5 \
                \cf10 \strokec10 setRequests\cf2 \strokec2 (\cf5 \strokec5 upd\cf2 \strokec2 );\cf5 \strokec5 \
            \cf2 \strokec2 \};\cf5 \strokec5 \
\
            \cf11 \strokec11 const\cf5 \strokec5  filtered = requests\cf2 \strokec2 .\cf10 \strokec10 filter\cf2 \strokec2 (\cf13 \strokec13 r\cf5 \strokec5  =>\
                r\cf2 \strokec2 .\cf5 \strokec5 nombreCompleto\cf2 \strokec2 .\cf10 \strokec10 toLowerCase\cf2 \strokec2 ().\cf10 \strokec10 includes\cf2 \strokec2 (\cf5 \strokec5 search\cf2 \strokec2 .\cf10 \strokec10 toLowerCase\cf2 \strokec2 ())\cf5 \strokec5  ||\
                r\cf2 \strokec2 .\cf5 \strokec5 correoCompleto\cf2 \strokec2 .\cf10 \strokec10 toLowerCase\cf2 \strokec2 ().\cf10 \strokec10 includes\cf2 \strokec2 (\cf5 \strokec5 search\cf2 \strokec2 .\cf10 \strokec10 toLowerCase\cf2 \strokec2 ())\cf5 \strokec5  ||\
                r\cf2 \strokec2 .\cf5 \strokec5 area\cf2 \strokec2 .\cf10 \strokec10 toLowerCase\cf2 \strokec2 ().\cf10 \strokec10 includes\cf2 \strokec2 (\cf5 \strokec5 search\cf2 \strokec2 .\cf10 \strokec10 toLowerCase\cf2 \strokec2 ())\cf5 \strokec5 \
            \cf2 \strokec2 );\cf5 \strokec5 \
\
            \cf11 \strokec11 const\cf5 \strokec5  stats = \cf2 \strokec2 \{\cf5 \strokec5 \
                \cf6 \strokec6 total\cf5 \strokec5 : requests\cf2 \strokec2 .\cf5 \strokec5 length\cf2 \strokec2 ,\cf5 \strokec5 \
                \cf6 \strokec6 pendientes\cf5 \strokec5 : requests\cf2 \strokec2 .\cf10 \strokec10 filter\cf2 \strokec2 (\cf13 \strokec13 r\cf5 \strokec5  => r\cf2 \strokec2 .\cf5 \strokec5 estado === \cf8 \strokec8 'Pendiente'\cf2 \strokec2 ).\cf5 \strokec5 length\cf2 \strokec2 ,\cf5 \strokec5 \
                \cf6 \strokec6 completadas\cf5 \strokec5 : requests\cf2 \strokec2 .\cf10 \strokec10 filter\cf2 \strokec2 (\cf13 \strokec13 r\cf5 \strokec5  => r\cf2 \strokec2 .\cf5 \strokec5 estado === \cf8 \strokec8 'Completada'\cf2 \strokec2 ).\cf5 \strokec5 length\
            \cf2 \strokec2 \};\cf5 \strokec5 \
\
            \cf11 \strokec11 return\cf5 \strokec5  \cf2 \strokec2 (\cf5 \strokec5 \
                <div className=\cf8 \strokec8 "bg-gradient"\cf5 \strokec5 >\
                    <header className=\cf8 \strokec8 "header"\cf5 \strokec5 >\
                        <div className=\cf8 \strokec8 "container"\cf5 \strokec5 >\
                            <div className=\cf8 \strokec8 "header-content"\cf5 \strokec5 >\
                                <div className=\cf8 \strokec8 "header-title"\cf5 \strokec5 >\
                                    <\cf12 \strokec12 MailIcon\cf5 \strokec5  />\
                                    <div>\
                                        <h1>\cf12 \strokec12 Sistema\cf5 \strokec5  de \cf12 \strokec12 Solicitudes\cf5 \strokec5 </h1>\
                                        <p>\cf12 \strokec12 Correos\cf5 \strokec5  \cf12 \strokec12 Corporativos\cf5 \strokec5  \cf9 \strokec9 EPL\cf5 \strokec5 </p>\
                                    </div>\
                                </div>\
                                <div className=\cf8 \strokec8 "stats"\cf5 \strokec5 >\
                                    <div className=\cf8 \strokec8 "stat-item"\cf5 \strokec5 >\
                                        <div className=\cf8 \strokec8 "stat-value"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 stats\cf2 \strokec2 .\cf5 \strokec5 total\cf2 \strokec2 \}\cf5 \strokec5 </div>\
                                        <div className=\cf8 \strokec8 "stat-label"\cf5 \strokec5 >\cf12 \strokec12 Total\cf5 \strokec5 </div>\
                                    </div>\
                                    <div className=\cf8 \strokec8 "stat-item"\cf5 \strokec5 >\
                                        <div className=\cf8 \strokec8 "stat-value"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 stats\cf2 \strokec2 .\cf5 \strokec5 pendientes\cf2 \strokec2 \}\cf5 \strokec5 </div>\
                                        <div className=\cf8 \strokec8 "stat-label"\cf5 \strokec5 >\cf12 \strokec12 Pendientes\cf5 \strokec5 </div>\
                                    </div>\
                                    <div className=\cf8 \strokec8 "stat-item"\cf5 \strokec5 >\
                                        <div className=\cf8 \strokec8 "stat-value"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 stats\cf2 \strokec2 .\cf5 \strokec5 completadas\cf2 \strokec2 \}\cf5 \strokec5 </div>\
                                        <div className=\cf8 \strokec8 "stat-label"\cf5 \strokec5 >\cf12 \strokec12 Completadas\cf5 \strokec5 </div>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>\
                    </header>\
\
                    <div className=\cf8 \strokec8 "tabs"\cf5 \strokec5 >\
                        <div className=\cf8 \strokec8 "container"\cf5 \strokec5 >\
                            <div className=\cf8 \strokec8 "tabs-content"\cf5 \strokec5 >\
                                <button onClick=\cf2 \strokec2 \{()\cf5 \strokec5  => \cf10 \strokec10 setTab\cf2 \strokec2 (\cf8 \strokec8 'nuevo'\cf2 \strokec2 )\}\cf5 \strokec5  className=\cf2 \strokec2 \{\cf8 \strokec8 `tab-btn $\{tab === 'nuevo' ? 'active' : ''\}`\cf2 \strokec2 \}\cf5 \strokec5 >\
                                    <\cf12 \strokec12 PlusIcon\cf5 \strokec5  />\
                                    <span>\cf12 \strokec12 Nueva\cf5 \strokec5  \cf12 \strokec12 Solicitud\cf5 \strokec5 </span>\
                                </button>\
                                <button onClick=\cf2 \strokec2 \{()\cf5 \strokec5  => \cf10 \strokec10 setTab\cf2 \strokec2 (\cf8 \strokec8 'consultar'\cf2 \strokec2 )\}\cf5 \strokec5  className=\cf2 \strokec2 \{\cf8 \strokec8 `tab-btn $\{tab === 'consultar' ? 'active' : ''\}`\cf2 \strokec2 \}\cf5 \strokec5 >\
                                    <\cf12 \strokec12 SearchIcon\cf5 \strokec5  />\
                                    <span>\cf12 \strokec12 Consultar\cf5 \strokec5  \cf12 \strokec12 Solicitudes\cf5 \strokec5 </span>\
                                </button>\
                            </div>\
                        </div>\
                    </div>\
\
                    <main className=\cf8 \strokec8 "main"\cf5 \strokec5 >\
                        <div className=\cf8 \strokec8 "container"\cf5 \strokec5 >\
                            \cf2 \strokec2 \{\cf5 \strokec5 tab === \cf8 \strokec8 'nuevo'\cf5 \strokec5  && \cf2 \strokec2 (\cf5 \strokec5 \
                                <div style=\cf2 \strokec2 \{\{\cf6 \strokec6 maxWidth\cf5 \strokec5 : \cf8 \strokec8 '800px'\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 margin\cf5 \strokec5 : \cf8 \strokec8 '0 auto'\cf2 \strokec2 \}\}\cf5 \strokec5 >\
                                    <div className=\cf8 \strokec8 "card"\cf5 \strokec5 >\
                                        <h2 className=\cf8 \strokec8 "card-title"\cf5 \strokec5 >\cf12 \strokec12 Nueva\cf5 \strokec5  \cf12 \strokec12 Solicitud\cf5 \strokec5  de \cf12 \strokec12 Correo\cf5 \strokec5 </h2>\
                                        \
                                        <div className=\cf8 \strokec8 "grid grid-cols-2"\cf5 \strokec5 >\
                                            <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Nombre\cf5 \strokec5  \cf12 \strokec12 Completo\cf5 \strokec5  *</label>\
                                                <input type=\cf8 \strokec8 "text"\cf5 \strokec5  className=\cf8 \strokec8 "form-input"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 nombreCompleto\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 nombreCompleto\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  placeholder=\cf8 \strokec8 "Juan P\'e9rez Garc\'eda"\cf5 \strokec5 />\
                                            </div>\
                                            <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Puesto\cf5 \strokec5  *</label>\
                                                <input type=\cf8 \strokec8 "text"\cf5 \strokec5  className=\cf8 \strokec8 "form-input"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 puesto\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 puesto\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  placeholder=\cf8 \strokec8 "Gerente de Ventas"\cf5 \strokec5 />\
                                            </div>\
                                            <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\'c1rea/\cf12 \strokec12 Departamento\cf5 \strokec5  *</label>\
                                                <input type=\cf8 \strokec8 "text"\cf5 \strokec5  className=\cf8 \strokec8 "form-input"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 area\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 area\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  placeholder=\cf8 \strokec8 "Ventas"\cf5 \strokec5 />\
                                            </div>\
                                            <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Tel\'e9fono\cf5 \strokec5  *</label>\
                                                <input type=\cf8 \strokec8 "tel"\cf5 \strokec5  className=\cf8 \strokec8 "form-input"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 telefono\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 telefono\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  placeholder=\cf8 \strokec8 "555-123-4567"\cf5 \strokec5 />\
                                            </div>\
                                        </div>\
\
                                        <div className=\cf8 \strokec8 "section-divider"\cf5 \strokec5 >\
                                            <h3 className=\cf8 \strokec8 "section-title"\cf5 \strokec5 >\cf12 \strokec12 Correo\cf5 \strokec5  \cf12 \strokec12 Solicitado\cf5 \strokec5 </h3>\
                                            <div className=\cf8 \strokec8 "grid grid-cols-2"\cf5 \strokec5 >\
                                                <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                    <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Usuario\cf5 \strokec5  *</label>\
                                                    <input type=\cf8 \strokec8 "text"\cf5 \strokec5  className=\cf8 \strokec8 "form-input"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 correoSolicitado\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 correoSolicitado\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  placeholder=\cf8 \strokec8 "juan.perez"\cf5 \strokec5 />\
                                                </div>\
                                                <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                    <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Dominio\cf5 \strokec5  *</label>\
                                                    <select className=\cf8 \strokec8 "form-select"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 dominio\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 dominio\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5 >\
                                                        <option value=\cf8 \strokec8 "epl.mx"\cf5 \strokec5 >epl\cf2 \strokec2 .\cf5 \strokec5 mx</option>\
                                                        <option value=\cf8 \strokec8 "elpolloloco.com.mx"\cf5 \strokec5 >elpolloloco\cf2 \strokec2 .\cf5 \strokec5 com\cf2 \strokec2 .\cf5 \strokec5 mx</option>\
                                                    </select>\
                                                </div>\
                                            </div>\
                                            <div className=\cf8 \strokec8 "preview-box"\cf5 \strokec5 >\
                                                <span className=\cf8 \strokec8 "preview-label"\cf5 \strokec5 >\cf12 \strokec12 Correo\cf5 \strokec5  completo: </span>\
                                                \cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 correoSolicitado ? <span className=\cf8 \strokec8 "preview-value"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 correoSolicitado\cf2 \strokec2 \}\cf5 \strokec5 @\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 dominio\cf2 \strokec2 \}\cf5 \strokec5 </span> : <span className=\cf8 \strokec8 "preview-placeholder"\cf5 \strokec5 >usuario@dominio</span>\cf2 \strokec2 \}\cf5 \strokec5 \
                                            </div>\
                                        </div>\
\
                                        <div className=\cf8 \strokec8 "section-divider"\cf5 \strokec5 >\
                                            <h3 className=\cf8 \strokec8 "section-title"\cf5 \strokec5 >\cf12 \strokec12 Autorizaci\'f3n\cf5 \strokec5 </h3>\
                                            <div className=\cf8 \strokec8 "grid grid-cols-2"\cf5 \strokec5 >\
                                                <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                    <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Nombre\cf5 \strokec5  del \cf12 \strokec12 Jefe\cf5 \strokec5 /\cf12 \strokec12 Supervisor\cf5 \strokec5  *</label>\
                                                    <input type=\cf8 \strokec8 "text"\cf5 \strokec5  className=\cf8 \strokec8 "form-input"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 nombreJefe\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 nombreJefe\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  placeholder=\cf8 \strokec8 "Mar\'eda Gonz\'e1lez"\cf5 \strokec5 />\
                                                </div>\
                                                <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                                    <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Correo\cf5 \strokec5  del \cf12 \strokec12 Jefe\cf5 \strokec5 /\cf12 \strokec12 Supervisor\cf5 \strokec5  *</label>\
                                                    <input type=\cf8 \strokec8 "email"\cf5 \strokec5  className=\cf8 \strokec8 "form-input"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 correoJefe\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 correoJefe\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  placeholder=\cf8 \strokec8 "maria.gonzalez@epl.mx"\cf5 \strokec5 />\
                                                </div>\
                                            </div>\
                                        </div>\
\
                                        <div className=\cf8 \strokec8 "form-group"\cf5 \strokec5 >\
                                            <label className=\cf8 \strokec8 "form-label"\cf5 \strokec5 >\cf12 \strokec12 Justificaci\'f3n\cf5 \strokec5  *</label>\
                                            <textarea className=\cf8 \strokec8 "form-textarea"\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 form\cf2 \strokec2 .\cf5 \strokec5 justificacion\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setForm\cf2 \strokec2 (\{\cf5 \strokec5 ...form\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 justificacion\cf5 \strokec5 : e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 \})\}\cf5 \strokec5  rows=\cf8 \strokec8 "4"\cf5 \strokec5  placeholder=\cf8 \strokec8 "Describe brevemente por qu\'e9 necesitas este correo corporativo..."\cf5 \strokec5 />\
                                        </div>\
\
                                        <button onClick=\cf2 \strokec2 \{\cf5 \strokec5 submit\cf2 \strokec2 \}\cf5 \strokec5  className=\cf8 \strokec8 "btn"\cf5 \strokec5 >\cf12 \strokec12 Enviar\cf5 \strokec5  \cf12 \strokec12 Solicitud\cf5 \strokec5 </button>\
                                    </div>\
                                </div>\
                            \cf2 \strokec2 )\}\cf5 \strokec5 \
\
                            \cf2 \strokec2 \{\cf5 \strokec5 tab === \cf8 \strokec8 'consultar'\cf5 \strokec5  && \cf2 \strokec2 (\cf5 \strokec5 \
                                <div>\
                                    <div className=\cf8 \strokec8 "search-box"\cf5 \strokec5 >\
                                        <\cf12 \strokec12 SearchIcon\cf5 \strokec5  />\
                                        <input type=\cf8 \strokec8 "text"\cf5 \strokec5  className=\cf8 \strokec8 "search-input"\cf5 \strokec5  placeholder=\cf8 \strokec8 "Buscar por nombre, correo o \'e1rea..."\cf5 \strokec5  value=\cf2 \strokec2 \{\cf5 \strokec5 search\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 setSearch\cf2 \strokec2 (\cf5 \strokec5 e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 )\}\cf5 \strokec5 />\
                                    </div>\
\
                                    \cf2 \strokec2 \{\cf5 \strokec5 filtered\cf2 \strokec2 .\cf5 \strokec5 length === \cf9 \strokec9 0\cf5 \strokec5  ? \cf2 \strokec2 (\cf5 \strokec5 \
                                        <div className=\cf8 \strokec8 "empty-state"\cf5 \strokec5 >\
                                            <\cf12 \strokec12 UsersIcon\cf5 \strokec5  />\
                                            <p className=\cf8 \strokec8 "empty-text"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 requests\cf2 \strokec2 .\cf5 \strokec5 length === \cf9 \strokec9 0\cf5 \strokec5  ? \cf8 \strokec8 'No hay solicitudes registradas a\'fan'\cf5 \strokec5  : \cf8 \strokec8 'No se encontraron solicitudes con ese criterio'\cf2 \strokec2 \}\cf5 \strokec5 </p>\
                                        </div>\
                                    \cf2 \strokec2 )\cf5 \strokec5  : \cf2 \strokec2 (\cf5 \strokec5 \
                                        filtered\cf2 \strokec2 .\cf10 \strokec10 map\cf2 \strokec2 (\cf13 \strokec13 req\cf5 \strokec5  => \cf2 \strokec2 (\cf5 \strokec5 \
                                            <div key=\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 id\cf2 \strokec2 \}\cf5 \strokec5  className=\cf8 \strokec8 "request-card"\cf5 \strokec5 >\
                                                <div className=\cf8 \strokec8 "request-header"\cf5 \strokec5 >\
                                                    <div>\
                                                        <h3 className=\cf8 \strokec8 "request-title"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 nombreCompleto\cf2 \strokec2 \}\cf5 \strokec5 </h3>\
                                                        <p className=\cf8 \strokec8 "request-subtitle"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 puesto\cf2 \strokec2 \}\cf5 \strokec5  - \cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 area\cf2 \strokec2 \}\cf5 \strokec5 </p>\
                                                    </div>\
                                                    <select value=\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 estado\cf2 \strokec2 \}\cf5 \strokec5  onChange=\cf2 \strokec2 \{\cf13 \strokec13 e\cf5 \strokec5  => \cf10 \strokec10 updateStatus\cf2 \strokec2 (\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 id\cf2 \strokec2 ,\cf5 \strokec5  e\cf2 \strokec2 .\cf5 \strokec5 target\cf2 \strokec2 .\cf5 \strokec5 value\cf2 \strokec2 )\}\cf5 \strokec5  className=\cf2 \strokec2 \{\cf8 \strokec8 `status-select status-$\{req.estado === 'Completada' ? 'completada' : req.estado === 'En Proceso' ? 'proceso' : 'pendiente'\}`\cf2 \strokec2 \}\cf5 \strokec5 >\
                                                        <option value=\cf8 \strokec8 "Pendiente"\cf5 \strokec5 >\cf12 \strokec12 Pendiente\cf5 \strokec5 </option>\
                                                        <option value=\cf8 \strokec8 "En Proceso"\cf5 \strokec5 >\cf12 \strokec12 En\cf5 \strokec5  \cf12 \strokec12 Proceso\cf5 \strokec5 </option>\
                                                        <option value=\cf8 \strokec8 "Completada"\cf5 \strokec5 >\cf12 \strokec12 Completada\cf5 \strokec5 </option>\
                                                    </select>\
                                                </div>\
                                                <div className=\cf8 \strokec8 "request-details"\cf5 \strokec5 >\
                                                    <div className=\cf8 \strokec8 "detail-item"\cf5 \strokec5 >\
                                                        <p className=\cf8 \strokec8 "detail-label"\cf5 \strokec5 >\cf12 \strokec12 Correo\cf5 \strokec5  \cf12 \strokec12 Solicitado\cf5 \strokec5 </p>\
                                                        <p className=\cf8 \strokec8 "detail-value email"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 correoCompleto\cf2 \strokec2 \}\cf5 \strokec5 </p>\
                                                    </div>\
                                                    <div className=\cf8 \strokec8 "detail-item"\cf5 \strokec5 >\
                                                        <p className=\cf8 \strokec8 "detail-label"\cf5 \strokec5 >\cf12 \strokec12 Tel\'e9fono\cf5 \strokec5 </p>\
                                                        <p className=\cf8 \strokec8 "detail-value"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 telefono\cf2 \strokec2 \}\cf5 \strokec5 </p>\
                                                    </div>\
                                                    <div className=\cf8 \strokec8 "detail-item"\cf5 \strokec5 >\
                                                        <p className=\cf8 \strokec8 "detail-label"\cf5 \strokec5 >\cf12 \strokec12 Autorizado\cf5 \strokec5  por</p>\
                                                        <p className=\cf8 \strokec8 "detail-value"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 nombreJefe\cf2 \strokec2 \}\cf5 \strokec5 </p>\
                                                        <p className=\cf8 \strokec8 "detail-label"\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 correoJefe\cf2 \strokec2 \}\cf5 \strokec5 </p>\
                                                    </div>\
                                                    <div className=\cf8 \strokec8 "detail-item"\cf5 \strokec5 >\
                                                        <p className=\cf8 \strokec8 "detail-label"\cf5 \strokec5 >\cf12 \strokec12 Fecha\cf5 \strokec5  de \cf12 \strokec12 Solicitud\cf5 \strokec5 </p>\
                                                        <p className=\cf8 \strokec8 "detail-value"\cf5 \strokec5 >\cf2 \strokec2 \{\cf11 \strokec11 new\cf5 \strokec5  \cf12 \strokec12 Date\cf2 \strokec2 (\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 fecha\cf2 \strokec2 ).\cf10 \strokec10 toLocaleDateString\cf2 \strokec2 (\cf8 \strokec8 'es-MX'\cf2 \strokec2 ,\cf5 \strokec5  \cf2 \strokec2 \{\cf6 \strokec6 year\cf5 \strokec5 : \cf8 \strokec8 'numeric'\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 month\cf5 \strokec5 : \cf8 \strokec8 'long'\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 day\cf5 \strokec5 : \cf8 \strokec8 'numeric'\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 hour\cf5 \strokec5 : \cf8 \strokec8 '2-digit'\cf2 \strokec2 ,\cf5 \strokec5  \cf6 \strokec6 minute\cf5 \strokec5 : \cf8 \strokec8 '2-digit'\cf2 \strokec2 \})\}\cf5 \strokec5 </p>\
                                                    </div>\
                                                </div>\
                                                <div className=\cf8 \strokec8 "justification"\cf5 \strokec5 >\
                                                    <p className=\cf8 \strokec8 "detail-label"\cf5 \strokec5 >\cf12 \strokec12 Justificaci\'f3n\cf5 \strokec5 </p>\
                                                    <p style=\cf2 \strokec2 \{\{\cf6 \strokec6 marginTop\cf5 \strokec5 : \cf8 \strokec8 '0.5rem'\cf2 \strokec2 \}\}\cf5 \strokec5 >\cf2 \strokec2 \{\cf5 \strokec5 req\cf2 \strokec2 .\cf5 \strokec5 justificacion\cf2 \strokec2 \}\cf5 \strokec5 </p>\
                                                </div>\
                                            </div>\
                                        \cf2 \strokec2 ))\cf5 \strokec5 \
                                    \cf2 \strokec2 )\}\cf5 \strokec5 \
                                </div>\
                            \cf2 \strokec2 )\}\cf5 \strokec5 \
                        </div>\
                    </main>\
\
                    <footer className=\cf8 \strokec8 "footer"\cf5 \strokec5 >\
                        <div className=\cf8 \strokec8 "container"\cf5 \strokec5 >\
                            <p>\cf12 \strokec12 Sistema\cf5 \strokec5  de \cf12 \strokec12 Solicitudes\cf5 \strokec5  de \cf12 \strokec12 Correo\cf5 \strokec5  \cf12 \strokec12 Corporativo\cf5 \strokec5  - \cf9 \strokec9 EPL\cf5 \strokec5  \'a9 \cf9 \strokec9 2026\cf5 \strokec5 </p>\
                            <p className=\cf8 \strokec8 "footer-subtitle"\cf5 \strokec5 >epl\cf2 \strokec2 .\cf5 \strokec5 mx | elpolloloco\cf2 \strokec2 .\cf5 \strokec5 com\cf2 \strokec2 .\cf5 \strokec5 mx</p>\
                        </div>\
                    </footer>\
                </div>\
            \cf2 \strokec2 );\cf5 \strokec5 \
        \cf2 \strokec2 \}\cf5 \strokec5 \
\
        \cf12 \strokec12 ReactDOM\cf2 \strokec2 .\cf10 \strokec10 render\cf2 \strokec2 (\cf5 \strokec5 <\cf12 \strokec12 App\cf5 \strokec5  />\cf2 \strokec2 ,\cf5 \strokec5  \cf12 \strokec12 document\cf2 \strokec2 .\cf10 \strokec10 getElementById\cf2 \strokec2 (\cf8 \strokec8 'root'\cf2 \strokec2 ));\cf5 \strokec5 \
    \cf2 \strokec2 </\cf6 \strokec6 script\cf2 \strokec2 >\cf5 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf2 \strokec2 </\cf6 \strokec6 body\cf2 \strokec2 >\cf5 \strokec5 \
\cf2 \strokec2 </\cf6 \strokec6 html\cf2 \strokec2 >}