<!--

 .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  .  . .  . 
   .       .  .:   .       .   .S8: % %.%8;.       .     .%X;      .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .        
     .  .   :t;8 :    . .    :t:8S;%%%X%%S8X8   .    .   S8%% ;  .    . .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  . . 
 .       .8@8O%SXO  .     .@8@XSttS%t%t%tt%O ;;       . 8StS%8X8.        .      .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .       .          
   .  ..t8X%t%%%S8.     .X8X%t%t;tt;tt;t;tt%tO%8;: .    .8%Sttt%%;S..  .    . .    .  .    .:8t88;8t8 8;   . %t@8.8:8888%   . .   S%888.O   . .% 8888;     . .t%888t  .tt88.8 88 8;  . .8t88t8t8@S%.  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  . .  .
  .   :8X%tttttt%8: .   S8XStt;ttt;t;tttt;t;t%ttS :   . .8;%;t%t%SXX.    .      .   .   .  S O%XS%t%%tt8S   t8S%XS%%SS%%8X .    . 08SS8X8. .   S8X0%X: .      XS%S8   88X%XS%Sttt%t.  :0S%SS%t%%SS8t .   .   .  .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .       
    .O:8Xt;t;t;tS8:.  .t 8%t;tttt;tttt%;tt;tttt%;%..    .8t%tt;tt%;S8O .   .  .   .   .   S8@X%888S88X@t :S@XSO.8 X88%tt8%      S0%%X%%SS     t8tX%;X % . t@X8S%%S%  %%8%O8X. O8X8S   SXt88  S8888:   .   .      .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .    . .  
  . ;OXXt;tttttt%8:   .88St;tt;t;tt%t%;tt%t%t;t%ttS8:  ..8ttt;ttttt%;88:        .       .8SS%O;.;.:  %t.   XX;;8.::.  X8XtX0. . 8I%%S8%SXXX  . 0X%ttt;t88:%8S0%t;;8   80%%%8;..   :    .:8%%%.%:..  .: .         .         .       .       .       .       .       .       .       .       .       .    .     .
   8S%%t;Stt;t%t%8: . 8@t;t%t;t%t%t;%tt%;t;tt;t;t;8;   .8t%;t%;t;tt%;8%. .  .     . .  .OX%tS..  .   . .;8t%S8:   .    %S;8.  :A$Xt..;SSt8..  S@t;0.XStS88X%%;SttSS: %ttSX88O 8.      tS;S888 8X     .  .  .   . . .      . .     . .     . .     . .     . .     . .     . .     . .     . .     .    .   
  .8S%tttt;tt;t;X8.  .8Xt;tt;tt%tttS%;t%tt%tt%t;t;;8  . .Ot%t;%tt%t;tt; :      .  .      8t%%;   .       tS%%%% . .    %St;8. . 80;8S. 8ttS%. .%8%S8X XttS%t8 8XSt8:  88@X%%%8X@8@8.  .: 8SX;t@SS88 ;   .      .       .  .     .       .       .       .       .       .       .       .       .     .    . 
   ;%  t t t t  8; . .:8  t     ;             ;    %     t; ; ;  t t  :;   .    .    .  .Stt;8.    . . . :8X;X;       . St:8..:88tSX   SXS%%   S8%%O%.X8t%%88.8@ttS%   :..S8;  88%S80 .. .8S: 88@SXt..    .     .  .   .    .    . .     . .     . .     . .     . .     . .     . .     . .     . .   .    
  . .::.......::..    .::. :.......::...........:...  .  ...........:. . .   .     .    .X8%t@88t. .%: X. 8ttt8 8.. :8@8%t8t 888ttt@8Xt%t;tX .S8%%8O ::%8.;..8XS;80   8S;S; .:t8%%t;. :  8%. .:8%%%8   .    .        .    .   .      . .     . .     . .     . .     . .     . .     . .     . .     .   .  
                    .        .         .  .       ..   .  .          .         .     .    8X%t%%888X88%8% ;tX;%%8@8X%%%;88.  tt8%%t@t888:Ot8t%  88tO% . .:   . 8@t%S   @ S88@888X%t@S .    X0%%8888X8tt; .   .    . . .  .   .   .   .  .     .       .       .       .       .       .       .       .         .
  .  .  . . ;O8;O. .   . .     .t8S:   t8O: . .  .  .    ;8t8S:  .     . . .     . .    .  X8%%SStSSS8@8:.:S:8%SXS%S%%888t. t8%t%S       ;:St%  S8t%Ot ..  .   8XSt80  88@S%XX%%t%X:8. ;S8St%t%tXt%8 S. .   .           .       .      .     . .     . .     . .     . .     . .     . .     . .     .  . .   
    .   ;S@OXtX@8:   .    .;%8@8X%XXX@S%X88 8:      .  .88%%X88 8: .        .        .    .. %%.;  .8...  ;;.8; ;  ;8:...XXXX8         AAOS%8A 888%88   .   ..t8%888; ;.:: XX: S  8S . .. :8; %  :0 ..        .  .  .      . .     . .   .  .    .  .    .  .    .  .    .  .    .  .    .  .    .  .       . 
   .   88S%Xt%t%t:. .    . 88S%X%SSXSXX%%%tXSXO; . .  . :8S%%%;t%SS;  .  .     . .  .   . .    . .;: .   .    ..  .::   .  ::.: ..        :..;..:; .  .   .........;. .....  ....:.:    .    :. .;.      .  .        .  .  .     .  .       .    .   .   .   .   .   .   .   .   .   .   .   .   .   .  .  .    
 .   %88@S;tt;ttt;     . %88SSttt;t;t;tt;t%%%tS8;.       8;t;tttttS8;.    .  .                ..      .   .  .  .     .         .          . .      .  . .        .      .       .   .   . .     . .     .  .  .     .    .        . .     .   .       .       .       .       .       .       .      .  .  
    X8X8ttt;tt;tt;   .  X8@%t;t;ttt;t;tt;t;tStSS8t . . :8%%ttt;%S%SS8t .        . . .  .  .    .  .   .         .  .    .  . .  .        . . .  .         . .  .  . . .  .  .    . .    .    .      . .         .     .    . .  .     .  .       . .     . .     . .     . .     . .     . .     .  .     .
  .X8SXt;ttt;tt;tt .   S8XS%t%ttt%;tt%tt%tttt;tS%%S.     8;t;;tt;tt%%%S.   .  .          .   .   .   .   .  .  .   .   .          .        .   .   .  .  .       .       . .   .      .   . .   .  .      .  .    . .    .     .    .   .   . .  .    .  .    .  .    .  .    .  .    .  .    .  .      .   
  .8XSt;ttttt%ttt;   ..8@X%%t;t;t;tt%tt%;t%t%tt;t%X8.  .:8%tttt%t;%tt%X8..     .  .  .     .   .   . .;S@88888Xt.    .   . .  . .S88888%8888888888888X:     . .     .  .   S888888888.  .     .   . .8888X8X8. .      .    .     . :8@8@8@8;        .   .;S@8888Xt:    .    .       . .;S@8888Xt:   .  .  . 
  8SXttt%;t;t;t;%;    88O%t;tt;tt%tt%t%tt%t%;tt%t;t8%    8;t;t%;t%;tt;;8%   .         .  .   .  .S;88;8X%%%;t%%88.8 8. .         88;t;ttt;t;ttttt%t%%88tt X     .    .    88X;%;;;;t8t.   . .   .   :88:;tt%%8X .   .   .    .    8SSt;;;;;;  .  .  t%;888St;;;ttS;%.;tX.     . . %t8888%t;;;t%S88  .S.     
 . %;t%;ttt%tt%tt; . . Stt;t;ttS%tt%t%;tt%t;tt%t;t;8  . :8%%ttt%tt%t;t;OO  .   .  . .          % 88%%X%Xt%ttt%t%t%XSSS8 8. . . .  S:%%%%%%t%%%%%%%%%%%%tSSSX88; .  .    . 888%t%%%%%;tt% .           :8St%t%;;%8:. .       .   . t8X%tttt;ttX..    88SSSSStt;ttt;t;;X@SS%8%t.    8%;XS%Xtttttt;tttSX%%%8S;.  
 .%t%t;t;t%;t%;tt;     %%;tttS%;tt%t;ttS%;tt%tt%t;%8O  . 8tt;t%tt%tt%t%8O.  .        . .  . .888;X%tt%tt;ttt;ttt%%%%;%t8;       .8S%t;tt;t;t;tt;tt;t;%%%%%;%S8;     .    88tt;tt;ttttSS.   .  .  . ..8%t;t;tt%tt ;    . .   .  t.8@t;t;tt;;8.   .XXtXtttt;tt;t;tttt%S%t;t8;    tX@St%;t;t;;t;t;t%S%%t;%::.   
  ;%t;ttt%tt%tt%tt  ..t%tt;t%;ttSttt%t%;ttS%tt%;tt;S;.  ;OS%tt%tt%t%t;:St      .  .        . @%%;ttt;tt8@888S@tttttt%%tX%; .  . XSS;t;%t%XS8XS8XS8%t;t;t;tt;88. .     .:8Sttt;tt;ttt%X8;      .    .8%ttt;t;t;t8S .     .   888X;tt;t;tt;S. . 88t%;tt;t%8;8.8.888ttt;S8t  . 88S;t;tt;%;t8 88:88ttttSX; .  
  %8tt;t%tt%tt%tt;    t8%tttt%t%;tt%ttt%t%;tt%tt%;; : .  8:tt%;t%t;tt%t : .  .      .  . .:8S@ttttt%88tS.     %XS8%t;t;%%t8t .  .%:ttt%ttt. ... ...%88Xt%t;tt;8;.  .   8X%t%;ttS8:t;t;;8t . .     . :8S%t;tt;ttt%t8:.       t88%%t;t;ttt;t;8.  :8Xttt;t%%X ....   .8 %8%:.   ;;;%t;t;S;S.   :   .8 :88;.    
   .t%ttt%tt%t;%tt.  .. %%tt%t;ttt%ttS%tt;%t%;t%tt8S.   :8%%ttt%tt%t%t8;.      .  .        SXt;t%t;tS..        .  8t%t%tt;%8.   .8%%tt%t%8          . .%;tt;t:SS  .  .t8Xttttt@8tttt;tt;;:    .     ..XS;tt%t;ttt%t% ; .  .;.8Xt;tt%tt%;t;t8.  %88ttt;tt:  .       .      .  S88ttt%t.  .        ..    .  . 
   ;8;;t%;t%;t%tt;    .;8;t;tt%tS%;t%;;tS%tt%tt%;XO .    8tttt%tt%t;%OS  .  .       . .  %8t%t;t;t t.   .        .;t%t;tt%%88. . XSSt%t;t8.  .  . .   ;8tttt;tt :    .88%;tt;tt.:8ttt;tttt.    .  .: 0ttt%;tt%;tt;;%8S   888Xtttt;tt%tt%t;S..  ttt;ttt@8;          .      . :%;%t;tt88:                .   
  ..; Xtttt%tt%ttt.  . .: Xtt%t%;ttt%tt%;tt%;t%tt8   . .;OS%;tt%;tt%;8.       . .         XS;tt;t;.           .  . .Xt%t;t;;8:  .%:tt;t%;8..         . :X%t;tt; :.  . 8Xttt;tS;..S8;%t;t%S:  .       0X%t;ttStXt;ttt%t8:S@8%%;tt;t88.;t%t;;8.    S%t;t;;%88;  888S:  .  .    .;%S;tt;t%88X  888%:     .     
    ..88%t%tt%;tt;      ..88%tt;ttS%;tt%tt%tttS8t  .     8;;tt%tt%X8;  .  .       . .  . 8t%t%tt%  . . .  .    .  . 8@t;ttt;8    8S%tt%t::   . .  .   888;%tt%t:  . 88%;%ttt88  . 8t;tttt;8; .  . . :8S%%tt%t:8%t;ttt%;%8XStttt%t888%tt;t%tS. ..t8ttS;tt%;SSXX%%%88S8S.  .    t8;%%tt%t%SXXX%%S8:%8S     .  
   . . . 8t%ttt%tt .  .  . : 8t%t%;ttS%tt%;S88%:     .  :8S%;ttS88X.    .   .  .      . :8%%t;t%S8:      .  .       t8t%t%;tSS. . t%tt%t;8.        .S 8S;ttt%t8;.  t8Sttt;tS :.  .t8t%;t;tt8t       .88;tt;%t.:8S;tt;ttt;%ttt;tt ;:8tttt%t;8.  . %8%tt;t%%tt%%%%%tSS%88 S . . .;8t;t;tt%%t%%%%%%Xt%88 S .   
       .  tSt88;OX.      . .. %%S888888::8 8t.   .  .    8t8.0:8 .  . .      .   .  .    8t%;tt%%8: .  .      . . . ;%S%;tt;8;  :Xt%t%;t:X;X 8:888888XStttt;tXX.  :88;t;tt%8%   . .t8;%%ttt%%. .  . .8%t;t%tt...: Xtt;tttttt;t8;  .8t;tt%t;S .   ::S.888%;tt;t;tt%S%%S%%8X;    ::S 888tt;tt;tttS%tt;SS8 t . 
  .  .     ..: :  . .  .   .  . .t      .:.. .    .   . .:   .          . .             :8;ttt%t; .   .   . .      .88X;t;ttt;   8SS;tt;%%%XSSXSSSXS%%;t;t;%S .   :8%t;t;%8X .    . 8%t;ttt%S8:    .. X%tt;tt:. . 8Xttt%t;t;tS;    8t%t%;t;8.  .    .. %%S8;8S%tt;t;tt%%t%%. .  . .: StX 8X@St;t;tt%%%;St   
      .   .  .       .   .     .         .     .       .     ..  .  .       .  .  .  .  . t%tt%t;8 ..          .   . ttttt%;8;. . t%tt%t;t%%%tSSS%tt;t;tttS%:.   88t%;tt%t.         %8S%;tt;;8;. .  :8S%%tt%t. . . 8;%%tt;%X88. . :8ttt;t;t8.    . .       ..t@::8t%tttS%X8. .            t8;:88;%%ttt%;8  
   ..:::;:::::::. .    ..::::::.:::.....::::::.:::. .   . ..:::::::::: . .          .  ..S8:%%;t;S8S   .  .  .   .. 8%t;t%tS8:  :X%%t%;tt%ttttt;t%t;tt%8tS8;   .%8S%tt%t;%SXSXSSSXXS;Sttt;%t;%8X    .:XStt%;t:   .  .;8;t%t;;..   .8%ttt%t;S. .    .  . .      . .  tt;ttt;X    .. . .  . .    :  ;t;t;tt : 
 . :88@X@8@8X@888S  . 8888@888@8@8@88@8@8888@8@8@8 : .  ;88@888X8XX@88   .  . .         XX;tt;tt%8.S          ;t88St;tt;X ;    SSS;tt%tt.:;;;;;;;tX8S  ..  . t88%t%;tt%t%S%S%%%%%tttt;t%;tt;t8; . :8@t;tttt.  .   . ;;8X%     . :8ttt%t;;8.   .: 8t8%.    .  .  . t%t;t;t ; .;;8X8%      .   .;8S%t;t;; ..
   8@StX%XStXSX%X8 .  8XS;S%%XX;%%OS%XSO%tX%X%;S%tX8    .8SXS@SX%t%%XSX% .        .  .  .   t;t%tttt%8 8t  . .X 88ttt;ttSt8;  . . %%tt%;;;.         ..     .   00;t;ttt%t;t;t;tttt;t;t;tt%t;tttSX  .  X%t;t%t:.   .   .:: . . .   .8%tt;tt;S. . .888;t888;:     ;88tS;tt%t%%  .;8%%%8 t%..   .;S8XXt;tttS8: 
   %:XX%%tttt;t%X8:  :X8tttt%tt%%;tt;tt;t%tt;t%tttS : . .8Xtt;ttt%t%tS..   .  .    .       : Stt;ttS%;tS8t8.8S@SS%ttttt%%8S .   :X%%tt%tt8:.. . .  .   .  .   88St;t;tS;8888 8.8.8.888888ttt;tt%8S. :8@ttt%tt.   .                :8%ttt%t;8.  tX8X;t%tS%;88 8.88S8%t%t%tt8t %;8%t%t%%S888 8888@8%;ttt%t8;  
  . .S%t;tt;tt;t%8:    SS%ttttt;tt;tt;ttt;ttt;t;%t.%     8S%;t;t;t;t@X:  .      .     . .  ..S8Xtt%;t%tt%S%S%%%tttt;t%SS8:   .  . t%t%t;: .       .         .88%;tttt%8t: ... .. . ;. ::;8;tt;tt;:%   X%tt;tt.     . . . .  .  .  .8%tt%;t;S  ..XXSt;t%%%%;XS@SSSSttttt;;;;   ;S%t;t%%%%%X@XXtXtttttt%8;.   
     . t%t%t;tt;S8:  .   %tt;t;t;ttttt;tttt;t%ttt8%  . ..8tttt;ttttX8  .   .  .   .  .    .  . S8tttt%tt%tttttt;t;ttt;8:.  .    :Xt%;tt%t8. . . .    .  . . .88%tt%t%88.        .        %%%%t;t;X%.:8@t;tt%t: . .         .    . :8ttt;tt;8:    t8:ttt;t;t%%%Stt;t;t;%S%  ..  .8Stt;t;ttt%ttttt;tt;;8S . . 
     ..O8;%;t%tt%8:    .%%Stt;t%t;tt;tt%;t;tt;tt%8.      8%tt;t%t%88 . . .      .       .     ..:8 888Xttttt;tt%8X8X8;.      .  .SSStt%;: .  .     .   .     8St;tt;% .    .  .   .      :8:%tt%t%X8 .00%tt%;t.      .  .      .   .8%ttt%;t8.    .:8 888X%%;tt;ttt%%  8; .       8 88@8%%ttt;tt%;t8S8;      
  .    : 8tXt;t;%8: .   . O8Sttt;t;tt%;tt;tt%%X t.  .  ..8ttttt8X%..        .      .  .    .    . ..  ;88XXX@88%::;.     .    .  S@SSXSX88:.    .    .    ..8@XSXSSX8t  .            .   :%0SX@XXS88;8@XSXSXX%  . .      .  .    .:8SSX@XXS0;     ...::   t88@8X88%. .:.        ..:;:  :%88X8X88%.:t.   .  . 
   .   ..: X8%;t@8   .    ..X8tttt%tt%t;ttS%8 t.     .  .8S%t8 t.   .  .  .   .  .       .   .         ..  ....  .  .  .   .    .      .;..   .   .     .   .      ..     . .  . . .   .  .      .;:.       .        .         .  ..     .   .     .      ...:.. .  .   .  .   . .     .......    . .       
    .      ::O. 8: .   .    .;O:88t@888@88@8% .   .      tt %;.   .     .      .    . .        . .                   .   .   .      . .     .   .   .  .      .  .  . . .     .      .   .    . .    . . .    .  . .   .  .  .     .   .        .          .      .  .       .     .           .   .  . .  .
     .  .   . ...   .    .  .   .        ::.  . .   .  . ...   .    . .    . .    .      . .       .  .  .  .  .  .        .   .  .     .  .      .      . .              .      .        . .     .        .   .         .      .    .    . .     . .    .     .      .  . .   .          .  .  .           
 .    .   .    . .    .       .           . .     .     .       . .      .      .   .  .     .  .         .     .   . . .    .   .   .        .      .       . .  .  . .    .  .   .  . .  .   .    .  .     .    .  .     .  .   .    .      . .     .    .     . .   .        .  . . .          . .  . .  


 ☕ COPYRIGHT 2025 - TODOS LOS DERECHOS RESERVADOS

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Consulta General de Trámites | OPAMSS</title>
    <meta name="description" content="Sistema de seguimiento y consulta de trámites en línea de OPAMSS. Consulte el estado de sus trámites de construcción, urbanismo, permisos y otros servicios del Área Metropolitana de San Salvador." />
    <meta name="keywords" content="OPAMSS, trámites en línea, seguimiento trámites, permisos construcción, urbanismo San Salvador, área metropolitana, consulta trámites, permisos municipales, El Salvador" />
    <meta name="author" content="OPAMSS - Oficina de Planificación del Área Metropolitana de San Salvador" />
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
    <meta name="googlebot" content="index, follow" />
    <meta name="geo.region" content="SV-SS" />
    <meta name="geo.placename" content="San Salvador" />
    <meta name="geo.position" content="13.6929;-89.2182" />
    <meta name="ICBM" content="13.6929, -89.2182" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://tramites.opamss.gob.sv/" />
    <meta property="og:title" content="Consulta General de Trámites | OPAMSS" />
    <meta property="og:description" content="Sistema de seguimiento y consulta de trámites en línea de OPAMSS. Consulte el estado de sus trámites de forma rápida y segura." />
    <meta property="og:image" content="https://tramites.opamss.org.sv/Content/images/logo-noletras.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Logo OPAMSS - Sistema de Trámites" />
    <meta property="og:site_name" content="OPAMSS" />
    <meta property="og:locale" content="es_SV" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://tramites.opamss.gob.sv/" />
    <meta name="twitter:title" content="Consulta General de Trámites | OPAMSS" />
    <meta name="twitter:description" content="Sistema de seguimiento y consulta de trámites en línea de OPAMSS. Consulte el estado de sus trámites de forma rápida y segura." />
    <meta name="twitter:image" content="https://tramites.opamss.org.sv/Content/images/logo-noletras.png" />
    <meta name="twitter:image:alt" content="Logo OPAMSS - Sistema de Trámites" />
    <link rel="canonical" href="https://tramites.opamss.gob.sv/" />
    <link rel="alternate" hreflang="es-sv" href="https://tramites.opamss.gob.sv/" />
    <link rel="alternate" hreflang="es" href="https://tramites.opamss.gob.sv/" />
    <link rel="alternate" hreflang="x-default" href="https://tramites.opamss.gob.sv/" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/site.css?v=47wHGV6-qumq6m3581DNeQMp3brVyubiMeY1i5ve5NI" />
    <link rel="stylesheet" href="/TrackingOpamss2025.styles.css?v=VGzpR1aGmEiOB8uBZiMFAOSSG9UhIC7yqM2-TF5jgOI" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q54F05T73M"></script>
    <script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());   gtag('config', 'G-Q54F05T73M'); </script>

</head>
<body>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<div class="app-container">
    <div class="container py-4">
        <div class="card">
            <div class="header">
                <img style="max-width: 170px;" src="https://tramites.opamss.org.sv/Content/images/logo-blanco2.png">
                <h4></i></h4>
                <!--div class="header-actions">
                    <button class="btn btn-light btn-sm">
                    <i class="fas fa-question-circle me-1"></i> Ayuda
                    </button>
                    <button class="btn btn-light btn-sm">
                    <i class="fas fa-user me-1"></i> Mi Cuenta
                    </button>
                    </div-->
            </div>
            <!-- Tabs de navegación -->
            <h5 class="consulta-title-gradient">Selecciona tu consulta</h5>

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button aria-controls="gestiones" aria-selected="false" class="nav-link" data-bs-target="#gestiones" data-bs-toggle="tab" id="gestiones-tab" role="tab" type="button">
                        <i class="fas fa-clipboard-list me-2"></i>Gesti&oacute;n
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button aria-controls="expedientes" aria-selected="true" class="nav-link active" data-bs-target="#expedientes" data-bs-toggle="tab" id="expedientes-tab" role="tab" type="button">
                        <i class="fas fa-folder me-2"></i>Expediente
                    </button>
                </li>
            </ul>
            <div class="custom-tabs-container d-flex justify-content-center align-items-center gap-4">



                <button id="tabBtnExpedientes" type="button" class="glass-tab-card active" data-bs-target="#expedientes-tab" tabindex="0">
                    <div class="icon-circle-glass mb-2">
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="12" fill="#4066b1" />
                            <path d="M20 7a2 2 0 0 0-2-2h-5.17a2 2 0 0 1-1.41-.59l-1-1A2 2 0 0 0 8.17 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM6 5h2.17l1 1H18v2H6V5Zm0 4h12v10H6V9Zm2 2h8v2H8v-2Zm0 4h5v2H8v-2Z" fill="#fff" />
                        </svg>
                    </div>
                    <div class="glass-card-title">Expediente</div>
                    <div class="glass-card-desc">Trámite en análisis</div>
                </button>
            </div>


            <!-- Contenido de las pestañas -->
            <div class="tab-content" id="myTabContent">
                <!-- Pestaña de Gestiones -->
                <div aria-labelledby="gestiones-tab" class="tab-pane fade" id="gestiones" role="tabpanel">
                    <div class="main-content">
                        <div class="section-description">
                            <strong>Gestiones OPAMSS</strong>
                            <p>Procedimiento de evaluación de requisitos para determinar la admisibilidad de las solicitudes presentadas ante la OPAMSS.</p>
                        </div>
                        <!-- Filtros mejorados -->
                        <div class="filter-container">
                            <div class="filter-header">
                                <i class="fas fa-search"></i>
                                <span>Buscar Gestión</span>
                                <button aria-controls="searchFormGestiones" aria-expanded="true" class="filter-toggle-btn" data-bs-target="#searchFormGestiones" data-bs-toggle="collapse" type="button">
                                    <i class="fas fa-minus"></i>
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <div class="collapse show filter-body" id="searchFormGestiones">
                                <div class="col-md-12 mb-3">
                                    <div class="form-check custom-checkbox">
                                        <div class="checkbox-container">
                                            <input class="form-check-input" id="esTramitadorGestion" type="checkbox" />
                                            <label for="esTramitadorGestion" class="form-check-label">B&uacute;squeda por documento identidad</label>
                                            <div class="info-icon-wrapper">
                                                <svg class="info-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
                                                    <path d="M12 16V12M12 8H12.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                                </svg>
                                                <div class="custom-tooltip">
                                                    <div class="tooltip-content">
                                                        <div class="tooltip-header">
                                                            <svg class="tooltip-icon" viewBox="0 0 24 24" fill="none">
                                                                <path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                                            </svg>
                                                            Búsqueda Inteligente
                                                        </div>
                                                        <div class="tooltip-body">
                                                            Esta opci&oacute;n habilita la b&uacute;squeda por coincidencias seg&uacute;n el documento ingresado, as&iacute; facilitando
                                                            la identificaci&oacute;n de cu&aacute;l gesti&oacute;n seleccionar y consultar.
                                                        </div>
                                                    </div>
                                                    <div class="tooltip-arrow"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><div class="row compact-form">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="numGestion">Número de gestión</label>
                                            <input class="form-control" id="numGestion" placeholder="Ingrese el número de gestión" type="text" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="numDocumentoGestion">Número de documento de identidad</label>
                                            <input class="form-control" id="numDocumentoGestion" placeholder="Ingrese el número de documento de identidad" type="text" />
                                            <div class="form-help-text">Registro o número de DUI, pasaporte, NIT o carnet de residente</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-footer">
                                    <button class="btn btn-outline-secondary" id="limpiarGestion" type="button">
                                        <i class="fas fa-times me-1"></i>Limpiar
                                    </button>
                                    <button class="btn btn-primary" id="buscarGestion" type="button">
                                        <i class="fas fa-search me-1"></i>Buscar
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Mensaje de no resultados -->
                        <div class="results-table-container mt-4" id="resultadosMultiplesGestiones" style="display: none;"><div class="section-title-modern mb-4"><h5 class="m-0"><i class="fas fa-list-ul me-2"></i>Resultados de la búsqueda</h5></div><div class="table-responsive"><table class="table table-hover dt-responsive nowrap w-100 border-0 modern-table" id="tablaResultadosGestiones"><thead><tr><th>NÚMERO</th><th>FECHA</th><th>ESTADO</th><th>SOLICITANTE</th><th>ACCIÓN</th></tr></thead><tbody id="resultadosTablaGestiones"></tbody></table></div></div><div class="no-results" id="noResultsGestiones">
                            <i class="fas fa-search"></i>
                            <h5>No se encontraron resultados</h5>
                            <p>No se encontró información para los criterios de búsqueda ingresados. Por favor, verifique los datos e intente nuevamente.</p>
                        </div>
                        <!-- Detalles de la gestión (inicialmente oculto) -->
                        <div class="details-container" id="detallesGestion">
                            <div class="d-flex justify-content-end mb-3"><button class="btn btn-outline-primary btn-sm back-button" id="volverAResultadosGestion" style="display:none;" type="button"><i class="fas fa-arrow-left me-2"></i>Volver a resultados</button></div>
                            <!-- Resumen de información -->
                            <div class="summary-row">
                                <div class="summary-card">
                                    <div class="summary-icon primary">
                                        <i class="fas fa-clipboard-list"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Número de Gestión</div>
                                        <div class="summary-value">GES-2025-0157</div>
                                    </div>
                                </div>
                                <div class="summary-card">
                                    <div class="summary-icon success">
                                        <i class="fas fa-calendar-check"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Fecha de Inicio</div>
                                        <div class="summary-value">25/06/2025</div>
                                    </div>
                                </div>
                                <div class="summary-card">
                                    <div class="summary-icon warning">
                                        <i class="fas fa-clock"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Días Transcurridos</div>
                                        <div class="summary-value">5 días hábiles</div>
                                    </div>
                                </div>
                            </div>
                            <!-- Layout dividido para escritorio -->
                            <div class="split-layout">
                                <div class="split-layout-left">
                                    <div class="progress-container">
                                        <div class="section-title mb-2">
                                            <i class="fas fa-tasks"></i> Progreso de la Gestión
                                        </div>
                                        <div class="progress">
                                            <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar" role="progressbar" style="width: 60%;"></div>
                                        </div>
                                        <div class="progress-info mt-2">
                                            <span><i class="fas fa-calendar-check"></i> Iniciado: 25/06/2025</span>
                                            <span><i class="fas fa-clock"></i> 5 días hábiles</span>
                                        </div>
                                    </div>
                                    <div class="pending-activities">
                                        <h6><i class="fas fa-exclamation-circle me-2"></i>Actividades pendientes</h6>
                                        <ul>
                                            <li>Confirmar recepción de la notificación</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="split-layout-right">
                                    <div class="section-title">
                                        <i class="fas fa-history"></i> Seguimiento de la Gestión
                                    </div>
                                    <div class="timeline-container">
                                        <div class="timeline timeline-compact">
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-file-alt me-2" style="color: var(--success-color)"></i>
                                                        Solicitud recibida
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Martes 25 de junio de 2025 - 10:30 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Gestión registrada en el sistema
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-user-check me-2" style="color: var(--success-color)"></i>
                                                        Validación de datos
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Miércoles 26 de junio de 2025 - 9:15 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Verificación de la información proporcionada
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-clipboard-list me-2" style="color: var(--success-color)"></i>
                                                        Análisis de la solicitud
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Jueves 27 de junio de 2025 - 2:45 pm
                                                    </div>
                                                    <div class="timeline-description">
                                                        Evaluación de la gestión solicitada
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-file-signature me-2" style="color: var(--medium-gray)"></i>
                                                        Elaboración de respuesta
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        Preparación del documento de respuesta
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-envelope me-2" style="color: var(--medium-gray)"></i>
                                                        Notificación al solicitante
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        Envío de la respuesta por los canales establecidos
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Pestaña de Expedientes -->
                <div aria-labelledby="expedientes-tab" class="tab-pane fade show active" id="expedientes" role="tabpanel">
                    <div class="main-content">
                        <div class="section-description">
                            <strong>Expedientes</strong>
                            <p>Solicitud que cuenta con revisión preliminar de requisitos, con el pago correspondiente y ha sido formalmente admitida por la OPAMSS para su análisis y evaluación.</p>
                        </div>
                        <!-- Filtros mejorados -->
                        <div class="filter-container">
                            <div class="filter-header">
                                <i class="fas fa-search"></i>
                                <span>Buscar Expediente</span>
                                <button aria-controls="searchFormExpedientes" aria-expanded="true" class="filter-toggle-btn" data-bs-target="#searchFormExpedientes" data-bs-toggle="collapse" type="button">
                                    <i class="fas fa-minus"></i>
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <div class="collapse show filter-body" id="searchFormExpedientes">
                                <div class="col-md-12 mb-0">
                                    <div class="form-check custom-checkbox">
                                        <div class="checkbox-container">
                                            <input class="form-check-input" id="esTramitador" type="checkbox" />
                                            <label for="esTramitador" class="form-check-label">B&uacute;squeda por documento identidad</label>
                                            <div class="info-icon-wrapper">
                                                <svg class="info-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
                                                    <path d="M12 16V12M12 8H12.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                                </svg>

                                                <div class="custom-tooltip">
                                                    <div class="tooltip-content">
                                                        <div class="tooltip-header">
                                                            <svg class="tooltip-icon" viewBox="0 0 24 24" fill="none">
                                                                <path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                                                            </svg>
                                                            Búsqueda Inteligente
                                                        </div>
                                                        <div class="tooltip-body">
                                                            Esta opci&oacute;n habilita la b&uacute;squeda por coincidencias seg&uacute;n el documento ingresado, as&iacute; facilitando
                                                            la identificaci&oacute;n de cu&aacute;l expediente seleccionar y consultar
                                                        </div>
                                                    </div>
                                                    <div class="tooltip-arrow"></div>
                                                </div>
                                            </div>
                                        </div><label class="form-check-label" for="esTramitador">
                                    </div>
                                </div><div class="row compact-form">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="tipoTramite">Tipo de trámite</label>
                                            <select class="form-select" id="tipoTramite">
                                                <option selected="" value="">Seleccione un tipo de trámite</option>
                                                <option value="CL">Calificación de Lugar</option>
                                                <option value="FALL">Factibilidad y Drenaje de Aguas Lluvias</option>
                                                <option value="LC">Línea de Construcción</option>
                                                <option value="PC">Permiso de Construcción</option>
                                                <option value="PP">Permiso de Parcelación</option>
                                                <option value="PPS">Permiso de Parcelación Simple</option>
                                                <option value="RO">Recepción de Obras</option>
                                                <option value="RVZ">Revisión Vial y Zonificación</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="numExpediente">Número de expediente</label>
                                            <input class="form-control masked-input" id="numExpediente" placeholder="XXXX-XXXX" type="text" />
                                            <div class="form-help-text">Formato: XXXX-XXXX</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="numDocumentoExpediente">Número de documento de identidad</label>
                                            <input class="form-control" id="numDocumentoExpediente" placeholder="Ingrese el número de documento" type="text" />
                                            <div class="form-help-text">DUI, pasaporte, NIT o carnet de residente</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-footer">
                                    <button class="btn btn-outline-secondary" id="limpiarExpediente" type="button">
                                        <i class="fas fa-times me-1"></i>Limpiar
                                    </button>
                                    <button class="btn btn-primary" id="buscarExpediente" type="button">
                                        <i class="fas fa-search me-1"></i>Buscar
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Mensaje de no resultados -->
                        <div class="results-table-container mt-4" id="resultadosMultiples" style="display: none;"><div class="section-title-modern mb-4"><h5 class="m-0"><i class="fas fa-list-ul me-2"></i>Resultados de la búsqueda</h5></div><div class="table-responsive"><table class="table table-hover dt-responsive nowrap w-100 border-0 modern-table" id="tablaResultados"><thead><tr><th>TR&Aacute;MITE</th><th>EXPEDIENTE</th><th>INGRESO</th><th>ESTADO</th><th>PROYECTO</th><th>ACCIÓN</th></tr></thead><tbody id="resultadosTabla"></tbody></table></div></div><div class="no-results" id="noResultsExpedientes">
                            <i class="fas fa-search"></i>
                            <h5>No se encontraron resultados</h5>
                            <p>No se encontró información para los criterios de búsqueda ingresados. Por favor, verifique los datos e intente nuevamente.</p>
                        </div>
                        <!-- Detalles del expediente (inicialmente oculto) -->
                        <div class="details-container" id="detallesExpediente">
                            <div class="d-flex justify-content-end mb-3"><button class="btn btn-outline-primary btn-sm back-button" id="volverAResultados" style="display:none;" type="button"><i class="fas fa-arrow-left me-2"></i>Volver a resultados</button></div>
                            <!-- Resumen de información -->
                            <div class="summary-row">
                                <div class="summary-card">
                                    <div class="summary-icon primary">
                                        <i class="fas fa-folder"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">N&uacute;mero de Expediente</div>
                                        <div id="codigo-expediente" class="summary-value">2025-0243</div>
                                    </div>
                                </div>
                                <div class="summary-card">
                                    <div class="summary-icon success">
                                        <i class="fas fa-calendar-check"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Fecha de Admisi&oacute;n</div>
                                        <div id="fecha-ingreso" class="summary-value">24/06/2025</div>
                                    </div>
                                </div>
                                <div class="summary-card">
                                    <div class="summary-icon warning">
                                        <i class="fas fa-clock"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Días Transcurridos</div>
                                        <div id="dias-habiles" class="summary-value">6 días hábiles</div>
                                    </div>
                                </div>

                                <div class="summary-card">
                                    <div class="summary-icon warning" style="color: #e3342f;">
                                        <!-- Rojo -->
                                        <i class="fas fa-hourglass-half"></i>
                                    </div>
                                    <div class="summary-content">
                                        <div class="summary-title">Última Actualización</div>
                                        <div id="dia-hoy" class="summary-value">02/10/2025</div>
                                    </div>
                                </div>

                            </div>

                            <!-- Aviso NUEVO para Observaciones de Análisis Técnico -->
                            <div id="zona-observaciones-analisis" class="mb-3"></div>

                            <!-- Aviso NUEVO de complementos de pago pendientes -->
                            <div id="zona-complementos-pago" class="mb-3"></div>

                            <!-- Alerta NUEVA: suspensión de plazo -->
                            <div id="zona-suspension-plazo" class="mb-3"></div>

                            <!-- Aviso NUEVO de limite de prorrogas/memos -->
                            <div id="zona-limite-prorroga"></div>

                            <div class="timeline-wizard">
                                <div class="wizard-track">
                                    <!-- Línea de progreso animada -->
                                    <div class="wizard-progress" style="width: 38%;"></div>
                                </div>
                                <div class="wizard-steps">
                                    <div class="wizard-step done" title="Expediente recibido en sistema">
                                        <div class="wizard-dot"><i class="fas fa-inbox"></i></div>
                                        <div class="wizard-label">Recepción</div>
                                        <div class="wizard-date">20/02/2024</div>
                                    </div>
                                    <div class="wizard-step done" title="Asignado al área técnica correspondiente">
                                        <div class="wizard-dot"><i class="fas fa-user-cog"></i></div>
                                        <div class="wizard-label">Asignado área técnica</div>
                                        <div class="wizard-date">21/02/2024</div>
                                    </div>
                                    <div class="wizard-step done" title="En proceso de análisis técnico">
                                        <div class="wizard-dot"><i class="fas fa-search"></i></div>
                                        <div class="wizard-label">En revisión</div>
                                        <div class="wizard-date">23/02/2024</div>
                                    </div>
                                    <div class="wizard-step active" title="Validación de resultados">
                                        <div class="wizard-dot"><i class="fas fa-check-circle"></i></div>
                                        <div class="wizard-label">Validación</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Elaboración de resolución">
                                        <div class="wizard-dot"><i class="fas fa-file-signature"></i></div>
                                        <div class="wizard-label">Resolución</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Pago de tributo municipal pendiente">
                                        <div class="wizard-dot"><i class="fas fa-money-check-alt"></i></div>
                                        <div class="wizard-label">Pago tributo</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Resolución notificada al usuario">
                                        <div class="wizard-dot"><i class="fas fa-bell"></i></div>
                                        <div class="wizard-label">Notificado</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                    <div class="wizard-step" title="Expediente finalizado">
                                        <div class="wizard-dot"><i class="fas fa-flag-checkered"></i></div>
                                        <div class="wizard-label">Finalizado</div>
                                        <div class="wizard-date"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="wizard-color-guide">
                                <div class="color-item">
                                    <span class="color-dot color-inactivo"></span>
                                    <span class="color-label">Pendiente</span>
                                </div>
                                <div class="color-item">
                                    <span class="color-dot color-proceso"></span>
                                    <span class="color-label">En proceso</span>
                                </div>
                                <div class="color-item">
                                    <span class="color-dot color-finalizado"></span>
                                    <span class="color-label">Finalizado</span>
                                </div>
                            </div>




                            <!-- Layout dividido para escritorio -->
                            <div class="split-layout">
                                <div class="split-layout-left">
                                    <div class="progress-container">
                                        <div class="section-title mb-2">
                                            <i class="fas fa-tasks"></i> Progreso del Expediente
                                        </div>
                                        <div class="progress-container">
                                            <div class="progress">
                                                <div class="progress-bar custom-progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress-info mt-2">
                                                <span><i class="fas fa-calendar-check"></i> Iniciado: 24/06/2025</span>
                                                <span><i class="fas fa-clock"></i> 6 días hábiles</span>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="split-layout-right">
                                    <div class="section-title">
                                    </div>
                                    <!-- Tabs verticales alineados al contenedor -->
                                    <div id="tabs-dinamicos" class="tabs-wrapper"></div>



                                    <div id="timeline-container" class="timeline-container">
                                        <div class="timeline timeline-compact">
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-file-alt me-2" style="color: var(--success-color)"></i>
                                                        Admitido
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Lunes 24 de junio de 2025 - 9:20 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Solicitud con número de expediente asignado
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-user-cog me-2" style="color: var(--success-color)"></i>
                                                        Asignado al Área Técnica
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Martes 25 de junio de 2025 - 11:45 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        El expediente ha sido clasificado según el área que lo analizará
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-clipboard-check me-2" style="color: var(--success-color)"></i>
                                                        Visita técnica
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Miércoles 26 de junio de 2025 - 2:30 pm
                                                    </div>
                                                    <div class="timeline-description">
                                                        En programación, ejecución y sistematización de inspección al inmueble
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline completado -->
                                            <div class="timeline-item completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-microscope me-2" style="color: var(--success-color)"></i>
                                                        En análisis técnico
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Jueves 27 de junio de 2025 - 10:15 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        En proceso de evaluación
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Sub-estados de análisis técnico -->
                                            <div class="timeline-subitem completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-lock me-2" style="color: var(--medium-gray)"></i>
                                                        Plazo de análisis suspendido
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Viernes 28 de junio de 2025 - 9:00 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Suspensión temporal del análisis por consultas interinstitucionales
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="timeline-subitem completed">
                                                <div class="timeline-icon completed">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-unlock me-2" style="color: var(--medium-gray)"></i>
                                                        Plazo de análisis reanudado
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Lunes 1 de julio de 2025 - 10:00 am
                                                    </div>
                                                    <div class="timeline-description">
                                                        Análisis reiniciado por respuesta obtenida de la institución consultada
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-pen-fancy me-2" style="color: var(--medium-gray)"></i>
                                                        Preparando respuesta
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        En proceso de elaboración
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-check-double me-2" style="color: var(--medium-gray)"></i>
                                                        En validación
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        En revisión de resultados
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Elemento de timeline pendiente -->
                                            <div class="timeline-item pending">
                                                <div class="timeline-icon pending">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="timeline-content">
                                                    <div class="timeline-title">
                                                        <i class="fas fa-envelope me-2" style="color: var(--medium-gray)"></i>
                                                        Respuesta notificada
                                                    </div>
                                                    <div class="timeline-date">
                                                        <i class="far fa-calendar-alt"></i> Pendiente
                                                    </div>
                                                    <div class="timeline-description">
                                                        Resolución enviada a los canales correspondientes
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Botón principal flotante -->
<div class="floating-action-button" id="fabMain" data-bs-placement="left" data-bs-toggle="tooltip" title="">
    <i class="fas fa-question"></i>
</div>
<!-- Botones secundarios -->
<div class="fab-actions" id="fabActions">
    <button class="fab-action-btn fab-wa" title="Chatear por WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </button>
</div>


<footer class="footer mt-auto py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="footer-brand">
                    <img src="https://tramites.opamss.org.sv/Content/images/logo-blanco2.png" alt="OPAMSS Logo" class="footer-logo">
                    <p class="mt-2 mb-0 footer-text">Oficina de Planificación del Área Metropolitana de San Salvador</p>
                </div>
            </div>
            <div class="col-md-4 mb-3 mb-md-0">
                <h5 class="footer-heading">Contacto</h5>
                <ul class="footer-links">
                    <li><i class="fas fa-map-marker-alt"></i> Torre Quattro - nivel 11, Complejo World Trade Center, ubicado en la 87 Avenida Norte y Calle El Mirador, San Salvador Centro.</li>
                    <li><i class="fas fa-phone"></i> (503) 2234-0600</li>
                    <li><i class="fas fa-envelope"></i> <a href="javascript:void(0)" class="__cf_email__">tramites@opamss.org.sv</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5 class="footer-heading">Enlaces</h5>
                <ul class="footer-links">
                    <li><a href="https://opamss.org.sv/" target="_blank"><i class="fas fa-external-link-alt"></i> Sitio Web Oficial</a></li>
                    <li><a href="https://tramites.opamss.org.sv/" target="_blank"><i class="fas fa-file-alt"></i> Portal de Trámites</a></li>
                </ul>
            </div>
        </div>
        <hr class="footer-divider">
        <div class="row footer-bottom">
            <div class="col-md-6 mb-2 mb-md-0">
                <p class="copyright mb-0">&copy; 2025 OPAMSS. Todos los derechos reservados.</p>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="social-links">
                    <a href="https://www.facebook.com/COAMSS.OPAMSS/" class="social-link" target="_blank"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://x.com/coamss_opamss?lang=es" class="social-link" target="_blank"><i class="fab fa-twitter"></i></a>
                    <a href="https://www.instagram.com/coamssopamss/?hl=es" class="social-link" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.youtube.com/channel/UCH73Ct1R0bnbi__fm4Glvzw" class="social-link" target="_blank"><i class="fab fa-youtube"></i></a>
                    <a href="https://sv.linkedin.com/in/coamss-opamss" class="social-link" target="_blank"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
            function mostrarAyudaContacto() {
        Swal.fire({
            html: `
                <div style="text-align: center; margin-bottom: 20px;">
                    Puedes llamarnos al <b>call center (+503) 2234-0600</b> o escribirnos por
                    <a href="https://wa.me/50322340600" target="_blank" style="color:#25D366;text-decoration:none;">
                        <i class="fab fa-whatsapp"></i> WhatsApp
                    </a>
                    para recibir ayuda.
                </div>
                <div style="text-align: center; margin: 20px 0;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #4066b1, #5a7bc4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(64, 102, 177, 0.3);">
                        <i class="fas fa-info" style="font-size: 28px; color: white;"></i>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 15px;">
                    <b>Consulta en desarrollo</b>
                </div>
            `,
            showConfirmButton: true,
            confirmButtonText: 'Entendido',
            confirmButtonColor: '#4066b1',
            background: '#f8faff',
            width: 360,
            customClass: {
                popup: 'swal2-custom-popup'
            }
        });
    }

</script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/js/site.js?v=9LiZZfXfuIB-rRgiBCQ8G9puK47wUOp_OxJeONlN1cM"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

    
</body>
</html>